refactoring html and css
This commit is contained in:
bronkuu
parent
8194cea85e
commit
a91b196e64
16 changed files with 1299 additions and 1383 deletions
73
server/static/base.css
Normal file
73
server/static/base.css
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
:root {
|
||||
--surface: #fff8f0;
|
||||
--surface-container-low: #faf3e7;
|
||||
--surface-container: #f5ede0;
|
||||
--surface-container-high: #ede3d4;
|
||||
--surface-container-highest: #e5d9c8;
|
||||
--surface-container-lowest: #ffffff;
|
||||
--surface-bright: #fff8f0;
|
||||
--surface-dim: #e5d9c8;
|
||||
--primary: #8c4d50;
|
||||
--primary-hover: #7a3f42;
|
||||
--primary-container: #fcacaf;
|
||||
--on-primary: #ffffff;
|
||||
--on-surface: #363227;
|
||||
--on-surface-variant: #645f52;
|
||||
--outline: #b9b1a3;
|
||||
--outline-variant: #d4cdbe;
|
||||
--secondary: #b45309;
|
||||
--secondary-container: #fd8a42;
|
||||
--on-secondary-container: #682c00;
|
||||
--error: #ba1a1a;
|
||||
--error-container: #ffdad6;
|
||||
--on-error-container: #93000a;
|
||||
--success-bg: #dcfce7;
|
||||
--success-text: #166534;
|
||||
--warning-bg: #fef08a;
|
||||
--warning-text: #854d0e;
|
||||
--danger-bg: #fee2e2;
|
||||
--danger-text: #991b1b;
|
||||
--info-bg: #f1f5f9;
|
||||
--info-text: #475569;
|
||||
--sidebar-width: 17.5rem;
|
||||
--topnav-height: 3.5rem;
|
||||
--border-radius-sm: 0.25rem;
|
||||
--border-radius-md: 0.5rem;
|
||||
--border-radius-lg: 0.75rem;
|
||||
--border-radius-full: 9999px;
|
||||
--font-family: "Inter", system-ui, -apple-system, sans-serif;
|
||||
--transition: 0.15s ease;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-family);
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
color: var(--on-surface);
|
||||
background: var(--surface);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
input, select, textarea, button {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.htmx-request {
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
116
server/static/basket.css
Normal file
116
server/static/basket.css
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
/* ========== ORDER SUMMARY ========== */
|
||||
#basket-items {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
list-style: none;
|
||||
|
||||
> li {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid var(--outline-variant);
|
||||
|
||||
> div:first-child {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--on-surface);
|
||||
}
|
||||
|
||||
.detail {
|
||||
font-size: 0.75rem;
|
||||
color: var(--on-surface-variant);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--on-surface);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.remove {
|
||||
color: var(--error);
|
||||
cursor: pointer;
|
||||
transition: opacity var(--transition);
|
||||
background: none;
|
||||
border: none;
|
||||
margin-left: 0.25rem;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.summary-totals {
|
||||
padding: 1rem;
|
||||
border-top: 1px solid var(--outline-variant);
|
||||
background: var(--surface-bright);
|
||||
|
||||
.total-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 0.75rem;
|
||||
color: var(--on-surface-variant);
|
||||
|
||||
+ .total-row {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
&.grand {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: var(--on-surface);
|
||||
padding-top: 0.5rem;
|
||||
border-top: 1px solid var(--outline-variant);
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-finalize {
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
margin-top: 0.5rem;
|
||||
background: var(--primary);
|
||||
color: var(--on-primary);
|
||||
border: none;
|
||||
border-radius: var(--border-radius-sm);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
cursor: pointer;
|
||||
transition: opacity var(--transition);
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
241
server/static/card.css
Normal file
241
server/static/card.css
Normal file
|
|
@ -0,0 +1,241 @@
|
|||
/* ========== CARDS ========== */
|
||||
.card {
|
||||
background: var(--surface-container-lowest);
|
||||
border: 1px solid var(--outline-variant);
|
||||
border-radius: var(--border-radius-md);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
> header {
|
||||
padding: 0.75rem 1rem;
|
||||
border-bottom: 1px solid var(--outline-variant);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: var(--surface-container-low);
|
||||
|
||||
h2 {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--on-surface);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-size: 1.25rem;
|
||||
color: var(--on-surface-variant);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> div,
|
||||
> form {
|
||||
padding: 1rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
> footer {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-top: 1px solid var(--outline-variant);
|
||||
background: var(--surface-container-lowest);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 0.75rem;
|
||||
color: var(--on-surface-variant);
|
||||
}
|
||||
}
|
||||
|
||||
.card > .table-container {
|
||||
overflow-x: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* ========== METRICS GRID ========== */
|
||||
.metrics-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 0.75rem;
|
||||
|
||||
> div {
|
||||
background: var(--surface-container-lowest);
|
||||
border: 1px solid var(--outline-variant);
|
||||
border-radius: var(--border-radius-md);
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
|
||||
.label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: var(--on-surface-variant);
|
||||
letter-spacing: 0.02em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: var(--on-surface);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.change {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
|
||||
&.positive {
|
||||
color: var(--success-text);
|
||||
}
|
||||
|
||||
&.warning {
|
||||
color: var(--warning-text);
|
||||
}
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 64em) {
|
||||
.metrics-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 48em) {
|
||||
.metrics-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== SPLIT PANE ========== */
|
||||
.split-pane {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
|
||||
> div:first-child {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
> aside {
|
||||
width: 20rem;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 64em) {
|
||||
.split-pane {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.split-pane > aside {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== DATA TABLE ========== */
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.75rem;
|
||||
|
||||
thead {
|
||||
background: var(--surface-container-low);
|
||||
border-bottom: 1px solid var(--outline-variant);
|
||||
}
|
||||
|
||||
th {
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--on-surface-variant);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
|
||||
&.right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&.center {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0.5rem 0.75rem;
|
||||
color: var(--on-surface);
|
||||
white-space: nowrap;
|
||||
|
||||
.truncate {
|
||||
max-width: 12.5rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
border-bottom: 1px solid var(--outline-variant);
|
||||
transition: background var(--transition);
|
||||
height: 2.5rem;
|
||||
|
||||
&:hover {
|
||||
background: var(--surface-container-low);
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
background: var(--surface-bright);
|
||||
|
||||
&:hover {
|
||||
background: var(--surface-container-low);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-id {
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.customer {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: var(--on-surface-variant);
|
||||
}
|
||||
}
|
||||
117
server/static/catalogue.css
Normal file
117
server/static/catalogue.css
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
/* ========== CATALOGUE GRID ========== */
|
||||
#catalogue-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr));
|
||||
gap: 0.5rem;
|
||||
|
||||
> li {
|
||||
border: 1px solid var(--outline-variant);
|
||||
border-radius: var(--border-radius-sm);
|
||||
padding: 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background: var(--surface-bright);
|
||||
transition: border-color var(--transition);
|
||||
list-style: none;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--outline);
|
||||
}
|
||||
|
||||
> div:first-child {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: var(--border-radius-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
font-size: 1rem;
|
||||
|
||||
&.cake {
|
||||
background: var(--primary-container);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
&.cookie {
|
||||
background: var(--surface-container-high);
|
||||
color: var(--on-surface-variant);
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--on-surface);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 0.75rem;
|
||||
color: var(--on-surface-variant);
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 0.5rem;
|
||||
padding-top: 0.5rem;
|
||||
border-top: 1px solid var(--outline-variant);
|
||||
|
||||
.qty {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
border-radius: var(--border-radius-sm);
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
transition: all var(--transition);
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&.minus {
|
||||
background: var(--surface-container-low);
|
||||
color: var(--on-surface-variant);
|
||||
|
||||
&:hover {
|
||||
background: var(--outline-variant);
|
||||
color: var(--on-surface);
|
||||
}
|
||||
}
|
||||
|
||||
&.plus {
|
||||
background: var(--surface-container-high);
|
||||
color: var(--on-surface);
|
||||
|
||||
&:hover {
|
||||
background: var(--primary);
|
||||
color: var(--on-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: var(--on-surface);
|
||||
width: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
277
server/static/component.css
Normal file
277
server/static/component.css
Normal file
|
|
@ -0,0 +1,277 @@
|
|||
/* ========== BUTTONS ========== */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0 1rem;
|
||||
height: 2.5rem;
|
||||
border: none;
|
||||
border-radius: var(--border-radius-sm);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition);
|
||||
text-decoration: none;
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
&.primary {
|
||||
background: var(--primary);
|
||||
color: var(--on-primary);
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
&.outline {
|
||||
background: transparent;
|
||||
border: 1px solid var(--outline-variant);
|
||||
color: var(--on-surface);
|
||||
|
||||
&:hover {
|
||||
background: var(--surface-container-high);
|
||||
}
|
||||
}
|
||||
|
||||
&.sm {
|
||||
height: 2rem;
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== TABLE ACTIONS ========== */
|
||||
.action-btn {
|
||||
color: var(--on-surface-variant);
|
||||
cursor: pointer;
|
||||
transition: color var(--transition);
|
||||
background: none;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== STATUS CHIPS ========== */
|
||||
.status-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: var(--border-radius-full);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.02em;
|
||||
|
||||
&.ready,
|
||||
&.done {
|
||||
background: var(--success-bg);
|
||||
color: var(--success-text);
|
||||
}
|
||||
|
||||
&.decorating {
|
||||
background: var(--warning-bg);
|
||||
color: var(--warning-text);
|
||||
}
|
||||
|
||||
&.baking {
|
||||
background: var(--danger-bg);
|
||||
color: var(--danger-text);
|
||||
}
|
||||
|
||||
&.queued {
|
||||
background: var(--info-bg);
|
||||
color: var(--info-text);
|
||||
}
|
||||
|
||||
&.accepted {
|
||||
background: #fff3e0;
|
||||
color: #e65100;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== BADGE PILLS ========== */
|
||||
.badge-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: var(--border-radius-full);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
|
||||
&.signature {
|
||||
background: var(--primary-container);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
&.seasonal {
|
||||
background: var(--surface-container-high);
|
||||
color: var(--on-surface);
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== PAGINATION ========== */
|
||||
.pagination {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
align-items: center;
|
||||
|
||||
.btn {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid var(--outline-variant);
|
||||
border-radius: var(--border-radius-sm);
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
color: var(--on-surface-variant);
|
||||
transition: all var(--transition);
|
||||
font-size: 0.75rem;
|
||||
|
||||
&:hover {
|
||||
background: var(--surface-container-low);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: var(--primary);
|
||||
color: var(--on-primary);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== CONFIRMATION ========== */
|
||||
section.confirmation {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
gap: 0.5rem;
|
||||
text-align: center;
|
||||
|
||||
h2 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--on-surface);
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== LOGIN PAGE ========== */
|
||||
.login-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100dvh;
|
||||
background-color: var(--surface-container-low);
|
||||
}
|
||||
|
||||
.login-card {
|
||||
background-color: var(--surface);
|
||||
border: 1px solid var(--outline-variant);
|
||||
border-radius: var(--border-radius-md);
|
||||
padding: 2.5rem;
|
||||
box-shadow: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.1);
|
||||
width: 100%;
|
||||
max-width: 25rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 0.25rem;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--primary),
|
||||
var(--primary-container)
|
||||
);
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 1.5rem;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1.5rem;
|
||||
color: var(--on-background);
|
||||
text-align: center;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--on-surface-variant);
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid var(--outline-variant);
|
||||
border-radius: var(--border-radius-sm);
|
||||
font-size: 1rem;
|
||||
font-family: inherit;
|
||||
background-color: var(--surface);
|
||||
color: var(--on-surface);
|
||||
transition: border-color var(--transition);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.5rem 2rem;
|
||||
background-color: var(--primary);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: var(--border-radius-md);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
transition: opacity var(--transition);
|
||||
margin-top: 0.5rem;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
82
server/static/form.css
Normal file
82
server/static/form.css
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
/* ========== FORM ========== */
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 64em) {
|
||||
.form-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 48em) {
|
||||
.form-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
|
||||
label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--on-surface-variant);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
}
|
||||
|
||||
.form-input {
|
||||
height: 2rem;
|
||||
padding: 0 0.5rem;
|
||||
border: 1px solid var(--outline-variant);
|
||||
border-radius: var(--border-radius-sm);
|
||||
background: var(--surface-container-lowest);
|
||||
font-size: 0.75rem;
|
||||
color: var(--on-surface);
|
||||
outline: none;
|
||||
transition: border-color var(--transition);
|
||||
width: 100%;
|
||||
|
||||
&:focus {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--on-surface-variant);
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
textarea.form-input {
|
||||
height: auto;
|
||||
padding: 0.5rem;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
select.form-input {
|
||||
appearance: auto;
|
||||
}
|
||||
|
||||
.form-card {
|
||||
max-width: 30rem;
|
||||
|
||||
.card > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
padding-top: 0.5rem;
|
||||
border-top: 1px solid var(--outline-variant);
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
277
server/static/layout.css
Normal file
277
server/static/layout.css
Normal file
|
|
@ -0,0 +1,277 @@
|
|||
/* ========== SIDEBAR ========== */
|
||||
aside.sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: var(--sidebar-width);
|
||||
background: var(--surface-container-lowest);
|
||||
border-right: 1px solid var(--outline-variant);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
z-index: 40;
|
||||
|
||||
.brand {
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 0 0.5rem;
|
||||
|
||||
h1 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.75rem;
|
||||
color: var(--on-surface-variant);
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.cta {
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
background: var(--primary);
|
||||
color: var(--on-primary);
|
||||
border: none;
|
||||
border-radius: var(--border-radius-md);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
margin-bottom: 1.5rem;
|
||||
transition: opacity var(--transition);
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
|
||||
a.link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: var(--border-radius-md);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
color: var(--on-surface-variant);
|
||||
transition: all var(--transition);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: var(--surface-container-low);
|
||||
color: var(--on-surface);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: var(--primary-container);
|
||||
color: var(--primary);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: auto;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid var(--outline-variant);
|
||||
|
||||
.user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.5rem;
|
||||
margin-top: 0.75rem;
|
||||
|
||||
.avatar {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 50%;
|
||||
background: var(--surface-container-high);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--on-surface);
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.name {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--on-surface);
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 0.75rem;
|
||||
color: var(--on-surface-variant);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== MAIN LAYOUT ========== */
|
||||
main {
|
||||
margin-left: var(--sidebar-width);
|
||||
width: calc(100% - var(--sidebar-width));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100dvh;
|
||||
}
|
||||
|
||||
/* ========== TOP NAVBAR ========== */
|
||||
header.topnav {
|
||||
height: var(--topnav-height);
|
||||
border-bottom: 1px solid var(--outline-variant);
|
||||
background: var(--surface);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
padding: 0 1.5rem;
|
||||
flex-shrink: 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 30;
|
||||
|
||||
h1 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--on-surface);
|
||||
letter-spacing: -0.01em;
|
||||
white-space: nowrap;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
search {
|
||||
position: relative;
|
||||
width: 15rem;
|
||||
|
||||
.material-symbols-outlined {
|
||||
position: absolute;
|
||||
left: 0.5rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 1.25rem;
|
||||
color: var(--on-surface-variant);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 0.5rem 0 2rem;
|
||||
border: 1px solid var(--outline-variant);
|
||||
border-radius: var(--border-radius-sm);
|
||||
background: var(--surface-container-lowest);
|
||||
font-size: 0.75rem;
|
||||
color: var(--on-surface);
|
||||
outline: none;
|
||||
transition: border-color var(--transition);
|
||||
|
||||
&:focus {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--on-surface-variant);
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== MAIN CONTENT ========== */
|
||||
.main-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* ========== RESPONSIVE ========== */
|
||||
@media (max-width: 64em) {
|
||||
header.topnav search {
|
||||
width: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 48em) {
|
||||
aside.sidebar {
|
||||
width: 3.5rem;
|
||||
padding: 0.5rem;
|
||||
|
||||
.brand h1,
|
||||
.brand p,
|
||||
nav a.link span:not(.material-symbols-outlined),
|
||||
.cta span:not(.material-symbols-outlined),
|
||||
.user .info {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cta {
|
||||
padding: 0;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
margin: 0 auto 1rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
nav a.link {
|
||||
justify-content: center;
|
||||
padding: 0.75rem 0.5rem;
|
||||
}
|
||||
|
||||
.user {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
margin-left: 3.5rem;
|
||||
width: calc(100% - 3.5rem);
|
||||
}
|
||||
|
||||
header.topnav {
|
||||
padding: 0 0.75rem;
|
||||
|
||||
search {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -3,41 +3,40 @@ function changeCake(id, name, price, delta) {
|
|||
if (input != null) {
|
||||
var qty = Number(input.value) + delta;
|
||||
if (qty <= 0) {
|
||||
var item = input.closest('.summary-item');
|
||||
var item = input.closest('li');
|
||||
if (item) item.remove();
|
||||
updateTotals();
|
||||
updateCatalogueQty(id, 0);
|
||||
return;
|
||||
}
|
||||
input.value = qty;
|
||||
var item = input.closest('.summary-item');
|
||||
item.querySelector('.cake-qty').innerText = qty;
|
||||
item.querySelector('.cake-total').innerText = (price * qty) + ' PLN';
|
||||
var item = input.closest('li');
|
||||
item.querySelector('.qty').innerText = qty;
|
||||
item.querySelector('.price').innerText = (price * qty) + ' PLN';
|
||||
updateTotals();
|
||||
updateCatalogueQty(id, qty);
|
||||
return;
|
||||
}
|
||||
if (delta <= 0) return;
|
||||
var item = document.createElement('div');
|
||||
item.className = 'summary-item';
|
||||
var item = document.createElement('li');
|
||||
item.setAttribute('data-cake-id', id);
|
||||
item.innerHTML =
|
||||
'<div class="summary-item-info">' +
|
||||
'<div class="summary-item-name cake-name">' + name + '</div>' +
|
||||
'<div class="summary-item-detail cake-price">' + price + ' PLN × <span class="cake-qty">1</span></div>' +
|
||||
'<div style="flex:1;min-width:0;padding-right:0.5rem">' +
|
||||
'<div class="name">' + name + '</div>' +
|
||||
'<div class="detail">' + price + ' PLN × <span class="qty">1</span></div>' +
|
||||
'</div>' +
|
||||
'<div class="summary-item-price cake-total">' + price + ' PLN</div>' +
|
||||
'<button type="button" class="summary-item-remove" onclick="removeCake(this)">' +
|
||||
'<div class="price">' + price + ' PLN</div>' +
|
||||
'<button type="button" class="remove" onclick="removeCake(this)">' +
|
||||
'<span class="material-symbols-outlined">close</span>' +
|
||||
'</button>' +
|
||||
'<input type="hidden" name="cake[' + id + ']" value="1">';
|
||||
document.getElementById('basket_items').appendChild(item);
|
||||
document.getElementById('basket-items').appendChild(item);
|
||||
updateTotals();
|
||||
updateCatalogueQty(id, 1);
|
||||
}
|
||||
|
||||
function removeCake(btn) {
|
||||
var item = btn.closest('.summary-item');
|
||||
var item = btn.closest('li');
|
||||
var id = item.getAttribute('data-cake-id');
|
||||
item.remove();
|
||||
updateTotals();
|
||||
|
|
@ -46,11 +45,11 @@ function removeCake(btn) {
|
|||
|
||||
function updateTotals() {
|
||||
var subtotal = 0;
|
||||
var items = document.querySelectorAll('#basket_items .summary-item');
|
||||
var items = document.querySelectorAll('#basket-items li');
|
||||
items.forEach(function(item) {
|
||||
var priceText = item.querySelector('.cake-price').innerText;
|
||||
var priceText = item.querySelector('.detail').innerText;
|
||||
var price = Number(priceText.split(' ')[0]);
|
||||
var qty = Number(item.querySelector('.cake-qty').innerText);
|
||||
var qty = Number(item.querySelector('.qty').innerText);
|
||||
subtotal += price * qty;
|
||||
});
|
||||
var paid = Number(document.querySelector('[name="paid"]')?.value || 0);
|
||||
|
|
@ -66,7 +65,7 @@ function updateCatalogueQty(id, qty) {
|
|||
|
||||
function filterCatalogue(input) {
|
||||
var query = input.value.toLowerCase();
|
||||
var items = document.querySelectorAll('.catalogue-item');
|
||||
var items = document.querySelectorAll('#catalogue-grid > li');
|
||||
items.forEach(function(item) {
|
||||
var name = item.getAttribute('data-name').toLowerCase();
|
||||
item.style.display = name.includes(query) ? '' : 'none';
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -13,7 +13,7 @@ templ CakePage(cake models.Cake) {
|
|||
templ CakeForm(cake models.Cake) {
|
||||
<div class="form-card">
|
||||
<section class="card">
|
||||
<div class="card-header">
|
||||
<header>
|
||||
<h2>
|
||||
<span class="material-symbols-outlined">cake</span>
|
||||
if cake.ID != 0 {
|
||||
|
|
@ -22,8 +22,8 @@ templ CakeForm(cake models.Cake) {
|
|||
Nowe ciasto
|
||||
}
|
||||
</h2>
|
||||
</div>
|
||||
<form method="post" class="card-body">
|
||||
</header>
|
||||
<form method="post">
|
||||
<input type="hidden" name="id" value={ strconv.Itoa(cake.ID) }/>
|
||||
<div class="form-group">
|
||||
<label>Nazwa *</label>
|
||||
|
|
@ -34,8 +34,8 @@ templ CakeForm(cake models.Cake) {
|
|||
<input class="form-input" type="number" name="price" min="0" value={ cake.Price.String() }/>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<a href="/cakes" class="btn btn-outline">Anuluj</a>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<a href="/cakes" class="btn outline">Anuluj</a>
|
||||
<button type="submit" class="btn primary">
|
||||
<span class="material-symbols-outlined">save</span>
|
||||
Zapisz ciasto
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -12,21 +12,21 @@ templ CakesPage(cakes []models.Cake) {
|
|||
|
||||
templ CakesMain(cakes []models.Cake) {
|
||||
<section class="card">
|
||||
<div class="card-header">
|
||||
<header>
|
||||
<h2>
|
||||
<span class="material-symbols-outlined">inventory_2</span>
|
||||
Zarządzanie katalogiem
|
||||
</h2>
|
||||
<a href="/cake" class="btn btn-primary btn-sm">
|
||||
<a href="/cake" class="btn primary sm">
|
||||
<span class="material-symbols-outlined">add</span>
|
||||
Nowe ciasto
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="table-container">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:32px"></th>
|
||||
<th style="width:2rem"></th>
|
||||
<th>Nazwa</th>
|
||||
<th>SKU</th>
|
||||
<th class="right">Cena bazowa</th>
|
||||
|
|
@ -37,12 +37,12 @@ templ CakesMain(cakes []models.Cake) {
|
|||
for _, c := range cakes {
|
||||
<tr>
|
||||
<td>
|
||||
<div class="catalogue-item-icon icon-cake" style="width:28px;height:28px">
|
||||
<span class="material-symbols-outlined" style="font-size:14px">cake</span>
|
||||
<div class="icon cake" style="width:1.75rem;height:1.75rem">
|
||||
<span class="material-symbols-outlined" style="font-size:1rem">cake</span>
|
||||
</div>
|
||||
</td>
|
||||
<td style="font-weight:500">{ c.Name }</td>
|
||||
<td class="text-on-surface-variant">#{ strconv.Itoa(c.ID) }</td>
|
||||
<td class="text-muted">#{ strconv.Itoa(c.ID) }</td>
|
||||
<td class="text-right">{ c.Price.String() } PLN</td>
|
||||
<td class="text-center">
|
||||
<a href={ templ.URL("/cake/" + strconv.Itoa(c.ID)) } class="action-btn">
|
||||
|
|
@ -54,17 +54,5 @@ templ CakesMain(cakes []models.Cake) {
|
|||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="table-footer">
|
||||
<span>Pokazuje 1-{ strconv.Itoa(len(cakes)) } z { strconv.Itoa(len(cakes)) }</span>
|
||||
<div class="pagination">
|
||||
<button class="pagination-btn" disabled>
|
||||
<span class="material-symbols-outlined">chevron_left</span>
|
||||
</button>
|
||||
<button class="pagination-btn active">1</button>
|
||||
<button class="pagination-btn" disabled>
|
||||
<span class="material-symbols-outlined">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,12 +7,12 @@ templ Confirmation(title string, id int) {
|
|||
}
|
||||
|
||||
templ ConfirmationBody(id int) {
|
||||
<div class="confirmation">
|
||||
<span class="material-symbols-outlined" style="font-size:48px;color:var(--success-text)">check_circle</span>
|
||||
<section class="confirmation">
|
||||
<span class="material-symbols-outlined" style="font-size:3rem;color:var(--success-text)">check_circle</span>
|
||||
<h2>{ strconv.Itoa(id) } — zapisano</h2>
|
||||
<a href="/orders" class="btn btn-primary" style="margin-top:16px">
|
||||
<a href="/orders" class="btn primary" style="margin-top:1rem">
|
||||
<span class="material-symbols-outlined">arrow_back</span>
|
||||
Powrót do zamówień
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,28 +9,26 @@ templ Layout(title string, main templ.Component) {
|
|||
<title>{ title } — Zamówienia ciast</title>
|
||||
<link rel="stylesheet" href="/static/fonts/inter.css" />
|
||||
<link rel="stylesheet" href="/static/fonts/material.css" />
|
||||
<link rel="stylesheet" href="/static/style.css" />
|
||||
<script src="/static/htmx2.04.js" defer></script>
|
||||
<script src="/static/order.js"></script>
|
||||
<link rel="stylesheet" href="/static/style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<aside class="sidebar">
|
||||
@Nav()
|
||||
</aside>
|
||||
<div class="app-body">
|
||||
<main>
|
||||
<header class="topnav">
|
||||
<div class="topnav-left">
|
||||
<h1 class="topnav-title">{ title }</h1>
|
||||
</div>
|
||||
<h1>{ title }</h1>
|
||||
</header>
|
||||
<div class="main-content">
|
||||
@main
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
(function() {
|
||||
var path = window.location.pathname;
|
||||
var links = document.querySelectorAll('.sidebar-link');
|
||||
var links = document.querySelectorAll('.link');
|
||||
for (var i = 0; i < links.length; i++) {
|
||||
if (links[i].getAttribute('href') === path) {
|
||||
links[i].classList.add('active');
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
package templates
|
||||
|
||||
templ Nav() {
|
||||
<a href="/order" class="sidebar-cta">
|
||||
<a href="/order" class="cta">
|
||||
<span class="material-symbols-outlined">add</span>
|
||||
<span>Nowe zamówienie</span>
|
||||
</a>
|
||||
<div class="sidebar-nav">
|
||||
<a href="/orders" class="sidebar-link">
|
||||
<nav>
|
||||
<a href="/orders" class="link">
|
||||
<span class="material-symbols-outlined">dashboard</span>
|
||||
<span>Panel główny</span>
|
||||
</a>
|
||||
<a href="/cakes" class="sidebar-link">
|
||||
<a href="/cakes" class="link">
|
||||
<span class="material-symbols-outlined">inventory_2</span>
|
||||
<span>Katalog</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,15 +13,15 @@ templ OrderPage(order models.Order, catalogue []models.Cake) {
|
|||
templ OrderForm(order models.Order, catalogue []models.Cake) {
|
||||
<form method="post" class="split-pane" style="flex:1;min-height:0">
|
||||
<input type="hidden" name="id" value={ strconv.Itoa(order.ID) }/>
|
||||
<div class="split-pane-left">
|
||||
<div style="flex:1;display:flex;flex-direction:column;gap:1rem;min-width:0">
|
||||
<section class="card">
|
||||
<div class="card-header">
|
||||
<header>
|
||||
<h2>
|
||||
<span class="material-symbols-outlined">person_add</span>
|
||||
Dane klienta
|
||||
</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
</header>
|
||||
<div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label>Imię *</label>
|
||||
|
|
@ -67,78 +67,78 @@ templ OrderForm(order models.Order, catalogue []models.Cake) {
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="card" style="flex:1;min-height:200px">
|
||||
<div class="card-header">
|
||||
<section class="card" style="flex:1;min-height:12.5rem">
|
||||
<header>
|
||||
<h2>
|
||||
<span class="material-symbols-outlined">inventory_2</span>
|
||||
Katalog produktów
|
||||
</h2>
|
||||
<div class="topnav-search" style="width:180px">
|
||||
<span class="material-symbols-outlined" style="left:6px;font-size:14px">search</span>
|
||||
<input class="form-input" style="height:28px;padding-left:26px;font-size:12px" type="text" placeholder="Filtruj produkty..." oninput="filterCatalogue(this)"/>
|
||||
<div style="position:relative;width:11.25rem">
|
||||
<span class="material-symbols-outlined" style="position:absolute;left:0.5rem;top:50%;transform:translateY(-50%);font-size:1rem;color:var(--on-surface-variant);pointer-events:none">search</span>
|
||||
<input class="form-input" style="height:1.75rem;padding-left:1.75rem;font-size:0.75rem" type="text" placeholder="Filtruj produkty..." oninput="filterCatalogue(this)"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body" style="overflow-y:auto">
|
||||
<div class="catalogue-grid" id="catalogue-grid">
|
||||
</header>
|
||||
<div style="overflow-y:auto;padding:1rem">
|
||||
<ul id="catalogue-grid">
|
||||
for _, c := range catalogue {
|
||||
<div class="catalogue-item" data-name={ c.Name }>
|
||||
<div class="catalogue-item-top">
|
||||
<div class="catalogue-item-icon icon-cake">
|
||||
<span class="material-symbols-outlined" style="font-size:16px">cake</span>
|
||||
<li data-name={ c.Name }>
|
||||
<div>
|
||||
<div class="icon cake">
|
||||
<span class="material-symbols-outlined" style="font-size:1rem">cake</span>
|
||||
</div>
|
||||
<div style="min-width:0">
|
||||
<div class="catalogue-item-name">{ c.Name }</div>
|
||||
<div class="catalogue-item-price">{ c.Price.String() } PLN</div>
|
||||
<div class="name">{ c.Name }</div>
|
||||
<div class="price">{ c.Price.String() } PLN</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="catalogue-item-actions">
|
||||
<button type="button" class="qty-btn qty-minus" onclick={ templ.JSFuncCall("changeCake", c.ID, c.Name, c.Price, -1) }>
|
||||
<div class="actions">
|
||||
<button type="button" class="qty minus" onclick={ templ.JSFuncCall("changeCake", c.ID, c.Name, c.Price, -1) }>
|
||||
<span class="material-symbols-outlined">remove</span>
|
||||
</button>
|
||||
<span class="qty-value" id={ "qty-" + strconv.Itoa(c.ID) }>0</span>
|
||||
<button type="button" class="qty-btn qty-plus" onclick={ templ.JSFuncCall("changeCake", c.ID, c.Name, c.Price, 1) }>
|
||||
<span class="value" id={ "qty-" + strconv.Itoa(c.ID) }>0</span>
|
||||
<button type="button" class="qty plus" onclick={ templ.JSFuncCall("changeCake", c.ID, c.Name, c.Price, 1) }>
|
||||
<span class="material-symbols-outlined">add</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
}
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<aside class="split-pane-right">
|
||||
<aside style="width:20rem;flex-shrink:0;display:flex;flex-direction:column">
|
||||
<section class="card" style="flex:1;display:flex;flex-direction:column">
|
||||
<div class="card-header">
|
||||
<header>
|
||||
<h2>
|
||||
<span class="material-symbols-outlined">receipt_long</span>
|
||||
Podsumowanie
|
||||
</h2>
|
||||
</div>
|
||||
<div class="summary-lineitems" id="basket_items">
|
||||
</header>
|
||||
<ul id="basket-items">
|
||||
for _, c := range order.Cakes {
|
||||
<div class="summary-item" data-cake-id={ strconv.Itoa(c.ID) }>
|
||||
<div class="summary-item-info">
|
||||
<div class="summary-item-name cake-name">{ c.Name }</div>
|
||||
<div class="summary-item-detail cake-price">{ c.Price.String() } PLN × <span class="cake-qty">{ strconv.Itoa(c.Amount) }</span></div>
|
||||
<li data-cake-id={ strconv.Itoa(c.ID) }>
|
||||
<div style="flex:1;min-width:0;padding-right:0.5rem">
|
||||
<div class="name">{ c.Name }</div>
|
||||
<div class="detail">{ c.Price.String() } PLN × <span class="qty">{ strconv.Itoa(c.Amount) }</span></div>
|
||||
</div>
|
||||
<div class="summary-item-price cake-total">{ c.Total().String() } PLN</div>
|
||||
<button type="button" class="summary-item-remove" onclick="removeCake(this)">
|
||||
<div class="price">{ c.Total().String() } PLN</div>
|
||||
<button type="button" class="remove" onclick="removeCake(this)">
|
||||
<span class="material-symbols-outlined">close</span>
|
||||
</button>
|
||||
<input type="hidden" name={ "cake[" + strconv.Itoa(c.ID) + "]" } value={ strconv.Itoa(c.Amount) }/>
|
||||
</div>
|
||||
</li>
|
||||
}
|
||||
</div>
|
||||
</ul>
|
||||
<div class="summary-totals">
|
||||
<div class="summary-total-row">
|
||||
<div class="total-row">
|
||||
<span>Subtotal</span>
|
||||
<span id="subtotal-price">{ order.Subtotal().String() } PLN</span>
|
||||
</div>
|
||||
<div class="summary-total-row">
|
||||
<div class="total-row">
|
||||
<span>Zaliczka</span>
|
||||
<span id="paid-amount">{ order.Paid.String() } PLN</span>
|
||||
</div>
|
||||
<div class="summary-total-row total">
|
||||
<div class="total-row grand">
|
||||
<span>Do zapłaty</span>
|
||||
<span id="total-price">{ order.Total().String() } PLN</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,67 +12,67 @@ templ OrdersPage(first, last string, orders []models.Order) {
|
|||
|
||||
templ OrdersMain(first, last string, orders []models.Order) {
|
||||
<div class="metrics-grid">
|
||||
<div class="metric-card">
|
||||
<span class="metric-label">
|
||||
<div>
|
||||
<span class="label">
|
||||
<span class="material-symbols-outlined">receipt_long</span>
|
||||
Zamówienia dzisiaj
|
||||
</span>
|
||||
<span class="metric-value">{ len(orders) }</span>
|
||||
<span class="metric-change positive">
|
||||
<span class="value">{ len(orders) }</span>
|
||||
<span class="change positive">
|
||||
<span class="material-symbols-outlined">arrow_upward</span>
|
||||
Wszystkie aktywne
|
||||
</span>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<span class="metric-label">
|
||||
<div>
|
||||
<span class="label">
|
||||
<span class="material-symbols-outlined">cake</span>
|
||||
Do realizacji
|
||||
</span>
|
||||
<span class="metric-value">{ strconv.Itoa(countPending(orders)) }</span>
|
||||
<span class="metric-change warning">
|
||||
<span class="value">{ strconv.Itoa(countPending(orders)) }</span>
|
||||
<span class="change warning">
|
||||
<span class="material-symbols-outlined">priority_high</span>
|
||||
Oczekujące
|
||||
</span>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<span class="metric-label">
|
||||
<div>
|
||||
<span class="label">
|
||||
<span class="material-symbols-outlined">check_circle</span>
|
||||
Gotowe do odbioru
|
||||
</span>
|
||||
<span class="metric-value">{ strconv.Itoa(countDone(orders)) }</span>
|
||||
<span class="metric-change">Zrealizowane</span>
|
||||
<span class="value">{ strconv.Itoa(countDone(orders)) }</span>
|
||||
<span class="change">Zrealizowane</span>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<span class="metric-label">
|
||||
<div>
|
||||
<span class="label">
|
||||
<span class="material-symbols-outlined">payments</span>
|
||||
Przychód (szac.)
|
||||
</span>
|
||||
<span class="metric-value">{ estimateRevenue(orders).String() } PLN</span>
|
||||
<span class="metric-change positive">
|
||||
<span class="value">{ estimateRevenue(orders).String() } PLN</span>
|
||||
<span class="change positive">
|
||||
<span class="material-symbols-outlined">trending_up</span>
|
||||
W bieżącym miesiącu
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<section class="card">
|
||||
<div class="card-header">
|
||||
<header>
|
||||
<h2>
|
||||
<span class="material-symbols-outlined">list_alt</span>
|
||||
Aktywne zamówienia
|
||||
</h2>
|
||||
<div style="display:flex;align-items:center;gap:8px">
|
||||
<form hx-get="/orders/search" hx-target="#results-table" hx-trigger="keyup delay:500ms, change" style="display:flex;align-items:center;gap:8px">
|
||||
<div class="form-group" style="flex-direction:row;align-items:center;gap:4px">
|
||||
<label style="font-size:11px;white-space:nowrap">Od</label>
|
||||
<input class="form-input" style="width:140px" type="date" value={ first } name="from"/>
|
||||
<div style="display:flex;align-items:center;gap:0.5rem">
|
||||
<form hx-get="/orders/search" hx-target="#results-table" hx-trigger="keyup delay:500ms, change" style="display:flex;align-items:center;gap:0.5rem">
|
||||
<div class="form-group" style="flex-direction:row;align-items:center;gap:0.25rem">
|
||||
<label style="font-size:0.75rem;white-space:nowrap">Od</label>
|
||||
<input class="form-input" style="width:8.75rem" type="date" value={ first } name="from"/>
|
||||
</div>
|
||||
<div class="form-group" style="flex-direction:row;align-items:center;gap:4px">
|
||||
<label style="font-size:11px;white-space:nowrap">Do</label>
|
||||
<input class="form-input" style="width:140px" type="date" value={ last } name="to"/>
|
||||
<div class="form-group" style="flex-direction:row;align-items:center;gap:0.25rem">
|
||||
<label style="font-size:0.75rem;white-space:nowrap">Do</label>
|
||||
<input class="form-input" style="width:8.75rem" type="date" value={ last } name="to"/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="table-container" id="results-table">
|
||||
@OrdersTable(orders)
|
||||
</div>
|
||||
|
|
@ -96,8 +96,8 @@ templ OrdersTable(orders []models.Order) {
|
|||
for _, o := range orders {
|
||||
<tr>
|
||||
<td><a href={ templ.URL("/order/" + strconv.Itoa(o.ID)) } class="order-id">#{ strconv.Itoa(o.ID) }</a></td>
|
||||
<td class="customer-name">{ o.Surname } { o.Name }<br/><span class="text-on-surface-variant" style="font-size:11px;font-weight:400">{ o.Phone }</span></td>
|
||||
<td class="text-on-surface-variant">{ o.Date.Format("2006-01-02 15:04") }</td>
|
||||
<td class="customer">{ o.Surname } { o.Name }<br/><span class="text-muted" style="font-size:0.75rem;font-weight:400">{ o.Phone }</span></td>
|
||||
<td class="text-muted">{ o.Date.Format("2006-01-02 15:04") }</td>
|
||||
<td>
|
||||
<span class="truncate" title={ cakeItemsDesc(o.Cakes) }>
|
||||
for i, c := range o.Cakes {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue