Compare commits
9
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
1ce2d2b9f5 | ||
|
|
0f2cd9f0a9 | ||
|
|
aa6541addd | ||
|
|
3564d74c39 | ||
|
|
b67c4edd5a | ||
|
|
e64c4aa212 | ||
|
|
4ce189d1e4 | ||
|
|
705ad5af26 | ||
|
|
813e82ef5c |
@@ -423,52 +423,15 @@ html[data-theme="light"] .themetoggle .i-moon { display: none; }
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Catalog structure: Pääruuat and Lisukkeet are the two halves of the
|
/* Catalog rows */
|
||||||
catalog, the categories are subdivisions of the first. Two levels, so they
|
|
||||||
must not look alike. */
|
|
||||||
.section + .section { margin-top: 34px; }
|
|
||||||
.sectiontitle {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 9px;
|
|
||||||
margin: 0 0 4px;
|
|
||||||
padding-bottom: 8px;
|
|
||||||
border-bottom: 2px solid var(--ink);
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: -0.03em;
|
|
||||||
}
|
|
||||||
.sectiontitle .count {
|
|
||||||
padding: 2px 8px;
|
|
||||||
border-radius: 999px;
|
|
||||||
background: var(--sunk);
|
|
||||||
color: var(--muted);
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
letter-spacing: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sechead {
|
.sechead {
|
||||||
margin: 20px 0 2px;
|
margin: 26px 0 6px;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: 0.09em;
|
letter-spacing: 0.09em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Collapsed add/edit forms, so the page opens on the catalog. */
|
|
||||||
.addform > summary {
|
|
||||||
cursor: pointer;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 15px;
|
|
||||||
min-height: 24px;
|
|
||||||
}
|
|
||||||
.addform[open] > summary {
|
|
||||||
margin-bottom: 14px;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
border-bottom: 1px solid var(--line);
|
|
||||||
}
|
|
||||||
.row {
|
.row {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
+50
-69
@@ -531,6 +531,8 @@ templ catalogPage(v catalogView) {
|
|||||||
if v.Report != nil {
|
if v.Report != nil {
|
||||||
@importReport(v.Report)
|
@importReport(v.Report)
|
||||||
}
|
}
|
||||||
|
@mainForm_(v.Main)
|
||||||
|
@sideForm_(v.Side)
|
||||||
<div data-signals:haku={ jsString(v.Search) }>
|
<div data-signals:haku={ jsString(v.Search) }>
|
||||||
<form method="get" action="/ruuat" class="searchrow">
|
<form method="get" action="/ruuat" class="searchrow">
|
||||||
<input
|
<input
|
||||||
@@ -544,10 +546,6 @@ templ catalogPage(v catalogView) {
|
|||||||
data-on:input__debounce.250ms="@get('/ruuat/etsi')"
|
data-on:input__debounce.250ms="@get('/ruuat/etsi')"
|
||||||
/>
|
/>
|
||||||
</form>
|
</form>
|
||||||
// The add and edit forms stay outside the patched fragment, or
|
|
||||||
// typing in the search box would collapse a form mid-edit.
|
|
||||||
@mainForm_(v.Main)
|
|
||||||
@sideForm_(v.Side)
|
|
||||||
@catalogList(v)
|
@catalogList(v)
|
||||||
</div>
|
</div>
|
||||||
<details class="card">
|
<details class="card">
|
||||||
@@ -559,67 +557,53 @@ templ catalogPage(v catalogView) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// catalogList carries the id Datastar patches, so typing in the search box
|
// catalogList carries the id Datastar patches, so typing in the search box
|
||||||
// swaps the lists without touching the forms above them.
|
// swaps the lists without reloading the forms above them.
|
||||||
//
|
|
||||||
// Two levels of heading, because there are two: Pääruuat and Lisukkeet are
|
|
||||||
// the halves of the catalog, and the categories are subdivisions of the
|
|
||||||
// first. They were previously styled the same, which made a category look
|
|
||||||
// like a peer of the entire side-dish list.
|
|
||||||
templ catalogList(v catalogView) {
|
templ catalogList(v catalogView) {
|
||||||
<div id="ruokalista">
|
<div id="ruokalista">
|
||||||
<section class="section">
|
if v.Mains == 0 {
|
||||||
@sectionTitle("Pääruuat", v.Mains)
|
<h3 class="sechead">Pääruuat</h3>
|
||||||
if v.Mains == 0 {
|
<p class="muted small">
|
||||||
@emptyNote(v.Search)
|
if v.Search == "" {
|
||||||
}
|
Ei vielä pääruokia.
|
||||||
// Grouped by category, alphabetical inside. The catalog is a list
|
} else {
|
||||||
// you manage, so a predictable position beats a useful one.
|
Ei osumia.
|
||||||
for _, g := range v.Groups {
|
|
||||||
<h3 class="sechead">{ g.Label }</h3>
|
|
||||||
for _, d := range g.Dishes {
|
|
||||||
<div class="row">
|
|
||||||
@categoryIcon(d.CategoryKey())
|
|
||||||
<div class="rowtext">
|
|
||||||
<div class="nm">{ d.Name }</div>
|
|
||||||
if !d.HasSides {
|
|
||||||
<div class="sd">Ei lisukkeita</div>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
@rowActions(v, "/ruuat?muokkaa="+strconv.FormatInt(d.ID, 10), d.ID, "paa")
|
|
||||||
</div>
|
|
||||||
}
|
}
|
||||||
}
|
</p>
|
||||||
</section>
|
}
|
||||||
<section class="section">
|
// Grouped by category, alphabetical inside. The catalog is a list you
|
||||||
@sectionTitle("Lisukkeet", len(v.Sides))
|
// manage, so a predictable position beats a useful one.
|
||||||
if len(v.Sides) == 0 {
|
for _, g := range v.Groups {
|
||||||
@emptyNote(v.Search)
|
<h3 class="sechead">{ g.Label }</h3>
|
||||||
}
|
for _, d := range g.Dishes {
|
||||||
for _, s := range v.Sides {
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="rowtext"><div class="nm">{ s.Name }</div></div>
|
@categoryIcon(d.CategoryKey())
|
||||||
@rowActions(v, "/ruuat?muokkaa-lisuke="+strconv.FormatInt(s.ID, 10), s.ID, "lisuke")
|
<div class="rowtext">
|
||||||
|
<div class="nm">{ d.Name }</div>
|
||||||
|
if !d.HasSides {
|
||||||
|
<div class="sd">Ei lisukkeita</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
@rowActions(v, "/ruuat?muokkaa="+strconv.FormatInt(d.ID, 10), d.ID, "paa")
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
templ sectionTitle(label string, n int) {
|
|
||||||
<h2 class="sectiontitle">
|
|
||||||
{ label }
|
|
||||||
<span class="count">{ strconv.Itoa(n) }</span>
|
|
||||||
</h2>
|
|
||||||
}
|
|
||||||
|
|
||||||
templ emptyNote(search string) {
|
|
||||||
<p class="muted small">
|
|
||||||
if search == "" {
|
|
||||||
Ei vielä mitään.
|
|
||||||
} else {
|
|
||||||
Ei osumia haulle { search }.
|
|
||||||
}
|
}
|
||||||
</p>
|
<h3 class="sechead">Lisukkeet</h3>
|
||||||
|
if len(v.Sides) == 0 {
|
||||||
|
<p class="muted small">
|
||||||
|
if v.Search == "" {
|
||||||
|
Ei vielä lisukkeita.
|
||||||
|
} else {
|
||||||
|
Ei osumia.
|
||||||
|
}
|
||||||
|
</p>
|
||||||
|
}
|
||||||
|
for _, s := range v.Sides {
|
||||||
|
<div class="row">
|
||||||
|
<div class="rowtext"><div class="nm">{ s.Name }</div></div>
|
||||||
|
@rowActions(v, "/ruuat?muokkaa-lisuke="+strconv.FormatInt(s.ID, 10), s.ID, "lisuke")
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
// rowActions is a pencil and a bin, until the bin is tapped: then the row
|
// rowActions is a pencil and a bin, until the bin is tapped: then the row
|
||||||
@@ -667,18 +651,15 @@ templ iconTrash() {
|
|||||||
</svg>
|
</svg>
|
||||||
}
|
}
|
||||||
|
|
||||||
// Collapsed by default so the page opens on the catalog rather than on two
|
|
||||||
// screens of empty form. Forced open when editing or after a rejected
|
|
||||||
// submission, since the form is then the thing that needs attention.
|
|
||||||
templ mainForm_(f mainForm) {
|
templ mainForm_(f mainForm) {
|
||||||
<details class="card addform" id="paaruoka" open?={ f.ID != 0 || f.Err != "" }>
|
<section class="card" id="paaruoka">
|
||||||
<summary>
|
<h3>
|
||||||
if f.ID == 0 {
|
if f.ID == 0 {
|
||||||
Lisää pääruoka
|
Lisää pääruoka
|
||||||
} else {
|
} else {
|
||||||
Muokkaa pääruokaa
|
Muokkaa pääruokaa
|
||||||
}
|
}
|
||||||
</summary>
|
</h3>
|
||||||
if f.Err != "" {
|
if f.Err != "" {
|
||||||
<p class="formerr">{ f.Err }</p>
|
<p class="formerr">{ f.Err }</p>
|
||||||
}
|
}
|
||||||
@@ -712,7 +693,7 @@ templ mainForm_(f mainForm) {
|
|||||||
if f.ID != 0 {
|
if f.ID != 0 {
|
||||||
<a class="ghost" href="/ruuat">Peruuta</a>
|
<a class="ghost" href="/ruuat">Peruuta</a>
|
||||||
}
|
}
|
||||||
</details>
|
</section>
|
||||||
}
|
}
|
||||||
|
|
||||||
templ categoryChip(value, label string, f mainForm) {
|
templ categoryChip(value, label string, f mainForm) {
|
||||||
@@ -728,14 +709,14 @@ templ categoryChip(value, label string, f mainForm) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
templ sideForm_(f sideForm) {
|
templ sideForm_(f sideForm) {
|
||||||
<details class="card addform" id="lisuke" open?={ f.ID != 0 || f.Err != "" }>
|
<section class="card" id="lisuke">
|
||||||
<summary>
|
<h3>
|
||||||
if f.ID == 0 {
|
if f.ID == 0 {
|
||||||
Lisää lisuke
|
Lisää lisuke
|
||||||
} else {
|
} else {
|
||||||
Muokkaa lisuketta
|
Muokkaa lisuketta
|
||||||
}
|
}
|
||||||
</summary>
|
</h3>
|
||||||
if f.Err != "" {
|
if f.Err != "" {
|
||||||
<p class="formerr">{ f.Err }</p>
|
<p class="formerr">{ f.Err }</p>
|
||||||
}
|
}
|
||||||
@@ -752,7 +733,7 @@ templ sideForm_(f sideForm) {
|
|||||||
if f.ID != 0 {
|
if f.ID != 0 {
|
||||||
<a class="ghost" href="/ruuat">Peruuta</a>
|
<a class="ghost" href="/ruuat">Peruuta</a>
|
||||||
}
|
}
|
||||||
</details>
|
</section>
|
||||||
}
|
}
|
||||||
|
|
||||||
templ importForm() {
|
templ importForm() {
|
||||||
|
|||||||
Reference in New Issue
Block a user