✨ Add a first Conversations layout

2024-05-26 11:17:37 +02:00
parent df32faa8e6
commit c8e8e2da67
3 changed files with 389 additions and 0 deletions
--- a/src/ui/layouts/conversations.scss
+++ b/src/ui/layouts/conversations.scss
@@ -0,0 +1,136 @@
+@import "../_base.scss";
+@import "../components/_panel.scss";
+
+.conversations-view-head {
+    height: 100%;
+    width: 1px;
+
+    flex-shrink: 0;
+    scroll-snap-align: end;
+}
+
+.conversations-view-tail {
+    height: 100%;
+    width: 1px;
+
+    flex-shrink: 0;
+    scroll-snap-align: start;
+}
+
+.conversations-view {
+    $height: 100vh;
+    $width: 100vw;
+    $conversations-panel-height: calc($height * 0.95);
+    $conversations-panel-width: calc($conversations-panel-height * $panel-aspect-ratio);
+    $gap: 1%;
+    $content-height: 95%;
+    $ratio: 2;
+
+    height: 100%;
+    width: 100%;
+
+    position: relative;
+    top: -100vh;
+    margin-bottom: -100vh;
+
+    &__small {
+        scroll-snap-type: x mandatory;
+
+        height: 100%;
+        width: 100%;
+
+        display: flex;
+        flex-direction: row;
+        gap: $gap;
+
+        justify-content: safe center;
+        align-items: safe center;
+
+        overflow-x: scroll;
+
+        &__conversations-panel {
+            height: $content-height;
+            width: 100%;
+
+            flex-shrink: 0;
+            scroll-snap-align: center;
+
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            &__inner {
+                height: 100%;
+
+                // TODO: Is aspect-ratio the best criteria to defined that inner shall take all the available space ?
+                @media (max-aspect-ratio: $panel-aspect-ratio) {
+                    width: 100%;
+                }
+                @media (min-aspect-ratio: $panel-aspect-ratio) {
+                    aspect-ratio: $panel-aspect-ratio;
+                }
+            }
+        }
+
+        &__panel {
+            flex-shrink: 0;
+
+            height: $content-height;
+            width: 100%;
+
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            scroll-snap-align: center;
+
+            &__inner {
+                height: 100%;
+                width: calc(100% - (2 * $gap));
+            }
+        }
+    }
+
+    &__big {
+        height: 100%;
+        width: 100%;
+        width: calc(100% - (2 * $gap));
+
+        display: flex;
+        flex-direction: row;
+        align-items: safe center;
+        gap: $gap;
+
+        margin: 0 $gap;
+
+        &__conversations-panel {
+            height: $content-height;
+            aspect-ratio: $panel-aspect-ratio;
+        }
+
+        &__conversation-panels {
+            height: $content-height;
+
+            flex-grow: 1;
+
+            display: flex;
+            flex-direction: row;
+            overflow-x: scroll;
+
+            justify-content: safe center;
+            align-items: safe center;
+            scroll-snap-type: x mandatory;
+
+            gap: $gap;
+
+            &__panel {
+                flex-shrink: 0;
+
+                height: 100%;
+                width: 100%;
+
+                scroll-snap-align: center;
+            }
+        }
+    }
+}