From cf4fbc8553d854a5288498de6d9a0dba3580c8e6 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sun, 25 Dec 2022 18:01:01 +0800 Subject: [PATCH] Make sheet have header and body section --- src/app.css | 26 +++- src/components/account.css | 2 +- src/components/account.jsx | 195 ++++++++++++----------- src/components/status.css | 5 + src/components/status.jsx | 80 +++++----- src/pages/settings.jsx | 312 +++++++++++++++++++------------------ 6 files changed, 325 insertions(+), 295 deletions(-) diff --git a/src/app.css b/src/app.css index 6a396a1f..a6e9b582 100644 --- a/src/app.css +++ b/src/app.css @@ -583,22 +583,36 @@ button.carousel-dot[disabled].active { } .sheet { align-self: flex-end; + display: flex; + flex-direction: column; max-height: 90vh; max-height: 90dvh; - overflow: auto; - overflow-x: hidden; + overflow: hidden; background-color: var(--bg-color); width: 100%; max-width: calc(40em - 50px - 16px); border-radius: 16px 16px 0 0; - padding: 16px; - padding-left: max(16px, env(safe-area-inset-left)); - padding-right: max(16px, env(safe-area-inset-right)); - padding-bottom: max(16px, env(safe-area-inset-bottom)); box-shadow: 0 -1px 32px var(--divider-color); animation: slide-up 0.2s var(--timing-function); border: 1px solid var(--outline-color); +} +.sheet header { + padding: 16px 16px 8px; + padding-left: max(16px, env(safe-area-inset-left)); + padding-right: max(16px, env(safe-area-inset-right)); +} +.sheet main { + overflow: auto; + overflow-x: hidden; overscroll-behavior: contain; + padding: 16px 16px; + padding-left: max(16px, env(safe-area-inset-left)); + padding-right: max(16px, env(safe-area-inset-right)); + padding-bottom: max(16px, env(safe-area-inset-bottom)); + mask-image: linear-gradient(to bottom, transparent 0%, black 10px); +} +.sheet header + main { + padding-top: 0; } /* TAG */ diff --git a/src/components/account.css b/src/components/account.css index f49fb4ca..276cac63 100644 --- a/src/components/account.css +++ b/src/components/account.css @@ -12,7 +12,7 @@ font-size: 95%; line-height: 1.4; } -#account-container .note:not(:has(p)) { +#account-container .note:not(:has(p)):not(:empty) { /* Some notes don't have

tags, so we need to add some padding */ padding: 1em 0; } diff --git a/src/components/account.jsx b/src/components/account.jsx index 03603ed3..1b65c5b0 100644 --- a/src/components/account.jsx +++ b/src/components/account.jsx @@ -108,15 +108,17 @@ function Account({ account }) { ███ ████████████ -

-

████████ ███████

-

███████████████ ███████████████

-
-

- ██ Posts - ██ Following - ██ Followers -

+
+
+

████████ ███████

+

███████████████ ███████████████

+
+

+ ██ Posts + ██ Following + ██ Followers +

+
) : ( <> @@ -124,96 +126,99 @@ function Account({ account }) { -
- {fields?.length > 0 && ( -
- {fields.map(({ name, value, verifiedAt }) => ( -
- - {name}{' '} - {!!verifiedAt && } - -

-

- ))} -
- )} -

- - {shortenNumber(statusesCount)} Posts - - - {shortenNumber(followingCount)}{' '} - Following - - - {shortenNumber(followersCount)}{' '} - Followers - - {!!createdAt && ( +

+
+ {fields?.length > 0 && ( +
+ {fields.map(({ name, value, verifiedAt }) => ( +
+ + {name}{' '} + {!!verifiedAt && } + +

+

+ ))} +
+ )} +

- Joined:{' '} - - - + {shortenNumber(statusesCount)}{' '} + Posts - )} -

-

- {followedBy ? Following you : }{' '} - {relationshipUIState !== 'loading' && relationship && ( - - )} -

+ })(); + }} + > + {following ? 'Unfollow…' : 'Follow'} + + )} +

+
)}
diff --git a/src/components/status.css b/src/components/status.css index 2d32a2e2..b414312b 100644 --- a/src/components/status.css +++ b/src/components/status.css @@ -712,6 +712,11 @@ a.card:hover { min-height: 50dvh; } +#edit-history h2 { + margin: 0; + padding: 0; +} + #edit-history :is(ol, ol li) { list-style: none; margin: 0; diff --git a/src/components/status.jsx b/src/components/status.jsx index 22d40def..32705d49 100644 --- a/src/components/status.jsx +++ b/src/components/status.jsx @@ -1134,46 +1134,50 @@ function EditedAtModal({ statusID, onClose = () => {} }) { return (
- {/* */} -

