style session rules

style.css

@@ -4,18 +4,26 @@ html {
 
   --color-regular-text: white;
   --color-regular-background: lch(from black calc(l + 10) c h);
+  --color-regular-field: black;
   --color-alter-text: white;
   --color-alter-background: black;
+  --color-alter-field: var(--color-regular-background);
   --color-primary-text: black;
   --color-primary-background: lch(from orange calc(l + 10) c h);
+  --color-primary-field:
+    lch(from var(--color-primary-background) calc(l + 25) c h);
 
   @media (prefers-color-scheme: light) {
     --color-regular-text: black;
     --color-regular-background: white;
+    --color-regular-field: var(--color-alter-background);
     --color-alter-text: black;
     --color-alter-background: lch(from white calc(l - 10) c h);
+    --color-alter-field: white;
     --color-primary-text: black;
     --color-primary-background: lch(from orange calc(l + 10) c h);
+    --color-primary-field:
+      lch(from var(--color-primary-background) calc(l + 25) c h);
   }
 
   color: var(--color-regular-text);
@@ -23,6 +31,7 @@ html {
 
   --color-active-text: var(--color-regular-text);
   --color-active-background: var(--color-regular-background);
+  --color-active-field: var(--color-regular-field);
 }
 
 .background {
@@ -32,28 +41,35 @@ html {
 .regular,
 .alter,
 .primary {
-  color: var(--color-alter-text);
+  color: var(--color-active-text);
 }
 
 .regular {
   --color-active-text: var(--color-regular-text);
   --color-active-background: var(--color-regular-background);
+  --color-active-field: var(--color-regular-field);
 }
 
 .alter {
   --color-active-text: var(--color-alter-text);
   --color-active-background: var(--color-alter-background);
+  --color-active-field: var(--color-alter-field);
 }
 
 .primary {
   --color-active-text: var(--color-primary-text);
   --color-active-background: var(--color-primary-background);
+  --color-active-field: var(--color-primary-field);
 }
 
 .positioned {
   margin: 0;
 }
 
+.padded {
+  padding: 1em;
+}
+
 body {
   min-height: 100%;
   height: 1px;
@@ -63,26 +79,38 @@ body {
 
 h1 {
   font-size: 2em;
+  margin-top: 0.75em;
+  margin-bottom: 0.5em;
 }
 
 h2 {
   font-size: 1.75em;
+  margin-top: 0.75em;
+  margin-bottom: 0.5em;
 }
 
 h3 {
   font-size: 1.5em;
+  margin-top: 0.75em;
+  margin-bottom: 0.5em;
 }
 
 h4 {
   font-size: 1.35em;
+  margin-top: 0.75em;
+  margin-bottom: 0.5em;
 }
 
 h5 {
   font-size: 1.25em;
+  margin-top: 0.75em;
+  margin-bottom: 0.5em;
 }
 
 h6 {
   font-size: 1.1em;
+  margin-top: 0.75em;
+  margin-bottom: 0.5em;
 }
 
 button {
@@ -162,7 +190,7 @@ main.layout {
     align-items: center;
   }
 
-  >.spacer {
+  :nth-last-child(2) {
     flex-grow: 1;
   }
 
@@ -248,4 +276,53 @@ main.layout {
   button {
     width: 100%;
   }
+}
+
+.field {
+  display: grid;
+  grid-template-areas: "label" "field" "description";
+  grid-template-columns: 1fr;
+  grid-template-rows: repeat(3, min-content);
+  column-gap: 1ch;
+  row-gap: 0.5ch;
+
+  &:not(:last-child) {
+    margin-bottom: 1em;
+  }
+
+  &:has(input[type=radio]),
+  &:has(input[type=checkbox]) {
+    grid-template-areas: "field label" ". description";
+    grid-template-columns: min-content 1fr;
+    grid-template-rows: repeat(2, min-content);
+  }
+
+  .label {
+    grid-area: label;
+    font-weight: bold;
+  }
+
+  input {
+    grid-area: field;
+    padding: 0.5em;
+    border-radius: 5px;
+
+    background-color: var(--color-active-field);
+    border: solid 1px var(--color-active-text);
+    color: var(--color-active-text);
+  }
+
+  .description {
+    grid-area: description;
+  }
+}
+
+.session-head {
+  >:first-child {
+    margin-top: 0;
+  }
+
+  >:last-child {
+    margin-bottom: 0;
+  }
 }

ui/session.js

@@ -14,20 +14,22 @@ export default class SessionView {
     let res = model.result;
 
     return m("article.session-view", [
-      m(".session-view-header", [
-        m("h2.positioned", "Satz"),
-        (model.games.length !== 0)
-          ? m(
-              "button.positioned",
-              { onclick: () => this.#headOpen = !this.#headOpen },
-              "Regln"
-            )
-          : null,
-      ]),
       ( model.games.length === 0 && model.currentGame === null)
         ? m(SessionHead, { model })
         : m.fragment([
-            this.#headOpen ? m(SessionHead, { model }) : null,
+            m(".session-view-header", [
+              m("h2.positioned", "Satz"),
+              m(
+                "button.positioned",
+                { onclick: () => this.#headOpen = !this.#headOpen },
+                "Regln"
+              ),
+            ]),
+
+            this.#headOpen
+              ? m(".alter.background.padded", m(SessionHead, { model }))
+              : null,
+
             m("section.record", [
               this.#headOpen ? m("h3", "Mitschrift") : null,
               m("table", [
@@ -52,7 +54,7 @@ export default class SessionView {
               ])
             ]),
       ]),
-      m(".spacer"),
+
       model.currentGame !== null
         ? model.currentGame.currentRound !== null
           ? m(RoundView, { model: model.currentGame.currentRound })

ui/session_head.js

@@ -6,20 +6,20 @@ import Session from "/models/session.js";
 export default class SessionHead {
   /** @param {{ attrs: { model: Session } }} param The session model to use. */
   view({ attrs: { model } }) {
-    return m("section.session_head", [
+    return m("section.session-head", [
       m("h3", "Satzeinstellungen"),
       m("section.session-head-names", [
         m("h4", "Teamnamen"),
-        m("label", [
+        m("label.field", [
-          "Nam von eana",
+          m("span.label", "Nam von eana"),
           m("input", {
             placeholder: "Se",
             value: model.theirTeam,
             oninput: (e) => model.theirTeam = e.target.value,
           }),
         ]),
-        m("label", [
+        m("label.field", [
-          "Nam von ins",
+          m("span.label", "Nam von ins"),
           m("input", {
             placeholder: "Mia",
             value: model.ourTeam,
@@ -29,13 +29,13 @@ export default class SessionHead {
       ]),
       m("section.session-head-base", [
         m("h4", "Grundregln"),
-        m("label", [
+        m("label.field", [
-          "Punkte zum gwinna",
+          m("span.label", "Punkte zum gwinna"),
           m("input", {
             placeholder: "mindestns 1",
             type: "number",
             value: model.rules.goal,
-            oninput: (e) => {
+            onchange: (e) => {
               let num = parseInt(e.target.value);
               if (!isNaN(num) && num >= 1)
                 model.rules.goal = num;
@@ -47,21 +47,31 @@ export default class SessionHead {
       ]),
       m("section.session-head-raising", [
         m("h4", "Erhöhn"),
-        m("label", [
+        m("label.field", [
           m("input", {
             type: "radio",
             checked: model.rules.raising === RaisingRule.UnlessStricken,
             oninput: () => model.rules.raising = RaisingRule.UnlessStricken,
           }),
-          "Außa wenn gstrichn",
+          m("span.label", "Außa wenn gstrichn"),
+          m("span.description", [
+            "Di Spiela kennen di Punkte erhöhn, so viel wia's wolln, außa " +
+            "wenn's scho gstrichn sen.",
+            m("br"),
+            m("em", "So steht's in di Regln von da Tirola Wattagmeinschaft"),
+          ]),
         ]),
-        m("label", [
+        m("label.field", [
           m("input", {
             type: "radio",
             checked: model.rules.raising === RaisingRule.UntilEnough,
             oninput: () => model.rules.raising = RaisingRule.UntilEnough,
           }),
-          "Bis es langt",
+          m("span.label", "Bis es langt"),
+          m("span.description", [
+            "Di Spiela kennen so lang di Punkte erhöhn, bis se mit am Sieg " +
+            "in da Rundn es ganze Spiel gwonnen hättn.",
+          ])
         ]),
       ]),
     ])