From: Paul Hänsch <paul@plutz.net>
Date: Mon, 18 Jan 2021 17:04:26 +0000 (+0100)
Subject: styling for course page
X-Git-Url: https://git.plutz.net/?a=commitdiff_plain;h=27eaed1f6c5be64e58e84a7019f6d9e6d08ce6fb;p=confetti

styling for course page
---

diff --git a/courses/l10n.sh b/courses/l10n.sh
index 4e52bd2..c40a5b1 100755
--- a/courses/l10n.sh
+++ b/courses/l10n.sh
@@ -63,6 +63,8 @@ l10n(){
     t_oclock) printf "Uhr";;
 
     "Mon Tue Wed Thu Fri Sat Sun") printf "Mo Di Mi Do Fr Sa So";;
+    "January February March April May June July August September October November December")
+      printf "Januar Februar März April Mai Juni Juli August September Oktober November Dezember";;
 
     *) printf %s "$word";;
   esac
diff --git a/courses/list.sh b/courses/list.sh
index 04cadfa..d8d3bf7 100755
--- a/courses/list.sh
+++ b/courses/list.sh
@@ -27,7 +27,7 @@ edit_course(){
           [div .section .recur . $(
             edit_item "$course" RRULE
           )]
-          [div .section .select_attendance . $(
+          [div .section .attendance . $(
             edit_item "$course" attendance
           )]
           [div .control
@@ -37,9 +37,13 @@ edit_course(){
             ]
             [button .item type="submit" name="action" value="addfield" . $(l10n edit_addfield) --]
             [button .item type="submit" name="action" value="update"   . $(l10n edit_update)]
-            [button .item type="submit" name="action" value="delete"   . $(l10n edit_delete)]
             [button .item type="submit" name="action" value="cancel"   . $(l10n edit_cancel)]
-          ]'
+            [div .item .delete label="$(l10n edit_delete)"
+              [input type="checkbox" #delete]
+              [label for="delete" $(l10n edit_delete)]
+              [button type="submit" name="action" value="delete" $(l10n edit_delete)]
+            ]
+          ]
 	]
 	EOF
   fi
diff --git a/courses/widgets.sh b/courses/widgets.sh
index ec0acc2..6123aa0 100755
--- a/courses/widgets.sh
+++ b/courses/widgets.sh
@@ -25,9 +25,10 @@ order="$(GET o |grep -m1 -xE 'DOW|TOD')"
 w_sort_courses(){
   cat <<-EOF
 	[form .sort .search action="?" method="GET"
-	  [span .label $(l10n sort_order):]
-	  [radio "order" "DOW" $(check $order DOW) $(l10n order_DOW)]
-	  [radio "order" "TOD" $(check $order TOD) $(l10n order_TOD)]
+          [fieldset .order [legend $(l10n sort_order):]
+	    [radio "order" "DOW" $(check $order DOW) $(l10n order_DOW)]
+	    [radio "order" "TOD" $(check $order TOD) $(l10n order_TOD)]
+          ]
 	  [submit "" "" $(l10n order_apply)]
 	]
 	EOF
@@ -56,7 +57,7 @@ cal_item(){
         ;;
       DTSTART)
         printf '[span .text .DTSTART %s %s ]' \
-               "$(date -d "$(pdi_value "$course" DTSTART |cal_date)" '+%A %B %d, %Y - %H:%M')" \
+               "$(LANG=de_DE.UTF-8 date -d "$(pdi_value "$course" DTSTART |cal_date)" '+%A, %d. %B %Y - %H:%M')" \
                "$(l10n t_oclock)"
         ;;
       RRULE)
@@ -148,7 +149,7 @@ edit_item(){
 	done 2>/dev/null
 	)]
 	]
-	[span .DTSTIME $(l10n time):]
+	[label .DTSTIME $(l10n time):]
 	[input type="number" name="DTS_HOUR" value="$hhstart" min="0" max="23"]:[input type="number" name="DTS_MINUTE" value="$mmstart" min="0" max="59"]
 	EOF
         ;;
