refactor(Calendar): improve responsiveness

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

Hide file tree

Showing 5 changed files with 87 additions and 10 deletions.
diff --git a/src/routes/Calendar/List/List.less b/src/routes/Calendar/List/List.less
@@ -12,14 +12,26 @@
     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;
     }
 }
 
+@media only screen and (max-width: @medium) and (orientation: landscape) {
+    .list {
+        width: 20rem;
+    }
+}
+
 @media only screen and (max-width: @small) and (orientation: landscape) {
+    .list {
+        width: 17rem;
+    }
+}
+
+@media only screen and (max-width: @xsmall) and (orientation: landscape) {
     .list {
         width: 15rem;
     }
-}
+}
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: 2rem;
     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,14 +40,14 @@
         }
     }
 
-    .body {
+    .items {
         flex: 1 1 auto;
         position: relative;
         display: flex;
         flex-direction: row;
         gap: 1rem;
         height: 0;
-        padding: 1rem;
+        padding: 0 1rem 1rem 1rem;
 
         .item {
             flex: none;
@@ -103,7 +106,7 @@
     }
 
     &.past {
-        .body {
+        .items {
             opacity: 0.5;
         }
     }
@@ -116,3 +119,34 @@
         border-color: var(--overlay-color);
     }
 }
+
+@media only screen and (max-height: @small) {
+    .cell {
+        gap: 1rem;
+    }
+}
+
+@media only screen and (max-width: @minimum) and (orientation: portrait) {
+    .cell {
+        .items {
+            .item {
+                border-radius: 0.25rem;
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: @xsmall) and (orientation: landscape) {
+    .cell {
+        flex-direction: row;
+        align-items: center;
+
+        .heading {
+            padding: 0;
+        }
+
+        .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}>

diff --git a/src/routes/Calendar/Table/Table.less b/src/routes/Calendar/Table/Table.less
@@ -1,5 +1,7 @@
 // Copyright (C) 2017-2024 Smart code 203358507
 
+@import (reference) '~stremio/common/screen-sizes.less';
+
 .table {
     flex: auto;
     position: relative;
@@ -15,7 +17,7 @@
         grid-template-columns: repeat(7, 1fr);
         align-items: center;
 
-        .item {
+        .day {
             position: relative;
             padding: 0.5rem;
             font-size: 1rem;
@@ -24,6 +26,14 @@
             white-space: nowrap;
             text-overflow: ellipsis;
             overflow: hidden;
+
+            .long {
+                display: block;
+            }
+
+            .short {
+                display: none;
+            }
         }
     }
 
@@ -37,4 +47,20 @@
         gap: 1px;
         border-radius: var(--border-radius);
     }
+}
+
+@media only screen and (max-width: @xsmall) {
+    .table {
+        .week {
+            .day {
+                .long {
+                    display: none;
+                }
+
+                .short {
+                    display: block;
+                }
+            }
+        }
+    }
 }
diff --git a/src/routes/Calendar/Table/Table.tsx b/src/routes/Calendar/Table/Table.tsx
@@ -26,8 +26,13 @@ const Table = ({ items, selected, monthInfo, onChange }: Props) => {
             <div className={styles['week']}>
                 {
                     WEEK_DAYS.map((day) => (
-                        <div className={styles['item']} key={day}>
-                            {t(day)}
+                        <div className={styles['day']} key={day}>
+                            <span className={styles['long']}>
+                                {t(day)}
+                            </span>
+                            <span className={styles['short']}>
+                                {t(day).slice(0, 3)}
+                            </span>
                         </div>
                     ))
                 }