Better form styling and minor grid seats adjustments

client/index.html

@@ -40,57 +40,57 @@
                 </div> -->
                 <div class="room-grid">
                     <div
-                        class="posto libero"
+                        class="posto"
                         data-seat-id="aula-stud/posto-1"
                         style="grid-column: 3 / span 4; grid-row: 1 / span 2"
                     ></div>
                     <div
-                        class="posto libero"
+                        class="posto"
                         data-seat-id="aula-stud/posto-2"
                         style="grid-column: 7 / span 4; grid-row: 1 / span 2"
                     ></div>
                     <div
-                        class="posto libero"
+                        class="posto"
                         data-seat-id="aula-stud/posto-3"
                         style="grid-column: 1 / span 2; grid-row: 3 / span 4"
                     ></div>
                     <div
-                        class="posto libero"
+                        class="posto"
                         data-seat-id="aula-stud/posto-4"
                         style="grid-column: 1 / span 2; grid-row: 7 / span 4"
                     ></div>
                     <div
-                        class="posto mio"
+                        class="posto"
                         data-seat-id="aula-stud/posto-5"
                         style="grid-column: 3 / span 4; grid-row: 11 / span 2"
                     ></div>
                     <div
-                        class="posto occupato"
+                        class="posto"
                         data-seat-id="aula-stud/posto-6"
                         style="grid-column: 7 / span 4; grid-row: 11 / span 2"
                     ></div>
                     <div
-                        class="posto occupato"
+                        class="posto"
                         data-seat-id="aula-stud/posto-7"
                         style="grid-column: 8 / span 2; grid-row: 5 / span 4"
                     ></div>
                     <div
-                        class="posto occupato"
+                        class="posto"
                         data-seat-id="aula-stud/posto-8"
                         style="grid-column: 14 / span 2; grid-row: 1 / span 4"
                     ></div>
                     <div
-                        class="posto occupato"
+                        class="posto"
                         data-seat-id="aula-stud/posto-9"
                         style="grid-column: 14 / span 2; grid-row: 5 / span 4"
                     ></div>
                     <div
-                        class="posto occupato"
+                        class="posto"
                         data-seat-id="aula-stud/posto-10"
                         style="grid-column: 14 / span 2; grid-row: 9 / span 4"
                     ></div>
                     <div
-                        class="posto occupato"
+                        class="posto"
                         data-seat-id="aula-stud/posto-11"
                         style="grid-column: 14 / span 2; grid-row: 13 / span 4"
                     ></div>

client/login.html

@@ -22,14 +22,14 @@
         <main>
             <div class="form">
                 <h3 class="fill-row">Login</h3>
-                <p id="error-string" class="error fill-row hidden"></p>
+                <p id="error-string" class="error fill-row gap-above-l hidden"></p>
 
-                <label for="login-username"> Username </label>
+                <label class="gap-above-l" for="login-username"> Username </label>
-                <input type="text" id="input-login-username" />
+                <input type="text" id="input-login-username" class="gap-above-s" />
-                <label for="login-password"> Password </label>
+                <label class="gap-above-s" for="login-password"> Password </label>
-                <input type="password" id="input-login-password" />
+                <input type="password" id="input-login-password" class="gap-above-s" />
 
-                <button id="button-login" class="fill-row">Login</button>
+                <button id="button-login" class="fill-row gap-above-l">Login</button>
             </div>
         </main>
         <script type="module" src="./src/pages/login.js"></script>

client/src/components/tooltip.js

@@ -8,6 +8,8 @@ export function attachTooltip() {
 
         LISTENERS.find(listener => listener(e.target))
     })
+
+    resetTooltip()
 }
 
 export function addTooltipElementListener(callbackFn) {

client/src/style.scss

@@ -20,6 +20,15 @@ body {
 // Utility Classes
 //
 
+@keyframes rotating {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
 @mixin panel {
     background: #fff;
     box-shadow: 0 0 8px 0px #0001, 0 0 16px 8px #0001;
@@ -92,6 +101,33 @@ a:visited {
     }
 }
 
+button {
+    border: none;
+    background: #ddd;
+    padding: 0 0.75rem;
+    height: 2rem;
+    border-radius: 3px;
+    color: #222;
+    box-shadow: 0 2px 12px 2px #0002, 0 1px 3px 0px #0003;
+    cursor: pointer;
+
+    &:hover {
+        background: #d0d0d0;
+    }
+}
+
+input[type='text'],
+input[type='password'],
+textarea {
+    border: none;
+    background: #fff;
+    padding: 0 0.25rem;
+    min-height: 2rem;
+    border-radius: 3px;
+    color: #222;
+    box-shadow: 0 0 12px 2px #0001, 0 1px 3px 1px #0002;
+}
+
 //
 // General Page Structure
 //
@@ -178,7 +214,7 @@ main {
     display: grid;
     grid-template-columns: auto 1fr;
 
-    gap: 0.5rem 1rem;
+    gap: 0 1rem;
 
     .error {
         color: #d00;
@@ -188,6 +224,30 @@ main {
         grid-column: 1 / span 2;
         place-self: center;
     }
+
+    .gap-above-s {
+        margin-top: 0.5rem;
+    }
+    .gap-above-l {
+        margin-top: 1rem;
+    }
+
+    input[type='text'],
+    input[type='password'],
+    textarea {
+        width: 100%;
+    }
+
+    button {
+        padding: 0 1.5rem;
+    }
+
+    @media screen and (max-width: $media-small-device-size) {
+        grid-template-columns: 1fr;
+        .fill-row {
+            grid-column: 1 / span 1;
+        }
+    }
 }
 
 .room-diagram {
@@ -229,6 +289,8 @@ main {
             justify-content: center;
             flex-direction: column;
 
+            background: #f0f0f0;
+
             &.mio {
                 background: var(--posto-mio-occupato-bg);
             }
@@ -249,7 +311,11 @@ main {
 
             line-height: 1;
 
-            // @media screen and (min-width: $media-small-device-size) {
+            &:not(.mio, .libero, .occupato)::before {
+                font-size: 12px;
+                content: '';
+            }
+
             &::before {
                 font-size: 12px;
                 content: 'Posto';
@@ -258,7 +324,6 @@ main {
                 font-size: 12px;
                 content: attr(data-index);
             }
-            // }
         }
     }
 
@@ -491,7 +556,3 @@ body {
 //         }
 //     }
 // }
-
-img {
-    transform: rotate(180deg);
-}

server/db/database.go

@@ -90,7 +90,7 @@ func NewInMemoryStore() Store {
 	}
 
 	db.seats["aula-stud/posto-7"].OccupiedBy = []string{"aziis98"}
-	db.seats["aula-stud/posto-8"].OccupiedBy = []string{"jack"}
+	db.seats["aula-stud/posto-1"].OccupiedBy = []string{"bachoseven"}
 
 	db.users["aziis98"] = &User{
 		ID:          "aziis98",