side by side layout

This commit is contained in:
bronku 2025-04-06 12:55:42 +02:00
parent 789aecc472
commit bd339683e8
2 changed files with 38 additions and 26 deletions

View file

@ -194,7 +194,7 @@ main {
min-width: 160px; min-width: 160px;
} }
input:focus { .search-container input:focus {
outline: none; outline: none;
border-color: var(--primary-color); border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1); box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1);
@ -295,6 +295,18 @@ tr a {
color: var(--primary-color); color: var(--primary-color);
} }
.order {
display: flex;
flex-direction: row;
}
.order div {
display: flex;
flex-direction: column;
}
/* Responsive adjustments */ /* Responsive adjustments */
@media (max-width: 768px) { @media (max-width: 768px) {

View file

@ -1,71 +1,71 @@
{{define "title"}} {{define "title"}}
Order {{.Order.ID}} {{if .Order.ID}}
Edytuj zamówienie #{{.Order.ID}}
{{else}}
Nowe zamówienie
{{end}}
{{end}} {{end}}
{{define "main"}} {{define "main"}}
<main> <main>
<form method="post"> <form method="post" class="order">
{{with .Order}} {{with .Order}}
<div class="order-contents">
<div> <div>
<h2>Info</h2> <h2>Info</h2>
<label> <label>
<input hidden="hidden" name="id" value="{{.ID}}"> <input hidden="hidden" name="id" value="{{.ID}}">
</label> </label>
<label>name</label> <label>Imię
<label>
<input type="text" name="name" value="{{.Name}}"> <input type="text" name="name" value="{{.Name}}">
</label> </label>
<label>surname</label> <label>Nazwisko
<label>
<input type="text" name="surname" value="{{.Surname}}"> <input type="text" name="surname" value="{{.Surname}}">
</label> </label>
<label>phone</label> <label>Numer telefonu
<label>
<input type="tel" name="phone" value="{{.Phone}}"> <input type="tel" name="phone" value="{{.Phone}}">
</label> </label>
<label>location</label> <label>Lokalizacja
<label>
<select name="location"> <select name="location">
<option {{ if eq .Location "Kartuzy" }}selected{{ end }} value="Kartuzy">Kartuzy</option> <option {{ if eq .Location "Kartuzy" }}selected{{ end }} value="Kartuzy">Kartuzy</option>
<option {{ if eq .Location "Somonino" }}selected{{ end }} value="Somonino">Somonino</option> <option {{ if eq .Location "Somonino" }}selected{{ end }} value="Somonino">Somonino</option>
</select> </select>
</label> </label>
<label>date</label> <label>Data dostawy
<label>
<input type="date" name="date" value="{{.Date.Format "2006-01-02"}}"> <input type="date" name="date" value="{{.Date.Format "2006-01-02"}}">
</label> </label>
<label>status</label> <label>Status
<label for="status"></label><select name="status" id="status"> <select name="status">
<option {{ if eq .Status "accepted" }}selected{{ end }} value="accepted">accepted</option> <option {{ if eq .Status "accepted" }}selected{{ end }} value="accepted">accepted</option>
<option {{ if eq .Status "done" }}selected{{ end }} value="done">done</option> <option {{ if eq .Status "done" }}selected{{ end }} value="done">done</option>
</select> </select>
<label>paid</label> </label>
<label> <label>Zaliczka
<input type="number" name="paid" min="0" value="{{.Paid}}"> <input type="number" name="paid" min="0" value="{{.Paid}}">
</label> </label>
</div> </div>
<div> <div>
<h2>Basket</h2> <h2>Dodane Ciasta</h2>
<ul id="basket"> <ul id="basket">
</ul> </ul>
</div> </div>
<button type="submit">Zapisz</button>
</div>
{{end}} {{end}}
{{with .Catalogue}} {{with .Catalogue}}
<div> <div>
<h2>Catalogue</h2> <h2>Katalog</h2>
<ul> <ul>
{{range .}} {{range .}}
<li> <li>
{{.Name}} {{.Price}} {{.Name}} {{.Price}}
<button type=button onClick="addCake({{.ID}},'{{.Name}} {{.Price}}', 1)">add</button> <button type=button onClick="addCake({{.ID}},'{{.Name}} {{.Price}}', 1)">dodaj</button>
</li> </li>
{{end}} {{end}}
</ul> </ul>
</div> </div>
{{end}} {{end}}
<button type="submit">submit</button>
</form> </form>
</main> </main>
<!--suppress JSUnusedGlobalSymbols, JSCheckFunctionSignatures -->
<script> <script>
function addCake(id, name, amount) { function addCake(id, name, amount) {
const cake = document.getElementById("cake[" + id + "]"); const cake = document.getElementById("cake[" + id + "]");
@ -85,7 +85,7 @@
const button = document.createElement("button"); const button = document.createElement("button");
button.setAttribute("type", "button") button.setAttribute("type", "button")
button.setAttribute("onClick", "removeCake(" + id + ")") button.setAttribute("onClick", "removeCake(" + id + ")")
button.innerText = "delete" button.innerText = "usuń"
const li = document.createElement("li"); const li = document.createElement("li");
li.appendChild(label) li.appendChild(label)
li.appendChild(input) li.appendChild(input)