@@ -179,16 +180,16 @@ edit_item(){
           printf '  [option value="%s" %s . %s]\n' "$f" "$(selected $f "$rr_freq")" "$(l10n $f)"
         done)
 	]]
-	[span .item [input type="radio" name="RRULE_LIMIT" value="ETERN" $(checked "$rr_limit" ETERN) . $(l10n t_eternal)][br]]
-	[span .item
-	[input type="radio" name="RRULE_LIMIT" value="COUNT" $(checked "$rr_limit" COUNT)]
-	[input type="number" .RRULE .COUNT name="RRULE_COUNT" placeholder="#N" value="${rr_count:-1}" min="1"] $(l10n t_times)
+	[label .item [input type="radio" name="RRULE_LIMIT" value="ETERN" $(checked "$rr_limit" ETERN)] $(l10n t_eternal)]
+	[label .item
+	  [input type="radio" name="RRULE_LIMIT" value="COUNT" $(checked "$rr_limit" COUNT)]
+	  [input type="number" .RRULE .COUNT name="RRULE_COUNT" placeholder="#N" value="${rr_count:-1}" min="1"] $(l10n t_times)
 	]
-	[span .item
-	[input type="radio" name="RRULE_LIMIT" value="UNTIL" $(checked "$rr_limit" UNTIL) . $(l10n t_until)]
-	[input type="number" .RRULE .UYEAR name="RRULE_UYEAR" placeholder="$(l10n YYYY)" value="${rr_uyear:-$ystart}" min="$ystart"]
-	[input type="number" .RRULE .UMONTH name="RRULE_UMONTH" placeholder="$(l10n MM)" value="${rr_umonth:-$mstart}" min="1" max="12"]
-	[input type="number" .RRULE .UDAY name="RRULE_UDAY" placeholder="$(l10n DD)" value="${rr_uday:-$dstart}" min="1" max="31"]
+	[label .item
+	  [input type="radio" name="RRULE_LIMIT" value="UNTIL" $(checked "$rr_limit" UNTIL)] $(l10n t_until)
+	  [input type="number" .RRULE .UYEAR name="RRULE_UYEAR" placeholder="$(l10n YYYY)" value="${rr_uyear:-$ystart}" min="$ystart"]
+	  [input type="number" .RRULE .UMONTH name="RRULE_UMONTH" placeholder="$(l10n MM)" value="${rr_umonth:-$mstart}" min="1" max="12"]
+	  [input type="number" .RRULE .UDAY name="RRULE_UDAY" placeholder="$(l10n DD)" value="${rr_uday:-$dstart}" min="1" max="31"]
 	]
 	EOF
         ;;
@@ -204,15 +205,17 @@ edit_item(){
         ;;
       attendance)
         printf '[h3 %s]' "$(l10n course_attendance)"
+        printf '[div .attendance\n'
         for vcf in "$_DATA"/vcard/*.vcf; do
           fn="$(pdi_value "$(pdi_load "$vcf")" FN)"
           printf '%s/%s\n' "${vcf##*/}" "$fn"
         done \
         | sort -t/ -k2 \
         | while IFS=/ read -r vcf fn; do
-          printf '[label [input type="checkbox" .item name="attendance" value="%s" %s] %s]' \
-                 "$vcf" "$(grep -qxF "${coursefile##*/}	$vcf" "$_DATA/mappings/attendance" && printf 'checked="checked"')" "$fn"
+          printf '[span .item [input type="checkbox" id="att%s" name="attendance" value="%s" %s][label for="att%s" . %s]]' \
+                 "$vcf" "$vcf" "$(grep -qxF "${coursefile##*/}	$vcf" "$_DATA/mappings/attendance" && printf 'checked="checked"')" "$vcf" "$fn"
         done
+        printf ']'
         ;;
       SUMMARY)
         printf '[h3 %s]' "$(l10n "$item")"
diff --git a/style_new.css b/style_new.css
index 1fc36b2..f74df86 100644
--- a/style_new.css
+++ b/style_new.css
@@ -26,6 +26,7 @@ a {
 i, em { font-style: italic; }
 b, strong { font-weight: bolder; }
 ul, ol { margin-left: 1.125em; }
+table th { font-weight: bold; }
 
 h1, h2, h3 {
   font-weight: bold;
@@ -65,6 +66,7 @@ select { padding: .375em 0; }
 input[type=radio], input[type=checkbox] {
   vertical-align: baseline;
 }
+input[type=number] { text-align: right; padding-right: 0; }
 
 button, input[type=button],
 .control a {
@@ -127,6 +129,8 @@ form.filter button[type=submit] {
   margin-top: .5em; margin-bottom: .5em;
 }
 
+body.courses form .order { display: inline-block; margin-right: 2em;}
+
 
 /* ============ LIST ITEMS, Generic ============= */
 
@@ -230,7 +234,7 @@ form .section button[value^=addfield] {
       float: right;
       font-size: .75em;
       line-height: 1;
-      max-width: .75em; height: .875em; overflow: hidden;
+      max-width: 1.75em; height: 1.125em; overflow: hidden;
       color: #FBB; background-color: #444;
       margin: 0; padding: .125em .5em 0 .5em;
       border-radius: 4pt 4pt 0 0;
@@ -301,3 +305,60 @@ form .control .item {
   form .control .item.newfield select { width: calc(100% - 2.5em); }
   form .control .item.delete { bottom: .125em; right: .25em; }
 }
+
+/* ======= LIST ITEMS, Courses ======= */
+
+form.course .dtstart input[name=DTS_YEAR],
+form.course .dtstart select[name=DTS_MONTH] { width: calc(50% - 1.25em); }
+form.course .dtstart input[name=DTS_YEAR] { margin-right: -.375em; }
+form.course .dtstart table { width: 100%; margin: 1em 0; }
+form.course .dtstart table td { text-align: right; -border: .5pt solid; }
+form.course .dtstart table input[type=radio] { display: none; }
+form.course .dtstart table input[type=radio] + label {
+  display: block;
+  width: 100%;
+  margin: 0; padding: 0 3pt;
+}
+form.course .dtstart table input[type=radio]:checked + label {
+  font-weight: bold;
+  padding: 0 2pt;
+  box-shadow: .125em .125em .25em;
+}
+
+form.course .dtstart label.DTSTIME {
+  display: inline-block;
+  font-weight: bold;
+  margin: 0;
+  width: calc(100% - 7.875em);
+}
+form.course .dtstart input[name=DTS_HOUR],
+form.course .dtstart input[name=DTS_MINUTE] {
+  vertical-align: baseline;
+  width: 3.5em;
+  margin-bottom: 0;
+}
+
+form.course .recur .item { white-space: nowrap; }
+form.course .recur .item > * { margin-bottom: 0; vertical-align: baseline; }
+form.course .recur input[name=RRULE_INTERVAL],
+form.course .recur input[name=RRULE_COUNT],
+form.course .recur input[name=RRULE_UMONTH],
+form.course .recur input[name=RRULE_UDAY] { width: 3.5em; }
+form.course .recur input[name=RRULE_UYEAR] { width: 4.5em; }
+form.course .recur input[name=RRULE_UYEAR],
+form.course .recur input[name=RRULE_UMONTH],
+form.course .recur input[name=RRULE_UDAY] {
+  margin-right: -.375em;
+}
+
+form.course .attendance div.attendance {
+  max-height: 16em;
+  overflow-y: scroll;
+}
+form.course .attendance label {
+  display: inline-block;
+  max-width: calc(100% - 2em);
+  vertical-align: top;
+  margin-bottom: 0;
+}
+form.course .attendance input { margin-top: .375em; }