bronku/cake-order-tracker
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactoring html and css

Browse source
This commit is contained in:
bronkuu 2026-06-15 14:43:50 +02:00
parent 8194cea85e
commit a91b196e64
16 changed files with 1299 additions and 1383 deletions
Download patch file Download diff file Expand all files Collapse all files

78
server/templates/order.templ
View file

@ -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>