From 27eaed1f6c5be64e58e84a7019f6d9e6d08ce6fb Mon Sep 17 00:00:00 2001 From: =?utf8?q?Paul=20H=C3=A4nsch?= Date: Mon, 18 Jan 2021 18:04:26 +0100 Subject: [PATCH] styling for course page --- courses/l10n.sh | 2 ++ courses/list.sh | 10 +++++--- courses/widgets.sh | 35 ++++++++++++++------------ style_new.css | 63 +++++++++++++++++++++++++++++++++++++++++++++- 4 files changed, 90 insertions(+), 20 deletions(-) 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; } -- 2.39.2