fix+add: seats + seat-chooser

public/css/generic.css

@@ -171,3 +171,7 @@ tr {
 .op0 {
     opacity: 0;
 }
+
+.mono {
+    font-family: monospace;
+}

public/css/manage.css

@@ -168,3 +168,24 @@ form .form-group button:hover {
     filter: brightness(1.5);
 }
 
+#showings {
+    display: flex;
+    flex-direction: column;
+}
+
+#showings .showing {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr 0.25fr;
+    gap: 0.5rem;
+    margin: 0.5rem 0;
+    padding: 1rem;
+    background: var(--second-bg);
+    border-radius: 0.5rem;
+}
+
+#showings .showing .actions {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}

public/css/seat-chooser.css

@@ -1,39 +1,95 @@
-:root {
-    --spacing: 1rem;
-}
+/*
+  *  (C) (C) (C) (C) (C)
+ (R)  S   S   S   S   S
+ (R)  S   S   S   S   S
+ (R)  S   S   S   S   S
+ (R)  S   S   S   S   S
+ ...
+ */
 
-.seat-chooser {
-    padding: var(--spacing);
+#seat-chooser {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
     width: 100%;
     height: 100%;
-    position: relative;
-    background: var(--second-bg);
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    overflow: hidden;
-
-    display: grid;
-    grid-template-columns: repeat(var(--cols), 1fr);
-    grid-template-rows: repeat(var(--rows), 1fr);
-    gap: var(--spacing);
 }
 
-.seat-chooser .seat {
-    position: relative;
-    background: #5f5;
-    border: 1px solid #ccc;
+#seat-chooser .row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+}
+
+#seat-chooser .row .seat {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 50px;
+    height: 50px;
+    margin: 5px;
+    border: 1px solid #000;
     border-radius: 5px;
-    overflow: hidden;
+    background-color: #fff;
     cursor: pointer;
-    width: 32px;
-    height: 32px;
-    transition: all 0.3s ease;
 }
 
-.seat-chooser .seat.seat-reserved {
-    background: #f66;
+#seat-chooser .row .seat.linked-left {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-right: 0;
 }
 
-.seat-chooser .seat:hover {
-    background: var(--highlight-bg);
+#seat-chooser .row .seat.linked-right {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-left: 0;
+}
+
+#seat-chooser .row .no-seat {
+    /* this seat DOES NOT EXISTS it's a filler for layout*/
+    border: none;
+    background-color: transparent;
+    cursor: default;
+    width: 50px;
+    height: 50px;
+    margin: 5px;
+}
+
+#seat-chooser .row .seat.selected {
+    background-color: #55f;
+}
+
+#seat-chooser .row .seat.reserved {
+    background-color: #f00;
+}
+
+#seat-chooser .row .seat:hover {
+    filter: brightness(0.8);
+}
+
+#load-screen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #000;
+    z-index: 9999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+div.spinner {
+    width: 40px;
+    height: 40px;
+    border: 4px solid #f3f3f3;
+    border-top: 4px solid #3498db;
+    border-radius: 50%;
+    animation: spin 2s linear infinite;
 }