diff --git a/server/static/base.css b/server/static/base.css index bd23ac9..18a6f75 100644 --- a/server/static/base.css +++ b/server/static/base.css @@ -1,162 +1,149 @@ :root { - --surface: #fff8f0; - --surface-low: #faf3e7; - --surface-highest: #ede3d4; - --surface-white: #ffffff; - --primary: #8c4d50; - --primary-container: #fcacaf; - --on-primary: #ffffff; - --on-surface: #363227; - --on-surface-dim: #645f52; - --outline: #b9b1a3; - --outline-dim: #d4cdbe; - --error: #ba1a1a; - --error-container: #ffdad6; - --success-bg: #dcfce7; - --success-text: #166534; - --warning-bg: #fef08a; - --warning-text: #854d0e; - --danger-bg: #fee2e2; - --danger-text: #991b1b; + --surface: #fff8f0; + --surface-low: #faf3e7; + --surface-highest: #ede3d4; + --surface-white: #ffffff; + --primary: #8c4d50; + --primary-container: #fcacaf; + --on-primary: #ffffff; + --on-surface: #363227; + --on-surface-dim: #645f52; + --outline: #b9b1a3; + --outline-dim: #d4cdbe; + --error: #ba1a1a; + --error-container: #ffdad6; + --success-bg: #dcfce7; + --success-text: #166534; + --warning-bg: #fef08a; + --warning-text: #854d0e; + --danger-bg: #fee2e2; + --danger-text: #991b1b; - --space-xs: 0.25rem; - --space-sm: 0.5rem; - --space-md: 1rem; - --space-lg: 1.5rem; - --space-xl: 2rem; + --space-xs: 0.25rem; + --space-sm: 0.5rem; + --space-md: 1rem; + --space-lg: 1.5rem; + --space-xl: 2rem; - --sidebar-w: 17.5rem; - --sidebar-w-collapsed: 3.5rem; - --topnav-h: 3.5rem; + --sidebar-w: 17.5rem; + --topnav-h: 3.5rem; - --radius-sm: 0.25rem; - --radius-md: 0.5rem; - --radius-lg: 0.75rem; - --radius-full: 9999px; + --radius-sm: 0.25rem; + --radius-md: 0.5rem; + --radius-lg: 0.75rem; + --radius-full: 9999px; - --font: "Inter", system-ui, -apple-system, sans-serif; - --transition: 0.15s ease; + --font: "Inter", system-ui, -apple-system, sans-serif; } -*, *::before, *::after { - box-sizing: border-box; - margin: 0; - padding: 0; +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; } -html, body { - height: 100%; - overflow: hidden; +html, +body { + height: 100%; + overflow: hidden; } body { - font-family: var(--font); - font-size: 1rem; - line-height: 1.5; - color: var(--on-surface); - background: var(--surface); + font-family: var(--font); + font-size: 1rem; + line-height: 1.5; + color: var(--on-surface); + background: var(--surface); } h1 { - font-size: 1.25rem; - font-weight: 700; - letter-spacing: -0.01em; + font-size: 1.25rem; + font-weight: 700; + letter-spacing: -0.01em; } h2 { - font-size: 1rem; - font-weight: 600; - display: flex; - align-items: center; - gap: var(--space-sm); + font-size: 1rem; + font-weight: 600; + display: flex; + align-items: center; + gap: var(--space-sm); } table { - width: 100%; - border-collapse: collapse; + width: 100%; + border-collapse: collapse; } -th, td { - text-align: left; - padding: var(--space-sm) var(--space-sm); - font-size: 0.875rem; - white-space: nowrap; +th, +td { + text-align: left; + padding: var(--space-sm); + font-size: 0.875rem; + white-space: nowrap; } th { - text-transform: uppercase; - letter-spacing: 0.04em; - font-weight: 600; - color: var(--on-surface-dim); - font-size: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.04em; + font-weight: 600; + color: var(--on-surface-dim); + font-size: 0.75rem; } td { - color: var(--on-surface); - border-bottom: 1px solid var(--outline-dim); + color: var(--on-surface); + border-bottom: 1px solid var(--outline-dim); } -tbody tr { - transition: background var(--transition); - height: 2.5rem; +input, +select, +textarea { + font: inherit; + font-size: 0.875rem; + height: 2rem; + padding: 0 var(--space-sm); + border: 1px solid var(--outline-dim); + border-radius: var(--radius-sm); + background: var(--surface-white); + color: var(--on-surface); + outline: none; + width: 100%; } -tbody tr:hover { - background: var(--surface-low); -} - -input, select, textarea { - font: inherit; - font-size: 0.875rem; - height: 2rem; - padding: 0 var(--space-sm); - border: 1px solid var(--outline-dim); - border-radius: var(--radius-sm); - background: var(--surface-white); - color: var(--on-surface); - outline: none; - width: 100%; - transition: border-color var(--transition); -} - -input:focus, select:focus, textarea:focus { - border-color: var(--primary); -} - -input::placeholder, select::placeholder, textarea::placeholder { - color: var(--on-surface-dim); - opacity: 0.6; +input:focus, +select:focus, +textarea:focus { + border-color: var(--primary); } textarea { - height: auto; - padding: var(--space-sm); - resize: vertical; + height: auto; + padding: var(--space-sm); + resize: vertical; } select { - appearance: auto; + appearance: auto; } button { - font: inherit; - cursor: pointer; + font: inherit; + cursor: pointer; } a { - color: inherit; - text-decoration: none; + color: inherit; + text-decoration: none; } -ul, ol { - list-style: none; -} - -.htmx-request { - opacity: 0.6; - pointer-events: none; +ul, +ol { + list-style: none; } .hidden { - display: none !important; + display: none !important; } diff --git a/server/static/components.css b/server/static/components.css index e3b20ec..e513816 100644 --- a/server/static/components.css +++ b/server/static/components.css @@ -1,9 +1,7 @@ -/* ===== Material Icons sizing ===== */ .material-symbols-outlined { font-size: 1.25rem; } -/* ===== Card ===== */ .card { background: var(--surface-white); border: 1px solid var(--outline-dim); @@ -55,7 +53,6 @@ max-width: 30rem; } -/* ===== Button ===== */ .btn { display: inline-flex; align-items: center; @@ -68,7 +65,6 @@ font-size: 0.875rem; font-weight: 600; cursor: pointer; - transition: all var(--transition); text-decoration: none; white-space: nowrap; } @@ -78,20 +74,12 @@ color: var(--on-primary); } -.btn-primary:hover { - opacity: 0.9; -} - .btn-outline { background: transparent; border: 1px solid var(--outline-dim); color: var(--on-surface); } -.btn-outline:hover { - background: var(--surface-highest); -} - .btn-sm { height: 2rem; padding: 0 var(--space-sm); @@ -101,7 +89,6 @@ .btn-icon { color: var(--on-surface-dim); cursor: pointer; - transition: color var(--transition); background: none; border: none; padding: var(--space-xs); @@ -111,11 +98,6 @@ justify-content: center; } -.btn-icon:hover { - color: var(--primary); - background: var(--surface-low); -} - .btn-icon .material-symbols-outlined { font-size: 1.25rem; } @@ -123,7 +105,6 @@ .remove { color: var(--error); cursor: pointer; - transition: opacity var(--transition); background: none; border: none; display: inline-flex; @@ -133,16 +114,10 @@ border-radius: var(--radius-sm); } -.remove:hover { - opacity: 0.8; - background: var(--error-container); -} - .remove .material-symbols-outlined { font-size: 1rem; } -/* ===== Tag chip ===== */ .tag-chip { display: inline-flex; align-items: center; @@ -155,7 +130,6 @@ border: 1px solid var(--outline-dim); cursor: pointer; user-select: none; - transition: all var(--transition); white-space: nowrap; } @@ -164,7 +138,7 @@ padding: 0.125rem 0.375rem; } -.tag-chip:hover, .tag-chip.active { +.tag-chip.active { color: var(--primary); border-color: var(--primary); background: var(--primary-container); @@ -187,14 +161,6 @@ gap: var(--space-xs); } -.tag-group { - margin-top: var(--space-xs); - display: flex; - flex-wrap: wrap; - gap: 0.125rem; -} - -/* ===== Toggle group ===== */ .toggle-group { display: flex; height: 2rem; @@ -211,7 +177,6 @@ font-size: 0.875rem; font-weight: 600; cursor: pointer; - transition: all var(--transition); padding: 0 var(--space-sm); } @@ -224,26 +189,12 @@ color: var(--on-primary); } -.toggle-btn:not(.active):hover { - background: var(--surface-highest); -} - -/* ===== Data table ===== */ -.data-table tbody tr:nth-child(even) { - background: var(--surface); -} - -.data-table tbody tr:nth-child(even):hover { - background: var(--surface-low); -} - .data-table .order-id { font-weight: 700; color: var(--primary); text-decoration: none; } -/* ===== Search ===== */ .search { position: relative; } @@ -263,7 +214,6 @@ font-size: 0.875rem; } -/* ===== Metrics grid ===== */ .metrics-grid { display: grid; grid-template-columns: repeat(2, 1fr); @@ -305,7 +255,6 @@ font-weight: 600; } -/* ===== Split pane (order form) ===== */ .split-pane { display: flex; flex-direction: column; @@ -338,20 +287,33 @@ #basket-items { flex: 1; overflow-y: auto; - padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); + min-height: 0; +} + +#basket-items:empty { + display: none; } #basket-items > li { display: flex; align-items: flex-start; gap: var(--space-sm); - padding-bottom: var(--space-sm); + padding: 0 var(--space-md) var(--space-sm); border-bottom: 1px solid var(--outline-dim); } +#basket-items > li:first-child { + padding-top: var(--space-md); +} + +#basket-items > li:last-child { + border-bottom: none; + padding-bottom: var(--space-md); +} + .basket-item-body { flex: 1; min-width: 0; @@ -439,11 +401,6 @@ justify-content: center; gap: var(--space-sm); cursor: pointer; - transition: opacity var(--transition); -} - -.btn-finalize:hover { - opacity: 0.9; } @media (min-width: 64em) { @@ -456,13 +413,6 @@ } } -/* ===== Catalogue grid ===== */ -.catalogue-search { - display: flex; - align-items: center; - gap: var(--space-sm); -} - .catalogue-scroll { overflow-y: auto; padding: var(--space-md); @@ -482,11 +432,6 @@ flex-direction: column; justify-content: space-between; background: var(--surface); - transition: border-color var(--transition); -} - -#catalogue-grid > li:hover { - border-color: var(--outline); } #catalogue-grid > li > div:first-child { @@ -543,7 +488,6 @@ border-radius: var(--radius-sm); cursor: pointer; font-size: 1rem; - transition: all var(--transition); } #catalogue-grid .qty .material-symbols-outlined { @@ -555,21 +499,11 @@ color: var(--on-surface-dim); } -#catalogue-grid .qty.minus:hover { - background: var(--outline-dim); - color: var(--on-surface); -} - #catalogue-grid .qty.plus { background: var(--surface-highest); color: var(--on-surface); } -#catalogue-grid .qty.plus:hover { - background: var(--primary); - color: var(--on-primary); -} - #catalogue-grid .value { font-size: 0.75rem; font-weight: 500; @@ -577,7 +511,6 @@ text-align: center; } -/* ===== Overlay / Drawer ===== */ .overlay { position: fixed; inset: 0; @@ -605,12 +538,6 @@ display: flex; flex-direction: column; box-shadow: -0.25rem 0 1.5rem rgba(0, 0, 0, 0.15); - animation: slideIn 0.2s ease; -} - -@keyframes slideIn { - from { transform: translateX(100%); } - to { transform: translateX(0); } } .overlay-panel > header { @@ -641,18 +568,13 @@ justify-content: center; } -.overlay-panel > header .close-btn:hover { - background: var(--surface-highest); - color: var(--on-surface); -} - .overlay-body { flex: 1; overflow-y: auto; padding: var(--space-lg); } -.overlay-body > div { +.overlay-body { display: flex; flex-direction: column; gap: var(--space-sm); @@ -673,19 +595,16 @@ border-top: 1px solid var(--outline-dim); } -/* ===== Button center (special cakes card) ===== */ .button-center { padding: var(--space-md); text-align: center; } -/* ===== Catalogue card ===== */ .card-catalogue { flex: 1; min-height: 12.5rem; } -/* ===== Form grid ===== */ .form-grid { display: grid; grid-template-columns: repeat(3, 1fr); @@ -742,7 +661,6 @@ textarea + label { grid-column: span 2; } -/* ===== Horizontal group ===== */ .horizontal-group { display: flex; gap: var(--space-sm); @@ -750,7 +668,6 @@ textarea + label { flex-wrap: wrap; } -/* ===== Form actions ===== */ .form-actions { display: flex; justify-content: flex-end; @@ -758,7 +675,6 @@ textarea + label { padding-top: var(--space-sm); } -/* ===== Preset group (date filter) ===== */ .preset-group { display: flex; } @@ -773,11 +689,10 @@ textarea + label { align-items: center; } -.preset-btn:hover, .preset-btn.active { +.preset-btn.active { color: var(--primary); } -/* ===== Filter bar ===== */ .filter-bar { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--outline-dim); @@ -793,14 +708,12 @@ textarea + label { color: var(--on-surface-dim); } -/* ===== Header actions ===== */ .header-actions { display: flex; align-items: center; gap: var(--space-sm); } -/* ===== Confirmation ===== */ .confirmation { display: flex; flex-direction: column; @@ -816,7 +729,6 @@ textarea + label { color: var(--success-text); } -/* ===== Breakdown list ===== */ .breakdown-list { list-style: none; } @@ -838,7 +750,6 @@ textarea + label { font-size: 0.875rem; } -/* ===== Icon ===== */ .icon { width: 2rem; height: 2rem; @@ -854,7 +765,6 @@ textarea + label { color: var(--primary); } -/* ===== Text utilities ===== */ .text-right { text-align: right; } .text-center { text-align: center; } .text-muted { color: var(--on-surface-dim); font-weight: 400; } @@ -862,9 +772,12 @@ textarea + label { .font-medium { font-weight: 500; } .grow { flex: 1; } -/* ===== Empty state ===== */ .empty-state { text-align: center; padding: var(--space-md) 0; color: var(--on-surface-dim); } + +.hide { + display: none; +} diff --git a/server/static/layout.css b/server/static/layout.css index df8d3ac..b699ee5 100644 --- a/server/static/layout.css +++ b/server/static/layout.css @@ -8,11 +8,6 @@ body { height: 100dvh; } -body.sidebar-collapsed { - grid-template-columns: var(--sidebar-w-collapsed) 1fr; -} - -/* ===== Sidebar ===== */ aside { grid-area: sidebar; background: var(--surface-white); @@ -23,27 +18,6 @@ aside { gap: var(--space-sm); overflow: hidden; z-index: 40; - transition: width 0.2s ease, padding 0.2s ease; -} - -aside > .collapse-btn { - background: none; - border: none; - cursor: pointer; - color: var(--on-surface-dim); - padding: var(--space-xs); - border-radius: var(--radius-sm); - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - width: 2rem; - height: 2rem; -} - -aside > .collapse-btn:hover { - background: var(--surface-highest); - color: var(--on-surface); } aside > .cta { @@ -61,11 +35,6 @@ aside > .cta { font-weight: 600; cursor: pointer; text-decoration: none; - transition: opacity var(--transition); -} - -aside > .cta:hover { - opacity: 0.9; } aside > nav { @@ -85,12 +54,6 @@ aside > nav > a { font-weight: 500; text-decoration: none; color: var(--on-surface-dim); - transition: all var(--transition); -} - -aside > nav > a:hover { - background: var(--surface-low); - color: var(--on-surface); } aside > nav > a.active { @@ -99,33 +62,6 @@ aside > nav > a.active { font-weight: 700; } -body.sidebar-collapsed aside { - width: var(--sidebar-w-collapsed); - padding: var(--space-xs); - align-items: center; -} - -body.sidebar-collapsed aside > .cta { - width: 2.5rem; - height: 2.5rem; - padding: 0; - border-radius: 50%; -} - -body.sidebar-collapsed aside > .cta span:not(.material-symbols-outlined) { - display: none; -} - -body.sidebar-collapsed aside > nav > a { - justify-content: center; - padding: var(--space-sm); -} - -body.sidebar-collapsed aside > nav > a span:not(.material-symbols-outlined) { - display: none; -} - -/* ===== Topnav ===== */ .topnav { grid-area: topnav; border-bottom: 1px solid var(--outline-dim); @@ -165,7 +101,6 @@ body.sidebar-collapsed aside > nav > a span:not(.material-symbols-outlined) { pointer-events: none; } -/* ===== Main ===== */ main { grid-area: main; overflow-y: auto; @@ -180,7 +115,6 @@ main { flex: 1; } -/* ===== Responsive ===== */ @media (max-width: 64em) { .topnav > .search { width: 10rem; @@ -189,9 +123,8 @@ main { @media (max-width: 48em) { aside { - width: var(--sidebar-w-collapsed); + width: var(--sidebar-w); padding: var(--space-xs); - align-items: center; } aside > .cta { @@ -214,17 +147,6 @@ main { display: none; } - body.sidebar-collapsed aside { - width: 0; - padding: 0; - overflow: hidden; - border-right: none; - } - - body.sidebar-collapsed { - grid-template-columns: 0 1fr; - } - .topnav { padding: 0 var(--space-sm); } diff --git a/server/static/order.js b/server/static/order.js index 67c2b56..0d5a205 100644 --- a/server/static/order.js +++ b/server/static/order.js @@ -3,13 +3,6 @@ var editingSpecialId = null; var activeCatalogueTags = []; var activeCakeTags = []; -// ====== Sidebar ====== -function toggleSidebar() { - document.body.classList.toggle('sidebar-collapsed'); - localStorage.setItem('sidebarCollapsed', document.body.classList.contains('sidebar-collapsed')); -} - -// ====== Overlay ====== function openSpecialCakeOverlay() { editingSpecialId = null; document.getElementById('sc-overlay-title').textContent = 'Dodaj tort specjalny'; @@ -148,7 +141,6 @@ function removeSpecialCake(btn) { updateTotals(); } -// ====== Basket ====== function changeCake(id, name, price, delta) { var input = document.querySelector('[name="cake[' + id + ']"]'); if (input != null) { @@ -193,7 +185,6 @@ function removeCake(btn) { updateCatalogueQty(id, 0); } -// ====== Totals ====== function updatePrepaid() { var paid = Number(document.querySelector('[name="paid"]')?.value || 0); document.getElementById('paid-amount').innerText = paid.toFixed(2) + ' PLN'; @@ -222,7 +213,6 @@ function updateCatalogueQty(id, qty) { if (el) el.innerText = qty; } -// ====== Catalogue Filters ====== function toggleCatalogueTagFilter(btn) { var tag = btn.getAttribute('data-tag'); var idx = activeCatalogueTags.indexOf(tag); @@ -257,7 +247,7 @@ function applyCatalogueFilters() { } } } - item.style.display = matchesText && matchesTags ? '' : 'none'; + item.classList.toggle('hide', !(matchesText && matchesTags)); }); } @@ -265,7 +255,6 @@ function filterCatalogue(input) { applyCatalogueFilters(); } -// ====== Cakes Table Filters ====== function toggleCakeTagFilter(btn) { var tag = btn.getAttribute('data-tag'); var idx = activeCakeTags.indexOf(tag); @@ -278,17 +267,16 @@ function toggleCakeTagFilter(btn) { } var rows = document.querySelectorAll('#cakes-table tbody tr'); for (var i = 0; i < rows.length; i++) { - if (activeCakeTags.length === 0) { rows[i].style.display = ''; continue; } + if (activeCakeTags.length === 0) { rows[i].classList.remove('hide'); continue; } var rowTags = (rows[i].getAttribute('data-tags') || '').split(','); var match = false; for (var j = 0; j < activeCakeTags.length; j++) { if (rowTags.indexOf(activeCakeTags[j]) >= 0) { match = true; break; } } - rows[i].style.display = match ? '' : 'none'; + rows[i].classList.toggle('hide', !match); } } -// ====== Order Table Filters ====== function filterOrders(input) { var q = input.value.toLowerCase(); var table = input.closest('.card').querySelector('.data-table'); @@ -297,11 +285,10 @@ function filterOrders(input) { for (var i = 0; i < rows.length; i++) { var id = rows[i].children[0].textContent.toLowerCase(); var customer = rows[i].children[1].textContent.toLowerCase(); - rows[i].style.display = id.includes(q) || customer.includes(q) ? '' : 'none'; + rows[i].classList.toggle('hide', !(id.includes(q) || customer.includes(q))); } } -// ====== Location Toggle ====== function setLocation(btn, value) { var group = btn.closest('.toggle-group'); group.querySelectorAll('.toggle-btn').forEach(function(b) { b.classList.remove('active'); }); @@ -309,7 +296,6 @@ function setLocation(btn, value) { group.querySelector('input[type="hidden"]').value = value; } -// ====== Blocked Date Confirmation ====== function confirmBlockedDate(form) { var date = form.querySelector('[name="date"]').value; var blocked = JSON.parse(form.getAttribute('data-blocked-dates') || '[]'); @@ -320,7 +306,6 @@ function confirmBlockedDate(form) { return true; } -// ====== Init ====== function initOrderPage() { var form = document.querySelector('.order-form'); if (!form) return; @@ -338,19 +323,13 @@ function initOrderPage() { function setActiveLink() { var path = window.location.pathname; - var links = document.querySelectorAll('.link'); + var links = document.querySelectorAll('nav > a'); for (var i = 0; i < links.length; i++) { links[i].classList.toggle('active', links[i].getAttribute('href') === path); } } -function setSidebarState() { - var collapsed = localStorage.getItem('sidebarCollapsed') === 'true'; - document.body.classList.toggle('sidebar-collapsed', collapsed); -} - document.addEventListener('DOMContentLoaded', function() { - setSidebarState(); setActiveLink(); initOrderPage(); }); diff --git a/server/templates/nav.templ b/server/templates/nav.templ index 1df87ab..01b8690 100644 --- a/server/templates/nav.templ +++ b/server/templates/nav.templ @@ -1,23 +1,20 @@ package templates templ Nav() { - - menu - add Nowe zamówienie - + dashboard Panel główny - + inventory_2 Katalog - + event_busy Terminy zablokowane diff --git a/server/templates/order.templ b/server/templates/order.templ index 5db585c..621acb2 100644 --- a/server/templates/order.templ +++ b/server/templates/order.templ @@ -52,10 +52,7 @@ templ OrderForm(order models.Order, catalogue []models.Cake, allTags []models.Ta Zaliczka - - Uwagi - - + diff --git a/server/templates/overlay.templ b/server/templates/overlay.templ index 30d6336..68401da 100644 --- a/server/templates/overlay.templ +++ b/server/templates/overlay.templ @@ -20,38 +20,35 @@ templ SpecialCakeOverlay(allTags []models.Tag) { - - Nazwa * - - Cena * - - Wielkość - - Kształt - - — - Okrągły - Kwadrat - - Smak - - Notatki - - if len(allTags) > 0 { - Tagi - - for _, t := range allTags { - - - { t.Name } - - } - - - - - } - + Nazwa * + + Cena * + + Wielkość + + Kształt + + — + Okrągły + Kwadrat + + Smak + + Notatki + + if len(allTags) > 0 { + Tagi + + for _, t := range allTags { + + + { t.Name } + + } + + Nowy tag + + }