Restructure code

2026-09-22 19:15:08 +03:00 · 2025-10-02 18:18:08 +03:00
parent 0d33c344b8
commit a24270b37a
85 changed files with 17 additions and 15 deletions
@@ -0,0 +1,150 @@
+@use "common/colors" as *;
+@use "common/material" as *;
+
+
+// контейнер чата и панели с чатами
+.all-container {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    height: 100%;
+}
+
+#profile {
+    display: none;
+    flex-direction: column;
+    z-index: 2000;
+    top: 0;
+    left: 0;
+    position: fixed;
+    height: 100vh;
+    width: 27%;
+    background-color: $color-dark-surface-container;
+    position: relative;
+
+    .profileheader {
+        display: flex;
+        gap: 200px;
+
+        p {
+            color: white;
+        }
+
+        a {
+            text-decoration: none;
+            color: white;
+            border: solid 2px $color-dark-on-surface-variant;
+            padding: 5px;
+            border-radius: 10px;
+
+            &:hover {
+                background-color: rgba(255, 255, 255, 0.241);
+            }
+        }
+    }
+}
+
+#chat-list {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 0;
+    width: 40%;
+    background-color: $color-dark-surface-container;
+    height: 100%;
+    z-index: 1000;
+    min-height: 0; // allow children to manage their own scrolling
+
+    .chat-header-left {
+        display: flex;
+        color: white;
+        font-size: 25px;
+        background-color: $color-dark-surface-container;
+        width: 100%;
+        justify-content: center;
+        align-items: center;
+        padding: 16px;
+        overflow: hidden;
+
+        .product-name {
+            flex-grow: 1;
+        }
+    
+        .profile {
+            font-size: 24px;
+            display: flex;
+            justify-content: start;
+            flex-shrink: 0;
+            flex-grow: 0;
+
+            #closeprofile a {
+                text-decoration: none;
+                color: white;
+                border: solid 2px $color-dark-on-surface-variant;
+                padding: 5px;
+                border-radius: 10px;
+                
+                &:hover {
+                    background-color: rgba(255, 255, 255, 0.241);
+                }
+            }
+
+            img {
+                $size: 45px;
+                display: flex;
+                border-radius: 50%;
+                width: $size;
+                height: $size;
+            }
+        }
+    }
+
+    .chat-tabs {
+        margin-top: 5px;
+        width: 100%;
+        height: calc(100% - 80px);
+        display: flex;
+        flex-direction: column;
+        min-height: 0; // prevent flex collapse when inner overflows
+        --mdui-color-surface: $color-dark-surface-container;
+        --mdui-color-surface-variant: transparent;
+
+        img {
+            width: 45px;
+            height: 45px;
+            border-radius: 20%;
+            object-fit: cover;
+            margin-right: 1rem;
+        }
+
+        mdui-tabs {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            min-height: 0; // enable inner panel to scroll
+        }
+
+        mdui-tab-panel[active] {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            min-height: 0; // critical to avoid collapsing
+            overflow: hidden;
+        }
+
+        mdui-list {
+            flex: 1;
+            min-height: 0; // allow scroll area to size correctly
+            overflow-y: auto;
+            padding: 0;
+            margin: 0;
+        }
+    }
+
+    mdui-bottom-app-bar {
+        position: relative;
+        width: 100%;
+        padding-left: 16px;
+        padding-right: 16px;
+        margin-top: auto;
+    }
+}