Edit History

- {uiState === 'error' &&

Failed to load history

} - {uiState === 'loading' && ( -

- Loading… -

- )} - {editHistory.length > 0 && ( -
    - {editHistory.map((status) => { - const { createdAt } = status; - const createdAtDate = new Date(createdAt); - return ( -
  1. -

    - -

    - -
    2. - ); - })} -
- )} +

Edit History

+ {uiState === 'error' &&

Failed to load history

} + {uiState === 'loading' && ( +

+ Loading… +

+ )} + +
+ {editHistory.length > 0 && ( +
    + {editHistory.map((status) => { + const { createdAt } = status; + const createdAtDate = new Date(createdAt); + return ( +
  1. +

    + +

    + +
    2. + ); + })} +
+ )} +
); } diff --git a/src/pages/settings.jsx b/src/pages/settings.jsx index 90e5f4c7..acd1acca 100644 --- a/src/pages/settings.jsx +++ b/src/pages/settings.jsx @@ -24,186 +24,188 @@ function Settings({ onClose }) { return (
- {/* */} -

Accounts

-
    - {accounts.map((account, i) => { - const isCurrent = account.info.id === currentAccount; - const isDefault = i === (currentDefault || 0); - return ( -
  • -
    - {moreThanOneAccount && ( - - - - )} - - -
    -
    - {isDefault && moreThanOneAccount && ( - <> - Default{' '} - - )} - {!isCurrent && ( - - )} +

    Accounts

    +
      + {accounts.map((account, i) => { + const isCurrent = account.info.id === currentAccount; + const isDefault = i === (currentDefault || 0); + return ( +
    • - {!isDefault && moreThanOneAccount && ( + {moreThanOneAccount && ( + + + + )} + + +
      +
      + {isDefault && moreThanOneAccount && ( + <> + Default{' '} + + )} + {!isCurrent && ( )} - {isCurrent && ( - <> - {' '} +
      + {!isDefault && moreThanOneAccount && ( - - )} + )} + {isCurrent && ( + <> + {' '} + + + )} +
      -
    -
    • - ); - })} -
- {moreThanOneAccount && ( -

- - Note: Default account will always be used for first load. - Switched accounts will persist during the session. - + + ); + })} + + {moreThanOneAccount && ( +

+ + Note: Default account will always be used for first load. + Switched accounts will persist during the session. + +

+ )} +

+ + Add new account +

- )} -

- - Add new account - -

-

Theme

-
{ - console.log(e); - e.preventDefault(); - const formData = new FormData(themeFormRef.current); - const theme = formData.get('theme'); - const html = document.documentElement; +

Theme

+ { + console.log(e); + e.preventDefault(); + const formData = new FormData(themeFormRef.current); + const theme = formData.get('theme'); + const html = document.documentElement; - if (theme === 'auto') { - html.classList.remove('is-light', 'is-dark'); - } else { - html.classList.toggle('is-light', theme === 'light'); - html.classList.toggle('is-dark', theme === 'dark'); - } - document - .querySelector('meta[name="color-scheme"]') - .setAttribute('content', theme); + if (theme === 'auto') { + html.classList.remove('is-light', 'is-dark'); + } else { + html.classList.toggle('is-light', theme === 'light'); + html.classList.toggle('is-dark', theme === 'dark'); + } + document + .querySelector('meta[name="color-scheme"]') + .setAttribute('content', theme); - if (theme === 'auto') { - store.local.del('theme'); - } else { - store.local.set('theme', theme); - } - }} - > -
- - - -
-
-

About

-

- - Built - {' '} - by{' '} - - @cheeaun - - . -

- {__BUILD_TIME__ && ( + if (theme === 'auto') { + store.local.del('theme'); + } else { + store.local.set('theme', theme); + } + }} + > +
+ + + +
+ +

About

- Last build:{' '} - {' '} - {__COMMIT_HASH__ && ( - <> - ( - - {__COMMIT_HASH__} - - ) - - )} + + Built + {' '} + by{' '} + + @cheeaun + + .

- )} + {__BUILD_TIME__ && ( +

+ Last build:{' '} + {' '} + {__COMMIT_HASH__ && ( + <> + ( + + {__COMMIT_HASH__} + + ) + + )} +

+ )} +
); }