Merge pull request #765 from Stremio/refactor/overall-app-styles

refactor(styles): improve PWA styles on mobile devices (1)
Stremio · Jan 3, 2025 · a5ae0c1 · a5ae0c1
2 parents fe3aade + 629ba4b
commit a5ae0c1
Show file tree

Hide file tree

Showing 21 changed files with 150 additions and 91 deletions.
diff --git a/src/App/styles.less b/src/App/styles.less
@@ -1,4 +1,4 @@
-// Copyright (C) 2017-2023 Smart code 203358507
+// Copyright (C) 2017-2024 Smart code 203358507
 
 @import (reference) '~stremio/common/screen-sizes.less';
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@@ -13,6 +13,20 @@
     @import (once, less) '~stremio-router/styles.css';
 }
 
+// iOS pads the bottom inset more than needed, so we deduce the actual inset size when using the webapp
+@calculated-bottom-safe-inset: ~"min(env(safe-area-inset-bottom, 0rem), max(1rem, calc(100lvh - 100svh - env(safe-area-inset-top, 0rem))))";
+@html-width: ~"calc(max(100svw, 100dvw))";
+@html-height: ~"calc(max(100svh, 100dvh))";
+@safe-area-inset-top: env(safe-area-inset-top, 0rem);
+@safe-area-inset-right: env(safe-area-inset-right, 0rem);
+@safe-area-inset-bottom: env(safe-area-inset-bottom, 0rem);
+@safe-area-inset-left: env(safe-area-inset-left, 0rem);
+
+@top-overlay-size: 5.25rem;
+@bottom-overlay-size: 0rem;
+@overlap-size: 3rem;
+@transparency-grandient-pad: 6rem;
+
 :root {
     --landscape-shape-ratio: 0.5625;
     --poster-shape-ratio: 1.464;
@@ -40,6 +54,15 @@
     --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;
+    --transparency-grandient-pad: @transparency-grandient-pad;
+    --safe-area-inset-top: @safe-area-inset-top;
+    --safe-area-inset-right: @safe-area-inset-right;
+    --safe-area-inset-bottom: @safe-area-inset-bottom;
+    --safe-area-inset-left: @safe-area-inset-left;
 }
 
 * {
@@ -85,13 +108,16 @@ svg {
 }
 
 html {
-    width: 100%;
-    height: 100%;
+    width: @html-width;
+    height: @html-height;
     min-width: 640px;
     min-height: 480px;
     font-family: 'PlusJakartaSans', 'sans-serif';
     overflow: auto;
     overscroll-behavior: none;
+    user-select: none;
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
 
     body {
         width: 100%;
@@ -106,9 +132,9 @@ html {
 
             .toasts-container {
                 position: absolute;
-                top: calc(1.2 * var(--horizontal-nav-bar-size));
-                right: 0;
-                bottom: calc(1.2 * var(--horizontal-nav-bar-size));
+                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));
                 left: auto;
                 z-index: 1;
                 padding: 0 calc(0.5 * var(--horizontal-nav-bar-size));
@@ -193,4 +219,10 @@ html {
             }
         }
     }
+}
+
+@media only screen and (max-width: @minimum) {
+    :root {
+        --bottom-overlay-size: 6rem;
+    }
 }
diff --git a/src/common/BottomSheet/BottomSheet.less b/src/common/BottomSheet/BottomSheet.less
@@ -23,7 +23,6 @@
         opacity: 0.8;
         transition: opacity 0.1s ease-out;
         cursor: pointer;
