From 79e3dab206f81ce16736f501bfc6598d161ffd10 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Thu, 23 Jan 2025 16:08:29 +0200 Subject: [PATCH 1/4] fix(App): global width / height issues --- src/components/MainNavBars/MainNavBars.less | 10 +++++----- src/routes/Addons/styles.less | 2 +- src/routes/Board/styles.less | 2 +- src/routes/Calendar/Calendar.less | 2 +- src/routes/Discover/styles.less | 2 +- src/routes/Library/styles.less | 2 +- src/routes/Settings/styles.less | 2 +- 7 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/components/MainNavBars/MainNavBars.less b/src/components/MainNavBars/MainNavBars.less index 2ee57b505..224b34f40 100644 --- a/src/components/MainNavBars/MainNavBars.less +++ b/src/components/MainNavBars/MainNavBars.less @@ -6,9 +6,9 @@ position: relative; z-index: 0; overflow: clip; - margin-left: env(safe-area-inset-left, 0px); - margin-right: env(safe-area-inset-right, 0px); - width: calc(100% - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); + margin-left: var(--safe-area-inset-left); + margin-right: var(--safe-area-inset-right); + width: calc(100% - var(--safe-area-inset-left) - var(--safe-area-inset-right)); height: 100%; .horizontal-nav-bar { @@ -22,14 +22,14 @@ .vertical-nav-bar { position: absolute; top: var(--horizontal-nav-bar-size); - bottom: var(--calculated-bottom-safe-inset); + bottom: 0; left: 0; z-index: 1; } .nav-content-container { position: absolute; - padding-top: calc(var(--horizontal-nav-bar-size) + env(safe-area-inset-top, 0px)); + padding-top: var(--horizontal-nav-bar-size); top: 0; right: 0; bottom: 0; diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less index 37152eb8f..0e3c998e1 100644 --- a/src/routes/Addons/styles.less +++ b/src/routes/Addons/styles.less @@ -22,7 +22,7 @@ } .addons-container { - height: 100%; + height: calc(100% - var(--calculated-bottom-safe-inset)); background-color: transparent; .addons-content { diff --git a/src/routes/Board/styles.less b/src/routes/Board/styles.less index 616398b27..edd34554b 100644 --- a/src/routes/Board/styles.less +++ b/src/routes/Board/styles.less @@ -13,7 +13,7 @@ .board-container { width: 100%; - height: 100%; + height: calc(100% - var(--calculated-bottom-safe-inset)); display: flex; flex-direction: column; diff --git a/src/routes/Calendar/Calendar.less b/src/routes/Calendar/Calendar.less index b606fa2aa..b3f03454f 100644 --- a/src/routes/Calendar/Calendar.less +++ b/src/routes/Calendar/Calendar.less @@ -4,7 +4,7 @@ .calendar { width: 100%; - height: 100%; + height: calc(100% - var(--calculated-bottom-safe-inset)); background-color: transparent; .content { diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less index 05f03baf0..b435f3e35 100644 --- a/src/routes/Discover/styles.less +++ b/src/routes/Discover/styles.less @@ -17,7 +17,7 @@ } .discover-container { - height: 100%; + height: calc(100% - var(--calculated-bottom-safe-inset)); background-color: transparent; .discover-content { diff --git a/src/routes/Library/styles.less b/src/routes/Library/styles.less index 6719932e1..e2bd4ad3e 100644 --- a/src/routes/Library/styles.less +++ b/src/routes/Library/styles.less @@ -13,7 +13,7 @@ } .library-container { - height: 100%; + height: calc(100% - var(--calculated-bottom-safe-inset)); background-color: transparent; .library-content { diff --git a/src/routes/Settings/styles.less b/src/routes/Settings/styles.less index 7cdd0b7d4..02d6e437e 100644 --- a/src/routes/Settings/styles.less +++ b/src/routes/Settings/styles.less @@ -13,7 +13,7 @@ } .settings-container { - height: 100%; + height: calc(100% - var(--calculated-bottom-safe-inset)); width: 100%; background-color: transparent; From 6ae9d1c9d419c3b927f44cc758a20a8b05554328 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Thu, 23 Jan 2025 16:20:03 +0200 Subject: [PATCH 2/4] fix(Calendar): PWA landscape mode --- src/routes/Calendar/Calendar.less | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/routes/Calendar/Calendar.less b/src/routes/Calendar/Calendar.less index b3f03454f..4763353f1 100644 --- a/src/routes/Calendar/Calendar.less +++ b/src/routes/Calendar/Calendar.less @@ -3,8 +3,7 @@ @import (reference) '~stremio/common/screen-sizes.less'; .calendar { - width: 100%; - height: calc(100% - var(--calculated-bottom-safe-inset)); + height: calc(100% - var(--safe-area-inset-bottom)); background-color: transparent; .content { From f49f29094f740a6dabe77e140702b90a9191551e Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Thu, 23 Jan 2025 16:20:26 +0200 Subject: [PATCH 3/4] fix(App): iphone PWA issues --- src/App/styles.less | 11 +++++++---- src/components/BottomSheet/BottomSheet.less | 2 +- src/routes/Addons/styles.less | 2 +- src/routes/Board/styles.less | 4 ++-- src/routes/Discover/styles.less | 2 +- src/routes/Library/styles.less | 2 +- src/routes/MetaDetails/styles.less | 2 +- src/routes/Settings/styles.less | 2 +- 8 files changed, 15 insertions(+), 12 deletions(-) diff --git a/src/App/styles.less b/src/App/styles.less index 0572ee3d1..a413ed163 100644 --- a/src/App/styles.less +++ b/src/App/styles.less @@ -23,8 +23,8 @@ // HTML sizes @html-width: ~"calc(max(var(--small-viewport-width), var(--dynamic-viewport-width)))"; @html-height: ~"calc(max(var(--small-viewport-height), var(--dynamic-viewport-height)))"; -@html-standalone-width: ~"calc(max(100%, var(--large-viewport-width)))"; -@html-standalone-height: ~"calc(max(100%, var(--large-viewport-height)))"; +@html-standalone-width: ~"calc(max(100%, var(--small-viewport-width)))"; +@html-standalone-height: ~"calc(max(100%, var(--small-viewport-height)))"; // Safe area insets @safe-area-inset-top: env(safe-area-inset-top, 0rem); @@ -64,7 +64,6 @@ --modal-background-color: rgba(15, 13, 32, 1); --outer-glow: 0px 0px 15px rgba(123, 91, 245, 0.37); --border-radius: 0.75rem; - --calculated-bottom-safe-inset: @calculated-bottom-safe-inset; --top-overlay-size: @top-overlay-size; --bottom-overlay-size: @bottom-overlay-size; --overlap-size: @overlap-size; @@ -99,6 +98,10 @@ @supports (height: 100lvh) and (height: 100svh) { --viewport-height-diff: calc(100lvh - 100svh); } + + @media (display-mode: standalone) { + --safe-area-inset-bottom: @calculated-bottom-safe-inset; + } } * { @@ -174,7 +177,7 @@ html { position: absolute; top: calc(1.2 * var(--horizontal-nav-bar-size) + var(--safe-area-inset-top)); right: var(--safe-area-inset-right); - bottom: calc(1.2 * var(--horizontal-nav-bar-size) + var(--calculated-bottom-safe-inset, 0rem)); + bottom: calc(1.2 * var(--horizontal-nav-bar-size) + var(--safe-area-inset-bottom, 0rem)); left: auto; z-index: 1; padding: 0 calc(0.5 * var(--horizontal-nav-bar-size)); diff --git a/src/components/BottomSheet/BottomSheet.less b/src/components/BottomSheet/BottomSheet.less index 6428e5081..f7e3315e1 100644 --- a/src/components/BottomSheet/BottomSheet.less +++ b/src/components/BottomSheet/BottomSheet.less @@ -101,7 +101,7 @@ @media only screen and (orientation: landscape) { .bottom-sheet { .container { - max-width: 90%; + max-width: calc(90% - var(--safe-area-inset-left) - var(--safe-area-inset-right)); } } } \ No newline at end of file diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less index 0e3c998e1..6a057d292 100644 --- a/src/routes/Addons/styles.less +++ b/src/routes/Addons/styles.less @@ -22,7 +22,7 @@ } .addons-container { - height: calc(100% - var(--calculated-bottom-safe-inset)); + height: calc(100% - var(--safe-area-inset-bottom)); background-color: transparent; .addons-content { diff --git a/src/routes/Board/styles.less b/src/routes/Board/styles.less index edd34554b..b8ad3951d 100644 --- a/src/routes/Board/styles.less +++ b/src/routes/Board/styles.less @@ -13,7 +13,7 @@ .board-container { width: 100%; - height: calc(100% - var(--calculated-bottom-safe-inset)); + height: calc(100% - var(--safe-area-inset-bottom)); display: flex; flex-direction: column; @@ -217,7 +217,7 @@ } .board-warning-container { - bottom: calc(var(--vertical-nav-bar-size) + var(--calculated-bottom-safe-inset, 0rem)); + bottom: calc(var(--vertical-nav-bar-size) + var(--safe-area-inset-bottom, 0rem)); height: 7rem; } } diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less index b435f3e35..62e3adaee 100644 --- a/src/routes/Discover/styles.less +++ b/src/routes/Discover/styles.less @@ -17,7 +17,7 @@ } .discover-container { - height: calc(100% - var(--calculated-bottom-safe-inset)); + height: calc(100% - var(--safe-area-inset-bottom)); background-color: transparent; .discover-content { diff --git a/src/routes/Library/styles.less b/src/routes/Library/styles.less index e2bd4ad3e..2bdbc13ec 100644 --- a/src/routes/Library/styles.less +++ b/src/routes/Library/styles.less @@ -13,7 +13,7 @@ } .library-container { - height: calc(100% - var(--calculated-bottom-safe-inset)); + height: calc(100% - var(--safe-area-inset-bottom)); background-color: transparent; .library-content { diff --git a/src/routes/MetaDetails/styles.less b/src/routes/MetaDetails/styles.less index 3e2fb1602..82740275b 100644 --- a/src/routes/MetaDetails/styles.less +++ b/src/routes/MetaDetails/styles.less @@ -52,7 +52,7 @@ flex-direction: row; margin-top: calc(var(--top-overlay-size) * -1); padding-top: var(--top-overlay-size); - padding-bottom: var(--calculated-bottom-safe-inset, 0rem); + padding-bottom: var(--safe-area-inset-bottom, 0rem); .vertical-nav-bar { flex: none; } diff --git a/src/routes/Settings/styles.less b/src/routes/Settings/styles.less index 02d6e437e..de37d17c2 100644 --- a/src/routes/Settings/styles.less +++ b/src/routes/Settings/styles.less @@ -13,7 +13,7 @@ } .settings-container { - height: calc(100% - var(--calculated-bottom-safe-inset)); + height: calc(100% - var(--safe-area-inset-bottom)); width: 100%; background-color: transparent; From 2f380c2cb977fb840b100ea289f1d53d521d218d Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Thu, 23 Jan 2025 17:31:23 +0200 Subject: [PATCH 4/4] fix(Navbar): android devices fullscreen --- src/components/MainNavBars/MainNavBars.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MainNavBars/MainNavBars.less b/src/components/MainNavBars/MainNavBars.less index 224b34f40..a5495bc69 100644 --- a/src/components/MainNavBars/MainNavBars.less +++ b/src/components/MainNavBars/MainNavBars.less @@ -29,7 +29,7 @@ .nav-content-container { position: absolute; - padding-top: var(--horizontal-nav-bar-size); + padding-top: calc(var(--horizontal-nav-bar-size) + var(--safe-area-inset-top)); top: 0; right: 0; bottom: 0;