Merge pull request #845 from Stremio/fix/calendar-mobile-placeholder

Calendar: Fix placeholder responsiveness
Stremio · Feb 24, 2025 · 235d09f · 235d09f
2 parents c91758f + bf37815
commit 235d09f
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 38 deletions.
diff --git a/src/components/MainNavBars/MainNavBars.less b/src/components/MainNavBars/MainNavBars.less
@@ -29,8 +29,7 @@
 
     .nav-content-container {
         position: absolute;
-        padding-top: calc(var(--horizontal-nav-bar-size) + var(--safe-area-inset-top));
-        top: 0;
+        top: calc(var(--horizontal-nav-bar-size) + var(--safe-area-inset-top));
         right: 0;
         bottom: 0;
         left: var(--vertical-nav-bar-size);
@@ -43,7 +42,7 @@
     .main-nav-bars-container {
         .nav-content-container {
             left: 0;
-            padding-bottom: var(--vertical-nav-bar-size);
+            bottom: var(--vertical-nav-bar-size);
         }
 
         .vertical-nav-bar {

diff --git a/src/routes/Calendar/Placeholder/Placeholder.less b/src/routes/Calendar/Placeholder/Placeholder.less
@@ -8,12 +8,11 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    height: 100%;
+    min-height: 100%;
     width: 100%;
     overflow-y: auto;
 
     .title {
-        flex: none;
         font-size: 1.75rem;
         font-weight: 400;
         text-align: center;
@@ -22,19 +21,22 @@
         opacity: 0.5;
     }
 
-    .image {
-        flex: none;
-        height: 14rem;
-        margin: 1.5rem 0;
+    .image-container {
+        padding: 1.5rem 0;
+
+        .image {
+            height: 100%;
+            max-height: 14rem;
+            object-fit: contain;
+        }
     }
 
     .overview {
-        flex: none;
         display: flex;
         flex-direction: row;
         align-items: center;
         gap: 4rem;
-        margin-bottom: 3rem;
+        margin-bottom: 1rem;
 
         .point {
             display: flex;
@@ -61,39 +63,70 @@
         }
     }
 
-    .button {
-        flex: none;
-        justify-content: center;
-        height: 4rem;
-        line-height: 4rem;
-        padding: 0 5rem;
-        font-size: 1.1rem;
-        color: var(--primary-foreground-color);
-        text-align: center;
-        border-radius: 3.5rem;
-        background-color: var(--overlay-color);
+    .button-container {
+        margin: 1rem 0;
+
+        .button {
+            display: flex;
+            justify-content: center;
+            height: 4rem;
+            line-height: 4rem;
+            padding: 0 5rem;
+            font-size: 1.1rem;
+            color: var(--primary-foreground-color);
+            text-align: center;
+            border-radius: 3.5rem;
+            background-color: var(--overlay-color);
 
-        &:hover {
-            outline: var(--focus-outline-size) solid var(--primary-foreground-color);
-            background-color: transparent;
+            &:hover {
+                outline: var(--focus-outline-size) solid var(--primary-foreground-color);
+                background-color: transparent;
+            }
         }
     }
 }
 
-@media only screen and (max-width: @minimum) {
+@media only screen and (max-width: @xsmall) {
     .placeholder {
         padding: 1rem 2rem;
 
-        .image {
-            height: 10rem;
+        .title {
+            margin-bottom: 0;
         }
 
+        .image-container {
+            padding: 1rem;
+
+            .image {
+                max-height: 10rem;
+            }
+        }
+
+        .button-container {
+            margin: 1rem 0 0;
+        }
+    }
+}
+
+@media only screen and (max-width: @minimum) {
+    .placeholder {
+        padding: 1rem 2rem;
+
         .overview {
             flex-direction: column;
+            gap: 1rem;
+
+            .point {
+                .text {
+                    font-size: 1rem;
+                }
+            }
         }
 
-        .button {
-            width: 100%;
+        .button-container {
+            .button {
+                width: 100%;
+            }
         }
     }
 }
diff --git a/src/routes/Calendar/Placeholder/Placeholder.tsx b/src/routes/Calendar/Placeholder/Placeholder.tsx
@@ -14,11 +14,13 @@ const Placeholder = () => {
             <div className={styles['title']}>
                 {t('CALENDAR_NOT_LOGGED_IN')}
             </div>
-            <Image
-                className={styles['image']}
-                src={require('/images/calendar_placeholder.png')}
-                alt={' '}
-            />
+            <div className={styles['image-container']}>
+                <Image
+                    className={styles['image']}
+                    src={require('/images/calendar_placeholder.png')}
+                    alt={' '}
+                />
+            </div>
             <div className={styles['overview']}>
                 <div className={styles['point']}>
                     <Icon className={styles['icon']} name={'megaphone'} />
@@ -33,9 +35,11 @@ const Placeholder = () => {
                     </div>
                 </div>
             </div>
-            <Button className={styles['button']} href={'#/intro?form=login'}>
-                {t('LOG_IN')}
-            </Button>
+            <div className={styles['button-container']}>
+                <Button className={styles['button']} href={'#/intro?form=login'}>
+                    {t('LOG_IN')}
+                </Button>
+            </div>
         </div>
     );
 };