From e57bf3518dc35c156e05a47cb43589278d3559b5 Mon Sep 17 00:00:00 2001 From: Alexander Zinchuk Date: Fri, 5 Aug 2022 19:23:09 +0200 Subject: [PATCH] Various fixes for Waterfox Classic (#1974) --- src/components/common/helpers/renderText.tsx | 2 +- src/components/main/Main.scss | 6 ++++ .../premium/PremiumFeatureModal.module.scss | 15 ++++++++-- .../PremiumFeaturePreviewVideo.module.scss | 21 ++++++++++---- src/components/mediaViewer/MediaViewer.scss | 29 +++++++++++++++++++ .../middle/FloatingActionButtons.module.scss | 12 ++++++++ src/components/middle/MessageList.scss | 5 ++++ .../middle/MessageSelectToolbar.scss | 5 ++++ src/components/middle/MiddleColumn.scss | 12 +++++++- src/components/middle/MiddleHeader.scss | 17 +++++++++++ src/components/middle/MobileSearch.scss | 17 +++++++++++ src/components/middle/composer/Composer.scss | 5 ++++ .../middle/composer/SymbolMenu.scss | 23 +++++++++++++-- src/components/middle/message/Game.scss | 5 ++++ src/components/right/RightColumn.scss | 5 ++++ 15 files changed, 168 insertions(+), 11 deletions(-) diff --git a/src/components/common/helpers/renderText.tsx b/src/components/common/helpers/renderText.tsx index 6c002a26f..8d3f4e780 100644 --- a/src/components/common/helpers/renderText.tsx +++ b/src/components/common/helpers/renderText.tsx @@ -131,7 +131,7 @@ function replaceEmojis(textParts: TextPart[], size: 'big' | 'small', type: 'jsx' emojiResult.push( // For preventing extra spaces in html // eslint-disable-next-line max-len - `${emoji}`, + `${emoji}`, ); } diff --git a/src/components/main/Main.scss b/src/components/main/Main.scss index 27ba295b3..a4fbdf060 100644 --- a/src/components/main/Main.scss +++ b/src/components/main/Main.scss @@ -118,6 +118,12 @@ transform: translate3d(-20vw, 0, 0); left: env(safe-area-inset-left) !important; width: calc(100vw - env(safe-area-inset-left)) !important; + + // Target: Old Firefox (Waterfox Classic) + @supports not (left: env(safe-area-inset-left)) { + left: 0 !important; + width: 100vw !important; + } } } diff --git a/src/components/main/premium/PremiumFeatureModal.module.scss b/src/components/main/premium/PremiumFeatureModal.module.scss index 54ddf4198..40b70af58 100644 --- a/src/components/main/premium/PremiumFeatureModal.module.scss +++ b/src/components/main/premium/PremiumFeatureModal.module.scss @@ -39,8 +39,14 @@ } .frame { - aspect-ratio: 1/1; + aspect-ratio: 1; + + @supports not (aspect-ratio: 1) { + height: 0; + padding-bottom: 100%; + } } + .slide { width: 100%; flex: none; @@ -83,10 +89,15 @@ margin: 0 -1rem; margin-top: -1rem; background: var(--premium-feature-background); - aspect-ratio: 1/1; + aspect-ratio: 1; width: 100%; border-top-right-radius: var(--border-radius-default); border-top-left-radius: var(--border-radius-default); + + @supports not (aspect-ratio: 1) { + height: 0; + padding-bottom: 100%; + } } .title { diff --git a/src/components/main/premium/previews/PremiumFeaturePreviewVideo.module.scss b/src/components/main/premium/previews/PremiumFeaturePreviewVideo.module.scss index 66732fba5..cd7dff089 100644 --- a/src/components/main/premium/previews/PremiumFeaturePreviewVideo.module.scss +++ b/src/components/main/premium/previews/PremiumFeaturePreviewVideo.module.scss @@ -1,9 +1,14 @@ .root { -display: flex; + display: flex; justify-content: center; aspect-ratio: 1; overflow: hidden; position: relative; + + @supports not (aspect-ratio: 1) { + height: 0; + padding-bottom: 100%; + } } .wrapper { @@ -26,6 +31,10 @@ display: flex; ) rotateY(calc(var(--scroll-progress-converted) * 40deg)); opacity: calc(1 - var(--abs-scroll-progress-converted) * 0.4); + + @supports not (aspect-ratio: 1) { + transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.005, 0, -342.2, 0, 1) + } } .down { @@ -54,8 +63,10 @@ display: flex; border-radius: 0 0 10% 10%; } -.down .video { - top: 0; - bottom: initial; - border-radius: 10% 10% 0 0; +@supports (aspect-ratio: 1) { + .down .video { + top: 0; + bottom: initial; + border-radius: 10% 10% 0 0; + } } diff --git a/src/components/mediaViewer/MediaViewer.scss b/src/components/mediaViewer/MediaViewer.scss index 8e9418890..31342b533 100644 --- a/src/components/mediaViewer/MediaViewer.scss +++ b/src/components/mediaViewer/MediaViewer.scss @@ -88,6 +88,15 @@ margin-right: 1.5rem; } } + + // Target: Old Firefox (Waterfox Classic) + @supports not (padding: 0.5rem max(1.25rem, env(safe-area-inset-left))) { + padding: 0.5rem 1.25rem; + + @media (max-width: 600px) { + padding: 0.5rem; + } + } } & > .Transition, @@ -144,6 +153,16 @@ right: env(safe-area-inset-right); transform: scaleX(-1); } + + // Target: Old Firefox (Waterfox Classic) + @supports not (left: env(safe-area-inset-left)) { + left: 0; + + &[dir="rtl"] { + left: auto; + right: 0; + } + } } &.next { @@ -156,6 +175,16 @@ left: env(safe-area-inset-left); transform: scaleX(-1); } + + // Target: Old Firefox (Waterfox Classic) + @supports not (right: env(safe-area-inset-right)) { + right: 0; + + &[dir="rtl"] { + right: auto; + left: 0; + } + } } &.inline { diff --git a/src/components/middle/FloatingActionButtons.module.scss b/src/components/middle/FloatingActionButtons.module.scss index 3d42bc6ff..675e2cb84 100644 --- a/src/components/middle/FloatingActionButtons.module.scss +++ b/src/components/middle/FloatingActionButtons.module.scss @@ -29,6 +29,18 @@ } } + // Target: Old Firefox (Waterfox Classic) + @supports not (right: max(1rem, env(safe-area-inset-right))) { + right: 1rem; + @media (max-width: 600px) { + right: 0.5rem; + + :global(body:not(.keyboard-visible)) & { + bottom: 4.5rem; + } + } + } + &.revealed { transform: translateY(0); opacity: 1; diff --git a/src/components/middle/MessageList.scss b/src/components/middle/MessageList.scss index ff3d15cf3..15625b7db 100644 --- a/src/components/middle/MessageList.scss +++ b/src/components/middle/MessageList.scss @@ -37,6 +37,11 @@ position: relative; bottom: calc(0px - env(safe-area-inset-bottom)); + // Target: Old Firefox (Waterfox Classic) + @supports not (bottom: calc(0px - env(safe-area-inset-bottom))) { + bottom: 0; + } + body.keyboard-visible.animation-level-0 & { transition: none !important; } diff --git a/src/components/middle/MessageSelectToolbar.scss b/src/components/middle/MessageSelectToolbar.scss index 271f04313..2130dcc9a 100644 --- a/src/components/middle/MessageSelectToolbar.scss +++ b/src/components/middle/MessageSelectToolbar.scss @@ -8,6 +8,11 @@ justify-content: center; margin: 0; + // Target: Old Firefox (Waterfox Classic) + @supports not (bottom: calc(0.5rem + env(safe-area-inset-bottom))) { + bottom: 0.5rem; + } + .mask-image-disabled &::before { left: auto !important; right: auto !important; diff --git a/src/components/middle/MiddleColumn.scss b/src/components/middle/MiddleColumn.scss index a596abbc9..7618f0c46 100644 --- a/src/components/middle/MiddleColumn.scss +++ b/src/components/middle/MiddleColumn.scss @@ -189,6 +189,11 @@ body.keyboard-visible & { top: env(safe-area-inset-bottom); } + + // Target: Old Firefox (Waterfox Classic) + @supports not (padding-bottom: env(safe-area-inset-bottom)) { + padding-bottom: 0; + } } &::before { @@ -316,7 +321,12 @@ } @media (max-width: 600px) { - padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); + padding-bottom: 0.75rem; + + // Target: Old Firefox (Waterfox Classic) + @supports (padding-bottom: calc(0.75rem + env(safe-area-inset-bottom))) { + padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); + } } .mask-image-disabled &::before { diff --git a/src/components/middle/MiddleHeader.scss b/src/components/middle/MiddleHeader.scss index 3cec246f8..cc75fedbb 100644 --- a/src/components/middle/MiddleHeader.scss +++ b/src/components/middle/MiddleHeader.scss @@ -18,6 +18,12 @@ padding-right: max(0.5rem, env(safe-area-inset-right)); background: var(--color-background); + // Target: Old Firefox (Waterfox Classic) + @supports not (padding-left: max(0.75rem, env(safe-area-inset-left))) { + padding-left: 0.75rem; + padding-right: 0.5rem; + } + &::before { content: ""; display: block; @@ -94,6 +100,17 @@ padding-right: max(0.5rem, env(safe-area-inset-right)); } + // Target: Old Firefox (Waterfox Classic) + @supports not (padding-left: max(1.5rem, env(safe-area-inset-left))) { + padding-left: 1.5rem; + padding-right: 0.8125rem; + + @media (max-width: 600px) { + padding-left: 0.5rem; + padding-right: 0.5rem; + } + } + .Transition { width: 100%; // https://dfmcphee.com/flex-items-and-min-width-0/ diff --git a/src/components/middle/MobileSearch.scss b/src/components/middle/MobileSearch.scss index cb4658a1d..bf96ea1c0 100644 --- a/src/components/middle/MobileSearch.scss +++ b/src/components/middle/MobileSearch.scss @@ -15,6 +15,12 @@ margin-left: 0.25rem; flex: 1; } + + // Target: Old Firefox (Waterfox Classic) + @supports not (padding-left: max(0.25rem, env(safe-area-inset-left))) { + padding-left: 0.25rem; + padding-right: 0.5rem; + } } #MobileSearch > .footer { @@ -35,6 +41,17 @@ height: calc(3.5rem + env(safe-area-inset-bottom)); } + // Target: Old Firefox (Waterfox Classic) + @supports not (padding-left: max(1rem, env(safe-area-inset-left))) { + padding-left: 1rem; + padding-right: 0.5rem; + + body:not(.keyboard-visible) & { + padding-bottom: 0; + height: 3.5rem; + } + } + > .counter { flex: 1; color: var(--color-text-secondary); diff --git a/src/components/middle/composer/Composer.scss b/src/components/middle/composer/Composer.scss index 5e1badb42..dbf0e4f8e 100644 --- a/src/components/middle/composer/Composer.scss +++ b/src/components/middle/composer/Composer.scss @@ -8,6 +8,11 @@ padding-right: 2rem; bottom: env(safe-area-inset-bottom); + // Target: Old Firefox (Waterfox Classic) + @supports not (bottom: env(safe-area-inset-bottom)) { + bottom: 0; + } + @media (max-width: 600px) { padding-right: 1rem; } diff --git a/src/components/middle/composer/SymbolMenu.scss b/src/components/middle/composer/SymbolMenu.scss index ce91c14fe..750dd0e8e 100644 --- a/src/components/middle/composer/SymbolMenu.scss +++ b/src/components/middle/composer/SymbolMenu.scss @@ -27,6 +27,14 @@ } } + // Target: Old Firefox (Waterfox Classic) + @supports not (padding-right: env(safe-area-inset-right)) { + padding-right: 0; + padding-bottom: 0; + padding-left: 0; + transform: translate3d(0, calc(var(--symbol-menu-height) + var(--symbol-menu-footer-height)), 0); + } + body.animation-level-0 & { transition: none; } @@ -39,6 +47,11 @@ &-main { height: var(--symbol-menu-height); max-height: calc(100vh - var(--symbol-menu-footer-height) - env(safe-area-inset-bottom)); + + // Target: Old Firefox (Waterfox Classic) + @supports not (max-height: calc(100vh - var(--symbol-menu-footer-height) - env(safe-area-inset-bottom))) { + max-height: calc(100vh - var(--symbol-menu-footer-height)); + } } &-footer { @@ -133,8 +146,14 @@ .symbol-close-button { display: none; position: absolute; - right: max(calc(0.25rem), env(safe-area-inset-right)); - top: max(calc(0.25rem), env(safe-area-inset-top)); + right: max(0.25rem, env(safe-area-inset-right)); + top: max(0.25rem, env(safe-area-inset-top)); + + // Target: Old Firefox (Waterfox Classic) + @supports not (right: max(0.25rem, env(safe-area-inset-right))) { + right: 0.25rem; + top: 0.25rem; + } } @media (orientation: landscape) { diff --git a/src/components/middle/message/Game.scss b/src/components/middle/message/Game.scss index b7a7de78c..fbe626cae 100644 --- a/src/components/middle/message/Game.scss +++ b/src/components/middle/message/Game.scss @@ -30,5 +30,10 @@ .skeleton { aspect-ratio: 16/9; + + @supports not (aspect-ratio: 16/9) { + height: 0 !important; + padding-bottom: 56.25%; + } } } diff --git a/src/components/right/RightColumn.scss b/src/components/right/RightColumn.scss index 6c047ba39..11736c284 100644 --- a/src/components/right/RightColumn.scss +++ b/src/components/right/RightColumn.scss @@ -12,6 +12,11 @@ transition: transform var(--layer-transition); + // Target: Old Firefox (Waterfox Classic) + @supports not (padding-right: env(safe-area-inset-right)) { + padding-right: 0; + } + body.animation-level-0 & { transition: none; }