Versie 1.0

public/css/style.css

@@ -16,6 +16,87 @@ body {
     font-weight: 700;
 }
 
+.category-item {
+    display: grid;
+    gap: 1rem;
+}
+
+.category-edit-form {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 1rem;
+    align-items: end;
+}
+
+.category-fields {
+    display: grid;
+    grid-template-columns: 5rem minmax(0, 1fr);
+    gap: .75rem;
+}
+
+.category-icon-input {
+    text-align: center;
+}
+
+.category-actions button {
+    white-space: nowrap;
+}
+
+.product-actions {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
+    gap: .5rem;
+    margin-top: 1.5rem;
+    align-items: stretch;
+}
+
+.product-actions form,
+.product-actions button,
+.product-actions a {
+    width: 100%;
+}
+
+.product-actions a {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.category-actions {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: .5rem;
+}
+
+.category-actions form,
+.category-actions button {
+    width: 100%;
+}
+
+@media (max-width: 767.98px) {
+    .category-item {
+        padding: 1rem;
+    }
+
+    .category-edit-form,
+    .category-fields {
+        grid-template-columns: 1fr;
+    }
+
+    .category-edit-form {
+        display: contents;
+    }
+
+    .product-actions {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .product-actions a {
+        grid-column: 1 / -1;
+    }
+
+}
+
 .alert {
 
     animation: fadeIn .3s ease;

public/js/app.js

@@ -1,7 +1,16 @@
 (() => {
+    const logoutLink = document.querySelector('a[href="/logout"]');
+    if (!logoutLink) return;
+
     const socket = window.io && window.io();
     if (!socket) return;
 
+    logoutLink.addEventListener("click", (event) => {
+        event.preventDefault();
+        socket.disconnect();
+        window.location.assign(logoutLink.href);
+    });
+
     const listMatch = window.location.pathname.match(/^\/lists\/(\d+)$/);
     if (listMatch) socket.emit("list:join", listMatch[1]);