refactoring html and css
This commit is contained in:
bronkuu
parent
8194cea85e
commit
a91b196e64
16 changed files with 1299 additions and 1383 deletions
|
|
@ -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