refactor(Calendar): improve responsiveness

Stremio · Jul 4, 2024 · 4c4a41a · 4c4a41a
1 parent a561ee0
commit 4c4a41a
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 5 deletions.
diff --git a/src/routes/Calendar/List/List.less b/src/routes/Calendar/List/List.less
@@ -12,7 +12,7 @@
     overflow-y: auto;
 }
 
-@media only screen and (max-width: @minimum) and (orientation: portrait) {
+@media only screen and (max-width: @small) and (orientation: portrait) {
     .list {
         display: none;
     }

diff --git a/src/routes/Calendar/Table/Cell/Cell.less b/src/routes/Calendar/Table/Cell/Cell.less
@@ -1,10 +1,13 @@
 // Copyright (C) 2017-2024 Smart code 203358507
 
+@import (reference) '~stremio/common/screen-sizes.less';
+
 .cell {
     position: relative;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    gap: 1rem;
     background-color: var(--overlay-color);
     border: 0.15rem solid transparent;
     overflow: hidden;
@@ -21,7 +24,7 @@
     .heading {
         flex: none;
         position: relative;
-        padding: 1rem;
+        padding: 1rem 1rem 0 1rem;
 
         .day {
             position: relative;
@@ -37,7 +40,7 @@
         }
     }
 
-    .body {
+    .items {
         flex: 1 1 auto;
         position: relative;
         display: flex;
@@ -103,7 +106,7 @@
     }
 
     &.past {
-        .body {
+        .items {
             opacity: 0.5;
         }
     }
@@ -116,3 +119,30 @@
         border-color: var(--overlay-color);
     }
 }
+
+@media only screen and (max-width: @minimum) and (orientation: portrait) {
+    .cell {
+        gap: 1rem;
+
+        .items {
+            .item {
+                border-radius: 0.25rem;
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: @small) and (orientation: landscape) {
+    .cell {
+        flex-direction: row;
+        align-items: center;
+
+        .heading {
+            padding: 1rem;
+        }
+
+        .items {
+            display: none;
+        }
+    }
+}
diff --git a/src/routes/Calendar/Table/Cell/Cell.tsx b/src/routes/Calendar/Table/Cell/Cell.tsx
@@ -38,7 +38,7 @@ const Cell = ({ selected, monthInfo, date, items, onClick }: Props) => {
                     {date.day}
                 </div>
             </div>
-            <HorizontalScroll className={styles['body']}>
+            <HorizontalScroll className={styles['items']}>
                 {
                     items.map(({ id, name, poster, deepLinks }) => (
                         <Button key={id} className={styles['item']} href={deepLinks.metaDetailsStreams}>