From 670da503edafe7206002ccf2c469285ee8f61bda Mon Sep 17 00:00:00 2001
From: =?utf8?q?Paul=20H=C3=A4nsch?= <paul@plutz.net>
Date: Wed, 10 Feb 2021 14:24:40 +0100
Subject: [PATCH] improved styling for attendance list

---
 cards/list.sh | 22 ++++++++++++----------
 style.css     | 17 +++++++++++++++++
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/cards/list.sh b/cards/list.sh
index 5bfffbf..0ed8af4 100755
--- a/cards/list.sh
+++ b/cards/list.sh
@@ -34,25 +34,27 @@ edit_card(){
 	  [div .section .address $(edit_item "$card" ADR)]
 	  [div .section .note    $(edit_item "$card" NOTE)]
 	  [div .section .attendance
-	    [h3 $(l10n course_attendance) ] $(
+	    [h3 $(l10n course_attendance) ] [div .attendance $(
             list_courses |while IFS=/ read course coursename; do
-	      printf '[label [input type="checkbox" name="attendance" value="%s" %s] %s]' \
-                     "$(HTML "$course")" \
+              courseH="$(HTML "$course")"
+	      printf '[input type="checkbox" id="cour%s" name="attendance" value="%s" %s][label for="cour%s" . %s]' \
+                     "$courseH" "$courseH" \
 	             "$(grep -qF "${course}	${cardfile##*/}" "$_DATA/mappings/attendance" \
 	                && printf 'checked="checked"'
 	               )" \
-                     "$coursename"
-	    done)
-	    [h3 $(l10n CATEGORIES) ] $(
+                     "$courseH" "$coursename"
+	    done)]
+	    [h3 $(l10n CATEGORIES) ] [div .categories $(
 	    grep -xE '[^ ]+' "$_DATA"/mappings/categories |while read -r cat; do
-	      printf '[label [input type="checkbox" name="CATEGORIES" value="%s" %s] %s]' \
-	             "$(HTML "$cat")" \
+              catH="$(HTML "$cat")"
+	      printf '[input type="checkbox" id="cat%s" name="CATEGORIES" value="%s" %s][label for="cat%s" . %s]' \
+	             "$catH" "$catH" \
 	             "$(seq 1 $(pdi_count "$card" CATEGORIES) |while read c; do
 	               pdi_value "$card" CATEGORIES $c |grep -qxF "$cat" \
 	               && printf 'checked="checked"' && break
 	             done)" \
-	             "$(HTML "$cat")"
-	    done)
+	             "$catH" "$catH"
+	    done)]
 	  ]
 	  [div .control
 	    [div .item .delete label="$(l10n edit_delete)"
diff --git a/style.css b/style.css
index 8394de8..04b1336 100644
--- a/style.css
+++ b/style.css
@@ -248,6 +248,23 @@ form .control .item {
   form .control .item.delete { bottom: .125em; right: .25em; }
 }
 
+
+/* ======= LIST ITEMS, Cards ======= */
+
+form.card .attendance div.attendance,
+form.card .attendance div.categories {
+  max-height: 10em;
+  overflow-y: auto;
+}
+form.card .attendance label {
+  display: inline-block;
+  width: calc(100% - 2em);
+  vertical-align: top;
+  margin-bottom: 0;
+}
+form.card .attendance input { margin-top: .375em; }
+
+
 /* ======= LIST ITEMS, Courses ======= */
 
 form.course .dtstart input[name=DTS_YEAR],
-- 
2.39.2