tfld/watterblock
1
0
Fork 0
Code

redesign session list

Browse Source
This commit is contained in:
Adrian Wannenmacher 2026-03-05 02:51:51 +01:00
parent 32ab7594f1
commit 8ac6f8fede
Signed by: tfld
GPG Key ID: 19D986ECB1E492D5
4 changed files with 152 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
style.css
View File

@ -4,6 +4,7 @@
@import "/ui/field.css";
@import "/ui/layout.css";
@import "/ui/round.css";
@import "/ui/session-list.css";
@import "/ui/session-view.css";
/* || COLORS

4
ui/button.css
View File

@ -16,4 +16,8 @@
color: var(--color-focus-background);
background-color: var(--color-focus-accent);
}
&.-slim {
padding: 0.5em;
}
}

119
ui/session-list.css Normal file
View File

@ -0,0 +1,119 @@
.wb-session-list {
display: flex;
flex-direction: column;
justify-content: end;
min-height: 100%;
ol,
ul {
list-style: none;
padding: 0;
margin: 0;
}
.item {
display: grid;
grid-template-areas:
"their-name our-name"
"their-points our-points"
"actions actions";
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, min-content);
gap: 1em 2em;
padding: 1em;
border-radius: 5px;
margin: 1em;
>.theirname {
font-weight: bold;
grid-area: their-name;
text-align: right;
}
>.ourname {
font-weight: bold;
grid-area: our-name;
text-align: left;
}
>.theirpoints {
grid-area: their-points;
text-align: right;
}
>.ourpoints {
grid-area: our-points;
text-align: left;
}
>.actions {
grid-area: actions;
display: flex;
justify-content: space-between;
gap: 1em;
>* {
flex-grow: 1;
}
}
}
}
.none {
display: flex;
flex-direction: column;
list-style: none;
padding: 1em 1em 0;
margin: 0;
min-height: 100%;
justify-content: end;
>.item {
display: grid;
grid-template-areas:
"their-name our-name"
"their-points our-points"
"actions actions";
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, min-content);
gap: 1em 2em;
padding: 1em;
border-radius: 5px;
margin-bottom: 1em;
>.theirname {
font-weight: bold;
grid-area: their-name;
text-align: right;
}
>.ourname {
font-weight: bold;
grid-area: our-name;
text-align: left;
}
>.theirpoints {
grid-area: their-points;
text-align: right;
}
>.ourpoints {
grid-area: our-points;
text-align: left;
}
>.actions {
grid-area: actions;
display: flex;
justify-content: space-between;
gap: 1em;
>* {
flex-grow: 1;
}
}
}
}

53
ui/session_list.js
View File

@ -5,33 +5,36 @@ import Session from "/models/session.js";
export default class SessionList {
/** @param {{ attrs: { models: Session[] } }} param The sessions to show. */
view({attrs: { models, onSelect } }) {
return m("section", [
m(m.route.Link, {
href: "/",
selector: "button.wb-button",
options: {
state: { newSession: true },
},
}, "Neia Satz"),
return m("section.wb-session-list", [
m("ol", [
models.map((s) => m("li", [
m(
m.route.Link,
{
href: "/",
selector: "button.wb-button",
params: { session: s.id },
onclick: () => onSelect(s),
},
[
m("p", "•".repeat(s.result.theirPoints)),
m("p", s.theirTeam !== "" ? s.theirTeam : "Se"),
m("p", s.ourTeam !== "" ? s.ourTeam : "Mia"),
m("p", "•".repeat(s.result.ourPoints)),
],
models.map((s) => m("li.item._alternate._apply", [
m("span.theirname", s.theirTeam !== "" ? s.theirTeam : "Se"),
m("span.ourname", s.ourTeam !== "" ? s.ourTeam : "Mia"),
m("span.theirpoints", "•".repeat(s.result.theirPoints)),
m("span.ourpoints", "•".repeat(s.result.ourPoints)),
m("div.actions",
m(
m.route.Link,
{
href: "/",
selector: "button.wb-button.-slim._positioned",
params: { session: s.id },
onclick: () => onSelect(s),
},
"spieln",
),
),
]))
])
])),
]),
m("footer.wb-box._sticky-bottom._alternate._apply",
m(m.route.Link, {
href: "/",
selector: "button.wb-button._positioned",
options: {
state: { newSession: true },
},
}, "Neia Satz"),
),
]);
}
}