diff --git a/routes/_components/Status.html b/routes/_components/Status.html index f86fc490..0a7a6e6a 100644 --- a/routes/_components/Status.html +++ b/routes/_components/Status.html @@ -38,26 +38,28 @@ {{/if}} {{#if originalMediaAttachments && originalMediaAttachments.length}} {{#if status.sensitive}} - - {{#if !sensitiveShown}} + + + {{#if !sensitiveShown}} Sensitive content. Click to show. - {{/if}} - - - - - + {{/if}} + + + + + + {{#if sensitiveShown}} {{/if}} - + {{else}} {{/if}} @@ -81,7 +83,19 @@ ".............. status-toolbar"; grid-template-columns: 58px 1fr; border-bottom: 1px solid var(--main-border); - /* will-change: transform; */ /* TODO: is this necessary? */ + } + + @media (max-width: 767px) { + .status-article { + grid-template-areas: + ".............. status-boosted" + "status-sidebar status-author" + "status-sidebar status-spoiler" + "status-sidebar status-spoiler-button" + "status-sidebar status-content" + "status-media status-media" + "status-toolbar status-toolbar"; + } } :global(.status-sidebar) { @@ -192,24 +206,39 @@ height: 18px; } - .status-sensitive-media-button { + .status-sensitive-media-container { grid-area: status-media; margin: 10px 0; - padding: 0; position: relative; border-radius: 0; border: none; background: none; - fill: var(--mask-svg-fill); } - .status-sensitive-media-button.status-sensitive-media-hidden { + .status-sensitive-media-button { + margin: 0; + padding: 0; + border: none; + background: none; + width: 100%; + height: 100%; + } + + .status-sensitive-media-shown .status-sensitive-media-button { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + } + + .status-sensitive-media-container.status-sensitive-media-hidden { width: 100%; margin: 10px auto; height: 200px; } - .status-sensitive-media-button .status-sensitive-media-warning { + .status-sensitive-media-container .status-sensitive-media-warning { position: absolute; top: 0; left: 0; @@ -222,7 +251,7 @@ z-index: 60; } - .status-sensitive-media-button .svg-wrapper { + .status-sensitive-media-container .svg-wrapper { position: absolute; top: 0; left: 0; @@ -235,10 +264,10 @@ pointer-events: none; background: var(--mask-bg); } - .status-sensitive-media-button.status-sensitive-media-shown .svg-wrapper { + .status-sensitive-media-container.status-sensitive-media-shown .svg-wrapper { background: none; } - .status-sensitive-media-button svg { + .status-sensitive-media-container svg { width: 24px; height: 24px; fill: var(--mask-svg-fill); @@ -247,7 +276,7 @@ margin: 1px; padding: 6px 10px; } - .status-sensitive-media-button.status-sensitive-media-hidden svg { + .status-sensitive-media-container.status-sensitive-media-hidden svg { fill: var(--deemphasized-text-color); background: var(--mask-opaque-bg); } diff --git a/routes/_components/VirtualListItem.html b/routes/_components/VirtualListItem.html index 52637971..4ae2ec19 100644 --- a/routes/_components/VirtualListItem.html +++ b/routes/_components/VirtualListItem.html @@ -11,7 +11,6 @@ top: 0; opacity: 0; pointer-events: none; - /* will-change: transform; */ /* causes jank in mobile Firefox */ } .virtual-list-item.shown { opacity: 1; diff --git a/scss/global.scss b/scss/global.scss index f831fed1..fcf0fe15 100644 --- a/scss/global.scss +++ b/scss/global.scss @@ -21,7 +21,6 @@ body { left: 0; right: 0; bottom: 0; - will-change: transform; /* avoids "repaint on scroll" in Chrome */ } main { diff --git a/templates/2xx.html b/templates/2xx.html index 123a0386..6d4abc7d 100644 --- a/templates/2xx.html +++ b/templates/2xx.html @@ -11,7 +11,7 @@