-        -webkit-tap-highlight-color: transparent;
     }
 
     .container {

diff --git a/src/common/Button/styles.less b/src/common/Button/styles.less
@@ -1,12 +1,11 @@
-// Copyright (C) 2017-2023 Smart code 203358507
+// Copyright (C) 2017-2024 Smart code 203358507
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
 
 .button-container {
     outline-width: var(--focus-outline-size);
     outline-color: @color-surface-light5;
     outline-offset: calc(-1 * var(--focus-outline-size));
-    -webkit-tap-highlight-color: transparent;
     cursor: pointer;
 
     &:focus {

diff --git a/src/common/Chips/Chip/Chip.less b/src/common/Chips/Chip/Chip.less
@@ -16,7 +16,6 @@
     text-transform: capitalize;
     padding: 0 1.75rem;
     border-radius: @height;
-    -webkit-tap-highlight-color: transparent;
     background-color: transparent;
     user-select: none;
     overflow: hidden;

diff --git a/src/common/MainNavBars/styles.less b/src/common/MainNavBars/styles.less
@@ -1,10 +1,15 @@
-// Copyright (C) 2017-2023 Smart code 203358507
+// Copyright (C) 2017-2024 Smart code 203358507
 
 @import (reference) '~stremio/common/screen-sizes.less';
 
 .main-nav-bars-container {
     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));
+    height: 100%;
 
     .horizontal-nav-bar {
         position: absolute;
@@ -17,26 +22,28 @@
     .vertical-nav-bar {
         position: absolute;
         top: var(--horizontal-nav-bar-size);
-        bottom: 0;
+        bottom: var(--calculated-bottom-safe-inset);
         left: 0;
         z-index: 1;
     }
 
     .nav-content-container {
         position: absolute;
-        top: var(--horizontal-nav-bar-size);
+        padding-top: calc(var(--horizontal-nav-bar-size) + env(safe-area-inset-top, 0px));
+        top: 0;
         right: 0;
         bottom: 0;
         left: var(--vertical-nav-bar-size);
         z-index: 0;
+        overflow: scroll;
     }
 }
 
 @media only screen and (max-width: @minimum) {
     .main-nav-bars-container {
         .nav-content-container {
             left: 0;
-            bottom: var(--vertical-nav-bar-size);
+            padding-bottom: var(--vertical-nav-bar-size);
         }
 
         .vertical-nav-bar {

diff --git a/src/common/MetaItem/styles.less b/src/common/MetaItem/styles.less
@@ -1,4 +1,4 @@
-// Copyright (C) 2017-2023 Smart code 203358507
+// Copyright (C) 2017-2024 Smart code 203358507
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
 @import (reference) '~stremio/common/screen-sizes.less';
@@ -23,7 +23,6 @@
 .meta-item-container {
     padding: 1rem;
     overflow: visible;
-    -webkit-tap-highlight-color: transparent;
 
     &:hover, &:focus, &:global(.active), &:global(.selected) {
         outline-style: none;

diff --git a/src/common/NavBar/HorizontalNavBar/styles.less b/src/common/NavBar/HorizontalNavBar/styles.less
@@ -1,4 +1,4 @@
-// Copyright (C) 2017-2023 Smart code 203358507
+// Copyright (C) 2017-2024 Smart code 203358507
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
 @import (reference) '~stremio/common/screen-sizes.less';
@@ -12,6 +12,8 @@
     padding-right: 1rem;
     background-color: transparent;
     overflow: visible;
+    padding-top: var(--safe-area-inset-top);
+    box-sizing: content-box;
 
     .logo-container {
         flex: none;
@@ -32,7 +34,7 @@
     }
 
     .back-button-container {
-        margin-left: 1rem;
+        margin-left: max(0rem, calc(1rem - var(--safe-area-inset-left)));
     }
 
     .title {

diff --git a/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less b/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less
@@ -1,4 +1,4 @@
-// Copyright (C) 2017-2023 Smart code 203358507
+// Copyright (C) 2017-2024 Smart code 203358507
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
 @import (reference) '~stremio/common/screen-sizes.less';
@@ -11,11 +11,13 @@
     background-color: transparent;
     border-radius: 0.75rem;
 
-    &:hover {
-        background-color: var(--overlay-color);
+    @media (pointer: fine) {
+        &:hover {
+            background-color: var(--overlay-color);
 
-        .label {
-            opacity: 0.6;
+            .label {
+                opacity: 0.6;
+            }
         }
     }
 

diff --git a/src/common/RadioButton/RadioButton.less b/src/common/RadioButton/RadioButton.less
@@ -24,7 +24,6 @@
         outline-width: var(--focus-outline-size);
         outline-color: @color-surface-light5;
         outline-offset: calc(-1 * var(--focus-outline-size));
-        -webkit-tap-highlight-color: transparent;
 
         input[type='radio'] {
             opacity: 0;

diff --git a/src/index.html b/src/index.html
@@ -3,7 +3,7 @@
 
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0, user-scalable=no, viewport-fit=cover">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Stremio">
     <link rel="icon" type="image/x-icon" href="<%= htmlWebpackPlugin.options.faviconsPath %>/favicon.ico">

diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
@@ -1,4 +1,4 @@
-// Copyright (C) 2017-2023 Smart code 203358507
+// Copyright (C) 2017-2024 Smart code 203358507
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
 @import (reference) '~stremio/common/screen-sizes.less';
@@ -22,17 +22,22 @@
 }
 
 .addons-container {
-    width: 100%;
     height: 100%;
     background-color: transparent;
 
     .addons-content {
         width: 100%;
         height: 100%;
+        margin-bottom: calc(var(--bottom-overlay-size) * -1);
         display: flex;
         flex-direction: column;
         align-self: stretch;
 
+        .addons-list-container {
+            padding: 0 1.5rem;
+            z-index: 1;
+        }
+
         .selectable-inputs-container {
             flex: none;
             align-self: stretch;
@@ -41,6 +46,7 @@
             justify-content: space-between;
             padding: 1.5rem;
             overflow: visible;
+            z-index: 2;
 
             .add-button-container {
                 flex: none;
@@ -53,6 +59,7 @@
                 padding: 0 1.5rem;
                 border-radius: 3rem;
                 background-color: var(--secondary-accent-color);
+                z-index: 3;
 
                 &:hover {
                     outline: var(--focus-outline-size) solid var(--secondary-accent-color);
@@ -133,7 +140,6 @@
         .addons-list-container {
             flex: 1;
             align-self: stretch;
-            padding: 0 1.5rem;
             overflow-y: auto;
 
             .addon {

diff --git a/src/routes/Board/styles.less b/src/routes/Board/styles.less
@@ -1,4 +1,4 @@
-// Copyright (C) 2017-2023 Smart code 203358507
+// Copyright (C) 2017-2024 Smart code 203358507
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
 @import (reference) '~stremio/common/screen-sizes.less';
@@ -23,8 +23,8 @@
         background: transparent;
 
         .board-content {
-            width: 100%;
             height: 100%;
+            width: 100%;
             padding: 0 1rem;
             overflow-y: auto;
 
@@ -38,6 +38,7 @@
     .board-warning-container {
         flex: none;
         align-self: stretch;
+        margin-bottom: var(--calculated-bottom-safe-inset, 0rem);
     }
 }
 
@@ -191,15 +192,7 @@
         z-index: 0;
 
         .board-content-container {
-            &:only-child {
-                .board-content {
-                    height: 100%;
-                }
-            }
-
             .board-content {
-                height: calc(100% - 4rem);
-
                 .board-row {
                     margin-bottom: 1.5rem;
                 }
@@ -226,8 +219,9 @@
             position: absolute;
             left: 0;
             right: 0;
-            bottom: var(--vertical-nav-bar-size);
+            bottom: calc(var(--vertical-nav-bar-size) + var(--calculated-bottom-safe-inset, 0rem));
             height: 4rem;
+            margin-bottom: 0rem;
         }
     }
 }
diff --git a/src/routes/Calendar/Details/Details.less b/src/routes/Calendar/Details/Details.less
@@ -16,7 +16,6 @@
         font-size: 1rem;
         font-weight: 500;
         color: var(--primary-foreground-color);
-        -webkit-tap-highlight-color: transparent;
 
         .name {
             flex: auto;

diff --git a/src/routes/Calendar/Selector/Selector.less b/src/routes/Calendar/Selector/Selector.less
@@ -22,7 +22,6 @@
         gap: 0.5rem;
         border-radius: 0.5rem;
         transition: background-color 0.1s ease-out;
-        -webkit-tap-highlight-color: transparent;
 
         .label, .icon {
             color: var(--primary-foreground-color);

diff --git a/src/routes/Calendar/Table/Cell/Cell.less b/src/routes/Calendar/Table/Cell/Cell.less
@@ -13,7 +13,6 @@
     overflow: hidden;
     cursor: pointer;
     transition: border-color 0.1s ease-out;
-    -webkit-tap-highlight-color: transparent;
 
     &:first-child {
         border-radius: var(--border-radius) 0 0 0;