redesign session list

style.css

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

ui/button.css

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

ui/session-list.css

@@ -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;
+      }
+    }
+  }
+}

ui/session_list.js

@@ -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", [
+    return m("section.wb-session-list", [
-      m(m.route.Link, {
-        href: "/",
-        selector: "button.wb-button",
-        options: {
-          state: { newSession: true },
-        },
-      }, "Neia Satz"),
       m("ol", [
-        models.map((s) => m("li", [
+        models.map((s) => m("li.item._alternate._apply", [
-          m(
+          m("span.theirname", s.theirTeam !== "" ? s.theirTeam : "Se"),
-            m.route.Link,
+          m("span.ourname", s.ourTeam !== "" ? s.ourTeam : "Mia"),
-            {
+          m("span.theirpoints", "•".repeat(s.result.theirPoints)),
-              href: "/",
+          m("span.ourpoints", "•".repeat(s.result.ourPoints)),
-              selector: "button.wb-button",
+          m("div.actions",
-              params: { session: s.id },
+            m(
-              onclick: () => onSelect(s),
+              m.route.Link,
-            },
+              {
-            [
+                href: "/",
-              m("p", "•".repeat(s.result.theirPoints)),
+                selector: "button.wb-button.-slim._positioned",
-              m("p", s.theirTeam !== "" ? s.theirTeam : "Se"),
+                params: { session: s.id },
-              m("p", s.ourTeam !== "" ? s.ourTeam : "Mia"),
+                onclick: () => onSelect(s),
-              m("p", "•".repeat(s.result.ourPoints)),
+              },
-            ],
+              "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"),
+      ),
     ]);
   }
 }