improved styling for attendance list

diff --git a/cards/list.sh b/cards/list.sh
index 5bfffbf8f840d4713b0b255bfd00828b2a180424..0ed8af46297cc72abe6ae1202869e21db1501c3c 100755 (executable)
--- 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 8394de8e66f2bb3e2d7a190aabba355b432f7ddd..04b133675f3483ce0967b84ebfe04e1f8e721ba4 100644 (file)
--- 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],