Merge pull request #269 from Stremio/mobile

Adapt layout to mobile
Stremio · Jun 13, 2022 · b3e7b4a · b3e7b4a
2 parents 24a8cbc + a814826
commit b3e7b4a
Show file tree

Hide file tree

Showing 40 changed files with 14,815 additions and 151 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
         "@stremio/stremio-icons": "3.0.5",
         "@stremio/stremio-video": "0.0.20-rc.4",
         "a-color-picker": "1.2.1",
+        "bowser": "2.11.0",
         "buffer": "6.0.3",
         "classnames": "2.3.1",
         "eventemitter3": "4.0.7",

diff --git a/src/App/styles.less b/src/App/styles.less
@@ -135,4 +135,11 @@ html {
     html {
         font-size: 14px;
     }
+}
+
+@media only screen and (max-width: @xsmall) {
+    html {
+        min-width: inherit;
+        min-height: inherit;
+    }
 }
diff --git a/src/common/ColorInput/ColorPicker/styles.less b/src/common/ColorInput/ColorPicker/styles.less
@@ -2,6 +2,7 @@
 
 .color-picker-container {
     overflow: visible;
+    text-align: center;
 
     * {
         overflow: visible;

diff --git a/src/common/MainNavBars/styles.less b/src/common/MainNavBars/styles.less
@@ -1,5 +1,7 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
+@import (reference) '~stremio/common/screen-sizes.less';
+
 .main-nav-bars-container {
     position: relative;
     z-index: 0;
@@ -28,4 +30,17 @@
         left: var(--vertical-nav-bar-size);
         z-index: 0;
     }
+}
+
+@media only screen and (max-width: @minimum) {
+    .main-nav-bars-container {
+        .nav-content-container {
+            left: 0;
+            bottom: var(--vertical-nav-bar-size);
+        }
+
+        .vertical-nav-bar {
+            top: initial;
+        }
+    }
 }
diff --git a/src/common/MetaItem/styles.less b/src/common/MetaItem/styles.less
@@ -1,6 +1,7 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+@import (reference) '~stremio/common/screen-sizes.less';
 
 :import('~stremio/common/Popup/styles.less') {
     popup-menu-container: menu-container;
@@ -175,4 +176,14 @@
             }
         }
     }
+}
+
+@media only screen and (max-width: @minimum) {
+    .meta-item-container {
+        padding: 0.5rem;
+
+        .title-bar-container {
+            margin-top: 0.5rem;
+        }
+    }
 }
diff --git a/src/common/MetaPreview/ActionButton/styles.less b/src/common/MetaPreview/ActionButton/styles.less
@@ -1,6 +1,7 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+@import (reference) '~stremio/common/screen-sizes.less';
 
 .action-button-container {
     display: flex;
@@ -45,4 +46,29 @@
             color: @color-surface-light5-90;
         }
     }
+}
+
+@media only screen and (max-width: @minimum) {
+    .action-button-container {
+        flex-direction: row;
+        padding: 0 1rem;
+
+        .icon-container {
+            flex: none;
+            align-self: center;
+            height: 2rem;
+            width: 2rem;
+            padding-top: 0;
+            margin-right: 0.5rem;
+
+            &:only-child {
+                padding: 0;
+                margin-right: 0;
+            }
+        }
+
+        .label-container {
+            flex: 1;
+        }
+    }
 }
diff --git a/src/common/MetaPreview/MetaPreview.js b/src/common/MetaPreview/MetaPreview.js
@@ -116,7 +116,7 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
                             renderFallback={renderLogoFallback}
                         />
                         :
-                        null
+                        renderLogoFallback()
                 }
                 {
                     (typeof releaseInfo === 'string' && releaseInfo.length > 0) || (released instanceof Date && !isNaN(released.getTime())) || (typeof runtime === 'string' && runtime.length > 0) || linksGroups.has(CONSTANTS.IMDB_LINK_CATEGORY) ?

diff --git a/src/common/MetaPreview/styles.less b/src/common/MetaPreview/styles.less
@@ -1,6 +1,7 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+@import (reference) '~stremio/common/screen-sizes.less';
 
 .meta-preview-container {
     position: relative;
@@ -196,4 +197,42 @@
 
 .share-prompt {
     width: 24rem;
+}
+
+@media only screen and (max-width: @minimum) {
+    .meta-preview-container {
+        .meta-info-container {
+            padding: 0 1.5rem;
+
+            .logo {
+                margin: 1em 0;
+            }
+        }
+
+        .action-buttons-container {
+            flex-wrap: nowrap;
+            padding: 0 1.5rem;
+            overflow-x: visible;
+            scrollbar-width: none;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+
+            .action-button {
+                width: auto;
+                height: 4rem;
+                max-width: 60%;
+                margin: 1rem 0;
+
+                &:not(:last-child) {
+                    margin-right: 1rem;
+                }
+            }
+        }
+    }
+
+    .share-prompt {
+        width: 100%;
+    }
 }
diff --git a/src/common/MetaRow/MetaRowPlaceholder/styles.less b/src/common/MetaRow/MetaRowPlaceholder/styles.less
@@ -1,5 +1,7 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
+@import (reference) '~stremio/common/screen-sizes.less';
+
 .meta-row-placeholder-container {
     .header-container {
         display: flex;
@@ -85,4 +87,22 @@
             }
         }
     }
+}
+
+@media only screen and (max-width: @minimum) {
+    .meta-row-placeholder-container {
+        .meta-items-container {
+            .meta-item {
+                margin: 0.5rem;
+
+                &:not(:first-child) {
+                    margin-left: 0.5rem;
+                }
+
+                .title-bar-container {
+                    margin-top: 0.5rem;
+                }
+            }
+        }
+    }
 }
