Login technically works

client/src/style.scss

@@ -55,6 +55,11 @@ header {
     }
 }
 
+.panel {
+    border: 1px solid #ddd;
+    background: #fff;
+}
+
 main {
     display: flex;
     flex-direction: column;
@@ -74,47 +79,168 @@ main {
     }
 
     .room-main {
-        display: flex;
-        flex-direction: row;
-        gap: 1rem;
+        display: grid;
 
-        @media screen and (max-width: 1000px) {
-            flex-direction: column;
-        }
+        grid-template-columns: auto 1fr;
+        grid-template-rows: auto auto;
+        grid-template-areas:
+            'diagram  bookings'
+            'timeline timeline';
+
+        max-width: 800px;
 
         .room-diagram {
-            display: flex;
-            flex-direction: column;
-            border: 1px solid #ddd;
+            grid-area: diagram;
+        }
+        .room-bookings {
+            grid-area: bookings;
+        }
+        .room-timeline {
+            grid-area: timeline;
+        }
 
-            background: #fff;
+        gap: 1rem;
 
+        .room-diagram {
             padding: 1rem;
+
+            // --posto-libero-bg: #ddf;
+            // --posto-libero-bg-1: #88f;
+            // --posto-libero-bg-2: #66d;
+            --posto-libero-bg: #8d8;
+            --posto-occupato-bg: #d88;
+
+            display: grid;
+            grid-template-columns: repeat(15, 1fr);
+            grid-template-rows: repeat(16, 1fr);
+
+            gap: 0.25rem;
+
+            aspect-ratio: 15 / 16;
+
+            width: calc(15 * 2rem);
+            max-width: 500px;
+
+            .posto {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                flex-direction: column;
+
+                &.libero {
+                    background: var(--posto-libero-bg);
+                }
+                &.occupato {
+                    background: var(--posto-occupato-bg);
+                }
+
+                border: 2px solid #0004;
+                cursor: pointer;
+
+                &:hover {
+                    border-color: #0006;
+                    border-width: 4px;
+                }
+
+                line-height: 1;
+
+                &::before {
+                    font-size: 12px;
+                    content: 'Posto';
+                }
+                &::after {
+                    font-size: 12px;
+                    content: attr(data-index);
+                }
+            }
         }
 
         .room-bookings {
             display: flex;
             flex-direction: column;
-            border: 1px solid #ddd;
-
-            background: #fff;
 
             min-width: 15rem;
+            width: 100%;
 
-            padding: 0.5rem;
+            padding: 0.75rem 0;
 
             .seat-list {
                 display: flex;
                 flex-direction: column;
 
-                gap: 0.5rem;
-
                 .seat {
+                    padding: 0.25rem 1rem;
+
                     display: grid;
                     grid-template-columns: 1fr auto;
+
+                    height: 2.5rem;
+
+                    &:hover {
+                        background: #0001;
+                    }
+
+                    .name {
+                        display: flex;
+                        align-items: center;
+                    }
+
+                    &.selected {
+                        background: #0002;
+
+                        .name {
+                            font-style: italic;
+                        }
+                    }
                 }
             }
         }
+
+        .room-timeline {
+            padding: 1rem;
+
+            display: flex;
+            flex-direction: row;
+            gap: 0.5rem;
+
+            align-items: center;
+
+            overflow-x: auto;
+
+            button {
+                min-width: 8rem;
+                height: 3rem;
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 1000px) {
+    header {
+        height: unset;
+
+        display: flex;
+        flex-direction: column;
+
+        .nav-cell {
+            position: relative;
+            padding: 0 1rem;
+        }
+    }
+
+    main {
+        .room-main {
+            display: flex;
+            flex-direction: column;
+
+            .room-diagram {
+                width: 200px;
+            }
+
+            .room-timeline {
+                flex-direction: column;
+            }
+        }
     }
 }