From a6196f923f4168c584afc73d8c4bb5f895f40c5d Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Thu, 29 Dec 2022 08:57:01 +0800 Subject: [PATCH 01/39] Better styles for card Show large card for large status, but only when there's no poll and media --- src/components/status.css | 16 ++++++++++++++-- src/components/status.jsx | 10 +++++++--- 2 files changed, 21 insertions(+), 5 deletions(-) diff --git a/src/components/status.css b/src/components/status.css index 0989ddcb..03f62c18 100644 --- a/src/components/status.css +++ b/src/components/status.css @@ -410,9 +410,14 @@ overflow: hidden; color: inherit; align-items: stretch; - background: var(--bg-color); + background-color: var(--bg-color); max-height: 160px; } +.status.large .card.link.large { + border-radius: 16px; + flex-direction: column; + max-height: none; +} .card .image { width: 35%; height: auto; @@ -421,6 +426,12 @@ object-fit: cover; aspect-ratio: 1 / 1; } +.status.large .card.link.large .image { + aspect-ratio: 1.91 / 1; + width: 100%; + max-height: 50vh; + border-inline-end: 0; +} .card:hover .image { animation: position-object 5s ease-in-out 1s 5; } @@ -471,7 +482,8 @@ a.card { transition: opacity 0.2s ease-in-out; } a.card:hover { - border: 1px solid var(--outline-hover-color); + border: 1px solid var(--link-color); + box-shadow: 0 0 0 2px var(--link-faded-color); } .card.video { max-width: 320px; diff --git a/src/components/status.jsx b/src/components/status.jsx index d9a4043f..037a51b3 100644 --- a/src/components/status.jsx +++ b/src/components/status.jsx @@ -436,7 +436,10 @@ function Status({ {!!card && (size === 'l' || (size === 'm' && !poll && !mediaAttachments.length)) && ( - + )} {size === 'l' && ( @@ -834,7 +837,7 @@ function Media({ media, showOriginal, onClick = () => {} }) { } } -function Card({ card }) { +function Card({ card, size }) { const { blurhash, title, @@ -858,6 +861,7 @@ function Card({ card }) { */ const hasText = title || providerName || authorName; + size = size === 'l' ? 'large' : ''; if (hasText && image) { const domain = new URL(url).hostname.replace(/^www\./, ''); @@ -866,7 +870,7 @@ function Card({ card }) { href={url} target="_blank" rel="nofollow noopener noreferrer" - class="card link" + class={`card link ${size}`} > Date: Thu, 29 Dec 2022 10:27:36 +0800 Subject: [PATCH 02/39] Temporarily disable this now --- src/pages/status.jsx | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/src/pages/status.jsx b/src/pages/status.jsx index 5a5d1b13..eb5773a2 100644 --- a/src/pages/status.jsx +++ b/src/pages/status.jsx @@ -81,15 +81,16 @@ function StatusPage({ id }) { let heroStatus = snapStates.statuses.get(id); if (hasStatus) { console.log('Hero status is cached'); - heroTimer = setTimeout(async () => { - try { - heroStatus = await heroFetch(); - states.statuses.set(id, heroStatus); - } catch (e) { - // Silent fail if status is cached - console.error(e); - } - }, 1000); + // NOTE: This might conflict if the user interacts with the status before the fetch is done, e.g. favouriting it + // heroTimer = setTimeout(async () => { + // try { + // heroStatus = await heroFetch(); + // states.statuses.set(id, heroStatus); + // } catch (e) { + // // Silent fail if status is cached + // console.error(e); + // } + // }, 1000); } else { try { heroStatus = await heroFetch(); From 808d56432e650248798be0fe74dc1d0759f84ef3 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Thu, 29 Dec 2022 10:45:47 +0800 Subject: [PATCH 03/39] Use sinceId for new checks --- src/app.jsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/app.jsx b/src/app.jsx index adf5578f..c2548ccb 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -121,11 +121,15 @@ function startVisibility() { // Buffer for WS reconnect (async () => { try { + const firstStatusID = states.home[0]?.id; + const firstNotificationID = states.notifications[0]?.id; const fetchHome = masto.v1.timelines.listHome({ limit: 1, + ...(firstStatusID && { sinceId: firstStatusID }), }); const fetchNotifications = masto.v1.notifications.list({ limit: 1, + ...(firstNotificationID && { sinceId: firstNotificationID }), }); const newStatuses = await fetchHome; From 160b535552c38d3da0182e5f2c35b5ce32d03982 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Thu, 29 Dec 2022 11:34:29 +0800 Subject: [PATCH 04/39] Not all cards work in large size Check the image aspect ratio before converting to large size --- src/components/status.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/status.jsx b/src/components/status.jsx index 037a51b3..c12889e7 100644 --- a/src/components/status.jsx +++ b/src/components/status.jsx @@ -861,7 +861,8 @@ function Card({ card, size }) { */ const hasText = title || providerName || authorName; - size = size === 'l' ? 'large' : ''; + const isLandscape = width / height >= 1.2; + size = size === 'l' && isLandscape ? 'large' : ''; if (hasText && image) { const domain = new URL(url).hostname.replace(/^www\./, ''); From bdcefb1ab0c495d71612ae57fc003b3bb3d067cf Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Thu, 29 Dec 2022 11:47:10 +0800 Subject: [PATCH 05/39] Add a nice pointer --- src/components/icon.jsx | 1 + src/pages/status.css | 4 ++++ src/pages/status.jsx | 13 +++++++++++++ 3 files changed, 18 insertions(+) diff --git a/src/components/icon.jsx b/src/components/icon.jsx index 5301fe18..d9ab5008 100644 --- a/src/components/icon.jsx +++ b/src/components/icon.jsx @@ -18,6 +18,7 @@ const ICONS = { 'arrow-left': 'mingcute:arrow-left-line', 'arrow-right': 'mingcute:arrow-right-line', 'arrow-up': 'mingcute:arrow-up-line', + 'arrow-down': 'mingcute:arrow-down-line', earth: 'mingcute:earth-line', lock: 'mingcute:lock-line', unlock: 'mingcute:unlock-line', diff --git a/src/pages/status.css b/src/pages/status.css index 74ae38e0..fe827489 100644 --- a/src/pages/status.css +++ b/src/pages/status.css @@ -24,6 +24,10 @@ display: inline-block; margin-bottom: 0.25em; } +.hero-heading .icon { + vertical-align: middle; + color: var(--text-insignificant-color); +} .hero-heading .insignificant { font-weight: normal; } diff --git a/src/pages/status.jsx b/src/pages/status.jsx index eb5773a2..43463036 100644 --- a/src/pages/status.jsx +++ b/src/pages/status.jsx @@ -268,6 +268,12 @@ function StatusPage({ id }) { const [heroInView, setHeroInView] = useState(true); const onView = useDebouncedCallback(setHeroInView, 100); + const heroPointer = useMemo(() => { + // get top offset of heroStatus + if (!heroStatusRef.current) return null; + const { top } = heroStatusRef.current.getBoundingClientRect(); + return top > 0 ? 'down' : 'up'; + }, [heroInView]); return (
@@ -300,6 +306,13 @@ function StatusPage({ id }) {

{!heroInView && heroStatus ? ( + {!!heroPointer && ( + <> + {' '} + + )} {' '} •{' '} From 5804ddbdb9a11f6073139366906a7a78821aaed7 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Thu, 29 Dec 2022 16:11:58 +0800 Subject: [PATCH 06/39] Add all the focuses --- src/app.css | 9 ++++----- src/components/account.jsx | 1 + src/components/compose.css | 16 ++++++++++------ src/components/name-text.css | 4 ++-- src/components/status.css | 18 +++++++++--------- src/components/status.jsx | 5 +++-- src/index.css | 23 +++++++---------------- src/pages/home.jsx | 7 ++++++- src/pages/notifications.css | 2 +- src/pages/notifications.jsx | 2 +- src/pages/settings.css | 2 +- src/pages/settings.jsx | 2 +- 12 files changed, 46 insertions(+), 45 deletions(-) diff --git a/src/app.css b/src/app.css index 7013621d..f18f4d5f 100644 --- a/src/app.css +++ b/src/app.css @@ -341,7 +341,7 @@ a.mention span { transition: background-color 0.2s ease-out; -webkit-tap-highlight-color: transparent; } -.status-link:hover { +.status-link:is(:hover, :focus) { background-color: var(--link-bg-hover-color); } @@ -393,7 +393,7 @@ a.mention span { .deck-close { color: var(--text-insignificant-color) !important; } -.deck-close:hover { +.deck-close:is(:hover, :focus) { color: var(--text-color) !important; } @@ -534,8 +534,7 @@ button.carousel-dot { font-weight: bold; backdrop-filter: none !important; } -button.carousel-dot:hover, -button.carousel-dot.active, +button.carousel-dot:is(:hover, :focus) button.carousel-dot.active, button.carousel-dot[disabled].active { color: var(--link-color) !important; } @@ -696,7 +695,7 @@ button.carousel-dot[disabled].active { color: var(--text-color) !important; border-radius: 0; } -.menu-container menu button:hover { +.menu-container menu button:is(:hover, :focus) { color: var(--bg-color) !important; background-color: var(--link-color); } diff --git a/src/components/account.jsx b/src/components/account.jsx index 123d2b6e..ecf54006 100644 --- a/src/components/account.jsx +++ b/src/components/account.jsx @@ -102,6 +102,7 @@ function Account({ account }) { return (
{!info || uiState === 'loading' ? ( diff --git a/src/components/compose.css b/src/components/compose.css index ac20ea4b..28930557 100644 --- a/src/components/compose.css +++ b/src/components/compose.css @@ -150,9 +150,6 @@ background-color: var(--bg-faded-color); opacity: 0.5; } -#compose-container .toolbar-button:has([disabled]) > * { - /* filter: opacity(0.5); */ -} #compose-container .toolbar-button:not(.show-field) :is(input[type='checkbox'], select, input[type='file']) { @@ -175,10 +172,17 @@ right: 0; left: auto !important; } -#compose-container .toolbar-button:not(:disabled):hover { +#compose-container + .toolbar-button:not(:disabled):is( + :hover, + :focus, + :focus-within, + :focus-visible + ) { cursor: pointer; filter: none; border-color: var(--divider-color); + outline: 0; } #compose-container .toolbar-button:not(:disabled):active { filter: brightness(0.8); @@ -231,7 +235,7 @@ width: 2.2em; height: 2.2em; } -#compose-container .text-expander-menu li:hover { +#compose-container .text-expander-menu li:is(:hover, :focus) { color: var(--bg-color); background-color: var(--link-color); } @@ -294,7 +298,7 @@ align-self: flex-start; color: var(--text-insignificant-color); } -#compose-container .media-aside .close-button:hover { +#compose-container .media-aside .close-button:is(:hover, :focus) { color: var(--text-color); } #compose-container .media-aside .uploaded { diff --git a/src/components/name-text.css b/src/components/name-text.css index e5d412ef..1db35970 100644 --- a/src/components/name-text.css +++ b/src/components/name-text.css @@ -3,8 +3,8 @@ text-decoration: none; display: inline-block; } -a.name-text:hover b, -a.name-text.short:hover i { +a.name-text:is(:hover, :focus) b, +a.name-text.short:is(:hover, :focus) i { text-decoration: underline; text-decoration-color: var(--text-insignificant-color); } diff --git a/src/components/status.css b/src/components/status.css index 03f62c18..6cf46bcc 100644 --- a/src/components/status.css +++ b/src/components/status.css @@ -122,7 +122,7 @@ margin-left: 4px; white-space: nowrap; } -.status > .container > .meta a.time:hover { +.status > .container > .meta a.time:is(:hover, :focus) { text-decoration: underline; } .status > .container > .meta .reply-to { @@ -319,7 +319,7 @@ background-color: var(--bg-faded-blur-color); } -.status .media:hover { +.status .media:is(:hover, :focus) { border-color: var(--outline-hover-color); } .status .media :is(img, video) { @@ -432,7 +432,7 @@ max-height: 50vh; border-inline-end: 0; } -.card:hover .image { +.card:is(:hover, :focus) .image { animation: position-object 5s ease-in-out 1s 5; } .card p { @@ -481,7 +481,7 @@ a.card { text-decoration: none; transition: opacity 0.2s ease-in-out; } -a.card:hover { +a.card:is(:hover, :focus) { border: 1px solid var(--link-color); box-shadow: 0 0 0 2px var(--link-faded-color); } @@ -562,10 +562,10 @@ a.card:hover { color: inherit; text-decoration: none; } -.status .extra-meta a:hover { +.status .extra-meta a:is(:hover, :focus) { text-decoration: underline; } -.status .extra-meta .edited:hover { +.status .extra-meta .edited:is(:hover, :focus) { cursor: pointer; color: var(--text-color); } @@ -601,11 +601,11 @@ a.card:hover { color: inherit; border: 1.5px solid transparent; } -.status .action > button.plain:hover { +.status .action > button.plain:is(:hover, :focus) { color: var(--link-color); background-color: var(--button-plain-bg-hover-color); } -.status .action > button.plain.reblog-button:hover { +.status .action > button.plain.reblog-button:is(:hover, :focus) { color: var(--reblog-color); } .status .action > button.plain.reblog-button.checked { @@ -630,7 +630,7 @@ a.card:hover { .status .action > button.plain.reblog-button.checked .icon { animation: reblogged 1s ease-in-out; } -.status .action > button.plain.favourite-button:hover { +.status .action > button.plain.favourite-button:is(:hover, :focus) { color: var(--favourite-color); } .status .action > button.plain.favourite-button.checked { diff --git a/src/components/status.jsx b/src/components/status.jsx index c12889e7..5215399a 100644 --- a/src/components/status.jsx +++ b/src/components/status.jsx @@ -209,6 +209,7 @@ function Status({ {size !== 's' && ( { @@ -1152,7 +1153,7 @@ function EditedAtModal({ statusID, onClose = () => {} }) { const currentYear = new Date().getFullYear(); return ( -
+
{/*
*/}

- {!heroInView && heroStatus ? ( + {!heroInView && heroStatus && uiState !== 'loading' ? ( {!!heroPointer && ( <> From a409ff67123514a8dc0dfea003cf32a1eee06562 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Fri, 30 Dec 2022 13:37:59 +0800 Subject: [PATCH 11/39] =?UTF-8?q?Some=20images=20are=20just=E2=80=A6=20too?= =?UTF-8?q?=20high?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/status.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/status.css b/src/components/status.css index 6cf46bcc..367e03ac 100644 --- a/src/components/status.css +++ b/src/components/status.css @@ -291,7 +291,8 @@ } .status.large :is(.media-container, .media-container.media-gt2) { height: auto; - max-height: 80vh; + min-height: 160px; + max-height: 50vh; } .status .media { border-radius: 8px; From 30c529fe0278b9e44187b1c1831c19272baeec4a Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Fri, 30 Dec 2022 13:55:46 +0800 Subject: [PATCH 12/39] No opacity for sheet animation Move things around a bit --- src/app.css | 12 +----------- src/index.css | 9 +++++++++ 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/src/app.css b/src/app.css index 9ddc02d0..424d6e45 100644 --- a/src/app.css +++ b/src/app.css @@ -592,16 +592,6 @@ button.carousel-dot[disabled].active { /* SHEET */ -@keyframes slide-up { - 0% { - transform: translateY(100%); - opacity: 0; - } - 100% { - transform: translateY(0); - opacity: 1; - } -} .sheet { align-self: flex-end; display: flex; @@ -614,7 +604,7 @@ button.carousel-dot[disabled].active { max-width: calc(40em - 50px - 16px); border-radius: 16px 16px 0 0; box-shadow: 0 -1px 32px var(--divider-color); - animation: slide-up 0.2s var(--timing-function); + animation: slide-up 0.3s var(--timing-function); border: 1px solid var(--outline-color); } .sheet header { diff --git a/src/index.css b/src/index.css index ea104ae4..91a4dd22 100644 --- a/src/index.css +++ b/src/index.css @@ -277,3 +277,12 @@ code { transform: translateY(0); } } + +@keyframes slide-up { + 0% { + transform: translateY(100%); + } + 100% { + transform: translateY(0); + } +} From 9201f7a1180caf3505e0597253471d355e06e267 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Fri, 30 Dec 2022 20:37:57 +0800 Subject: [PATCH 13/39] First step in making things focusable --- src/app.jsx | 27 ++++++++++++++++++++++++--- src/components/account.jsx | 3 +-- src/components/modal.jsx | 14 +++++++++++++- src/components/status.jsx | 11 +++++++++-- src/index.css | 4 ++++ src/pages/home.jsx | 1 + src/pages/notifications.jsx | 7 ++++++- src/pages/status.jsx | 4 ++++ 8 files changed, 62 insertions(+), 9 deletions(-) diff --git a/src/app.jsx b/src/app.jsx index c2548ccb..5bf428de 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -298,6 +298,26 @@ export function App() { }, []); const [currentDeck, setCurrentDeck] = useState('home'); + const focusDeck = () => { + let timer = setTimeout(() => { + const page = document.getElementById(`${currentDeck}-page`); + console.log('focus', currentDeck, page); + if (page) { + page.focus(); + } + }, 100); + return () => clearTimeout(timer); + }; + useEffect(focusDeck, [currentDeck]); + useEffect(() => { + if ( + !snapStates.showCompose && + !snapStates.showSettings && + !snapStates.showAccount + ) { + focusDeck(); + } + }, [snapStates.showCompose, snapStates.showSettings, snapStates.showAccount]); useEffect(() => { // HACK: prevent this from running again due to HMR @@ -324,7 +344,7 @@ export function App() { return ( <> - {isLoggedIn && currentDeck && ( + {isLoggedIn && ( <>

)} + {uiState === 'error' && + isHero && + !!heroStatus?.repliesCount && + !hasDescendants && ( +
+ Unable to load replies. +
+ +
+ )} ); })} From 951c93a070ad2b8601f5856b7e5a7237be9dd1d9 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sun, 1 Jan 2023 12:28:54 +0800 Subject: [PATCH 31/39] Add link to media in carousel modal --- src/app.css | 4 ++-- src/components/status.jsx | 27 ++++++++++++++++++++------- 2 files changed, 22 insertions(+), 9 deletions(-) diff --git a/src/app.css b/src/app.css index f75d8ec2..8fb5f969 100644 --- a/src/app.css +++ b/src/app.css @@ -525,12 +525,12 @@ a.mention span { opacity: 0; } -button.carousel-button, +:is(.button, button).carousel-button, button.carousel-dot { pointer-events: auto; font-weight: bold; } -button.carousel-button[hidden] { +:is(.button, button).carousel-button[hidden] { display: inline-block; opacity: 0; pointer-events: none; diff --git a/src/components/status.jsx b/src/components/status.jsx index 4673cb84..5f8df8af 100644 --- a/src/components/status.jsx +++ b/src/components/status.jsx @@ -1348,13 +1348,26 @@ function Carousel({ mediaAttachments, index = 0, onClose = () => {} }) {
{mediaAttachments?.length > 1 && ( -
    - {statuses.slice(0, limit).map((status) => { - const { - id: statusID, - ancestor, - descendant, - thread, - replies, - } = status; - const isHero = statusID === id; - return ( -
  • - {isHero ? ( - - - - ) : ( - + + ) : ( + { - userInitiated.current = true; - }} - > - - {replies?.length > LIMIT && ( -
    - {' '} - - {shortenNumber(replies.length)} - -
    - )} - - )} - {descendant && - replies?.length > 0 && - replies?.length <= LIMIT && ( - { + href={`#/s/${statusID}`} + onClick={() => { userInitiated.current = true; }} - /> + > + + {replies?.length > LIMIT && ( +
    + {' '} + + {shortenNumber(replies.length)} + +
    + )} + )} - {uiState === 'loading' && - isHero && - !!heroStatus?.repliesCount && - !hasDescendants && ( -
    - -
    - )} - {uiState === 'error' && - isHero && - !!heroStatus?.repliesCount && - !hasDescendants && ( -
    - Unable to load replies. -
    - -
    - )} + /> + )} + {uiState === 'loading' && + isHero && + !!heroStatus?.repliesCount && + !hasDescendants && ( +
    + +
    + )} + {uiState === 'error' && + isHero && + !!heroStatus?.repliesCount && + !hasDescendants && ( +
    + Unable to load replies. +
    + +
    + )} +
    • + ); + })} + {showMore > 0 && ( +
  • +
    • - ); - })} - {showMore > 0 && ( -
  • - -
    • - )} -
+ )} + + ) : ( + <> + {uiState === 'loading' && ( +
    +
  • + +
    • +
+ )} + {uiState === 'error' && ( +

+ Unable to load status +
+
+ +

+ )} + + )}

); From cf1c03f55fea05d88ba99c4521ce94f71cebfcc4 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sun, 1 Jan 2023 15:32:36 +0800 Subject: [PATCH 33/39] Delay focus compose field a little --- src/components/compose.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/compose.jsx b/src/components/compose.jsx index 7d043a1e..e2c408ba 100644 --- a/src/components/compose.jsx +++ b/src/components/compose.jsx @@ -131,8 +131,9 @@ function Compose({ }; const focusTextarea = () => { setTimeout(() => { + console.log('focusing'); textareaRef.current?.focus(); - }, 100); + }, 300); }; useEffect(() => { From 811de6ec0a37775a21c406c496d9bf21f36c9d94 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sun, 1 Jan 2023 16:01:44 +0800 Subject: [PATCH 34/39] Remove that one tiny white space at the bottom of the avatar image --- src/components/avatar.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/avatar.css b/src/components/avatar.css index 72859e51..411407a6 100644 --- a/src/components/avatar.css +++ b/src/components/avatar.css @@ -7,6 +7,7 @@ background-color: var(--bg-faded-color); box-shadow: 0 0 0 1px var(--bg-blur-color); flex-shrink: 0; + vertical-align: middle; } .avatar img { From c116de84564ee0b78048b2db7a353fd8663cec09 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sun, 1 Jan 2023 16:01:57 +0800 Subject: [PATCH 35/39] Don't show card when status is truncated --- src/components/status.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/status.css b/src/components/status.css index 979ff579..f7b649c2 100644 --- a/src/components/status.css +++ b/src/components/status.css @@ -251,6 +251,9 @@ color: var(--link-color); transform: translateX(-50%) translateY(-2px) scale(1.01); } +.timeline-deck .status .content.truncated ~ .card { + display: none; +} .status .content p { margin-block: 0.75em; } From 6306ed9602e7c9cff773fb1a96df40360b9d30ac Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sun, 1 Jan 2023 16:02:15 +0800 Subject: [PATCH 36/39] Move updates button further down --- src/app.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app.css b/src/app.css index 8fb5f969..0e728f2f 100644 --- a/src/app.css +++ b/src/app.css @@ -430,7 +430,7 @@ a.mention span { opacity: 0; } 100% { - transform: translate(-50%, 0); + transform: translate(-50%, 150%); opacity: 1; } } @@ -438,7 +438,7 @@ a.mention span { position: absolute; animation: fade-from-top 2s ease-out; left: 50%; - transform: translate(-50%, 0); + transform: translate(-50%, 150%); font-size: 90%; background: linear-gradient( to bottom, From 4d7aeca10fc4b5654f16c62a43653f60f24af7f4 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sun, 1 Jan 2023 16:09:10 +0800 Subject: [PATCH 37/39] Make skeleton unpointerable --- src/components/status.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/status.css b/src/components/status.css index f7b649c2..ae65237a 100644 --- a/src/components/status.css +++ b/src/components/status.css @@ -81,6 +81,8 @@ } .status.skeleton { color: var(--outline-color); + user-select: none; + pointer-events: none; } .status.skeleton > .avatar { @@ -206,9 +208,6 @@ opacity: 1; } -.status .content { - margin-top: 2px; -} .timeline-deck .status .content { max-height: 50vh; max-height: 50dvh; From b62cff4d0e2f4fd0e8b3353731bfaf2c7f4dbc8f Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sun, 1 Jan 2023 17:19:07 +0800 Subject: [PATCH 38/39] Different gradient for welcome --- src/pages/welcome.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/pages/welcome.css b/src/pages/welcome.css index 1a341973..88547a07 100644 --- a/src/pages/welcome.css +++ b/src/pages/welcome.css @@ -23,7 +23,12 @@ margin: 16px 0; padding: 0; /* gradiented text */ - background: linear-gradient(45deg, var(--purple-color), var(--red-color)); + background: linear-gradient( + 45deg, + var(--blue-color) 30%, + var(--purple-color), + var(--red-color) 70% + ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } From 0517690ed39244268e00d2abc1eb1bae97bc8b7e Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sun, 1 Jan 2023 17:19:20 +0800 Subject: [PATCH 39/39] Spruce up the compose button --- src/app.css | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/src/app.css b/src/app.css index 0e728f2f..ebb37d1e 100644 --- a/src/app.css +++ b/src/app.css @@ -595,10 +595,23 @@ button.carousel-dot[disabled].active { right: 16px; right: max(16px, env(safe-area-inset-right)); padding: 16px; - box-shadow: 0 0 32px var(--bg-color); + background-color: var(--button-bg-blur-color); + backdrop-filter: blur(16px); z-index: 1; - border: 1px solid var(--bg-color); - opacity: 0.75; + box-shadow: 0 3px 8px -1px var(--bg-faded-blur-color), + 0 10px 36px -4px var(--button-bg-blur-color); + transition: background-color 0.2s ease-in-out; +} +#compose-button:is(:hover, :focus) { + background-color: var(--button-bg-color); + filter: none; +} +#compose-button:active { + filter: brightness(0.75); + transform: translateY(1px); +} +#compose-button .icon { + filter: drop-shadow(0 1px 2px var(--button-bg-color)); } /* SHEET */