diff --git a/src/common/MetaRow/styles.less b/src/common/MetaRow/styles.less
@@ -1,6 +1,7 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+@import (reference) '~stremio/common/screen-sizes.less';
 
 .meta-row-container {
     overflow: visible;
@@ -75,8 +76,6 @@
         overflow: visible;
 
         .meta-item {
-            padding: 1rem;
-
             &:not(:first-child) {
                 margin-left: 0.5rem;
             }
@@ -94,4 +93,26 @@
             }
         }
     }
+}
+
+@media only screen and (max-width: @minimum) {
+    .meta-row-container {
+        .header-container {
+            padding: 0 0.5rem;
+
+            .title-container {
+                margin-right: 0.5rem;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+        }
+
+        .meta-items-container {
+            .meta-item {
+                &:not(:first-child) {
+                    margin-left: 0;
+                }
+            }
+        }
+    }
 }
diff --git a/src/common/ModalDialog/styles.less b/src/common/ModalDialog/styles.less
@@ -1,6 +1,7 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+@import (reference) '~stremio/common/screen-sizes.less';
 
 .modal-container {
     display: flex;
@@ -117,4 +118,45 @@
         text-align: center;
         color: @color-surface-light5-90;
     }
+}
+
+@media only screen and (max-width: @minimum) {
+    .modal-container {
+        .modal-dialog-container {
+            position: relative;
+            width: 90%;
+            max-width: initial;
+            z-index: 0;
+
+            .close-button-container {
+                position: absolute;
+                top: 0;
+                right: 0;
+                margin: 0.75rem 0.75rem 0 0;
+                padding: 0.25rem;
+            }
+
+            .title-container {
+                max-height: 4.8em;
+                margin: 1rem 3rem 1rem 1.5rem;
+            }
+
+            .modal-dialog-content {
+                margin: 0 0.5rem;
+                padding: 0 0.5rem;
+
+                &:last-child {
+                    margin-bottom: 1rem;
+                }
+            }
+
+            .buttons-container {
+                margin: 1rem 1rem 0;
+
+                &:last-child {
+                    margin-bottom: 1rem;
+                }
+            }
+        }
+    }
 }
diff --git a/src/common/Multiselect/styles.less b/src/common/Multiselect/styles.less
@@ -1,6 +1,7 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+@import (reference) '~stremio/common/screen-sizes.less';
 
 :import('~stremio/common/Popup/styles.less') {
     popup-menu-container: menu-container;

diff --git a/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js b/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js
@@ -17,7 +17,7 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
     }, []);
     const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen();
     const renderNavMenuLabel = React.useCallback(({ ref, className, onClick, children, }) => (
-        <Button ref={ref} className={classnames(className, styles['button-container'])} tabIndex={-1} onClick={onClick}>
+        <Button ref={ref} className={classnames(className, styles['button-container'], styles['menu-button-container'])} tabIndex={-1} onClick={onClick}>
             <Icon className={styles['icon']} icon={'ic_more'} />
             {children}
         </Button>

diff --git a/src/common/NavBar/HorizontalNavBar/NavMenu/styles.less b/src/common/NavBar/HorizontalNavBar/NavMenu/styles.less
@@ -1,6 +1,7 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+@import (reference) '~stremio/common/screen-sizes.less';
 
 .nav-menu-container {
     width: 20rem;
@@ -100,4 +101,10 @@
             }
         }
     }
+}
+
+@media only screen and (max-width: @minimum) {
+    .nav-menu-container {
+        max-height: calc(100vh - var(--horizontal-nav-bar-size) - var(--vertical-nav-bar-size) - 1rem);
+    }
 }
diff --git a/src/common/NavBar/HorizontalNavBar/styles.less b/src/common/NavBar/HorizontalNavBar/styles.less
@@ -1,6 +1,7 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+@import (reference) '~stremio/common/screen-sizes.less';
 
 .horizontal-nav-bar-container {
     display: flex;
@@ -90,4 +91,27 @@
             fill: @color-secondaryvariant2-light1-90;
         }
     }
+}
+
+@media only screen and (max-width: @minimum) {
+    .horizontal-nav-bar-container {
+        justify-content: space-between;
+        padding-right: 0;
+
+        .logo-container {
+            width: var(--horizontal-nav-bar-size);
+        }
+
+        .search-bar {
+            margin: 0 0.5rem;
+        }
+
+        .spacing {
+            display: none;
+        }
+
+        .button-container:not(.back-button-container):not(.menu-button-container) {
+            display: none;
+        }
+    }
 }