From 6071860354f8edb8392d2b3c1f339fdeacbab540 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Paul=20H=C3=A4nsch?= Date: Mon, 18 Jan 2021 13:34:17 +0100 Subject: [PATCH] style for card filter dialog --- cards/filter_card.sh | 53 ++++++++------ cards/l10n.sh | 2 + cards/widgets.sh | 6 +- style_new.css | 167 +++++++++++++++++++++++++++++-------------- 4 files changed, 148 insertions(+), 80 deletions(-) diff --git a/cards/filter_card.sh b/cards/filter_card.sh index 10ca51b..2b25acb 100755 --- a/cards/filter_card.sh +++ b/cards/filter_card.sh @@ -17,26 +17,33 @@ # You should have received a copy of the GNU Affero General Public License # along with Confetti. If not, see . -if [ "$(POST choice)" = new_filter ]; then - filter="$( - seq 0 100 |while read n; do - filter_type="$(POST "filter_type${n}")" - filter_text="$(POST "filter_text${n}")" - [ ! "$filter_type" -a ! "$filter_text" ] && break - if [ "$filter_type" = CATEGORIES ]; then - printf '^CATEGORIES:' - seq 0 $(POST_COUNT filter_cat$n) |while read m; do - printf '|%s' "$(POST filter_cat$n $m)" - done - else - printf '^%s:%s' "$filter_type" "$filter_text" - fi - done | sed -r \ - 's;\|+;\|;g; s;\^+;\^;g; s;:\|;:;g; - :X; s;\^[^:]*:\^;\^;g; /\^[^:]*:\^/bX; - s;^\^;;; s;\^[^:]*:$;;;' - )" - REDIRECT "/cards/?o=$(POST order)&f=${filter}" -else - REDIRECT '/cards/' -fi +filter="$( + seq 0 100 |while read n; do + filter_type="$(POST "filter_type${n}")" + filter_text="$(POST "filter_text${n}")" + [ ! "$filter_type" -a ! "$filter_text" ] && break + if [ "$filter_type" = CATEGORIES ]; then + printf '^CATEGORIES:' + seq 0 $(POST_COUNT filter_cat$n) |while read m; do + printf '|%s' "$(POST filter_cat$n $m)" + done + else + printf '^%s:%s' "$filter_type" "$filter_text" + fi + done | sed -r \ + 's;\|+;\|;g; s;\^+;\^;g; s;:\|;:;g; + :X; s;\^[^:]*:\^;\^;g; /\^[^:]*:\^/bX; + s;^\^;;; s;\^[^:]*:$;;;' +)" + +case $(POST choice) in + filter) + REDIRECT "/cards/?o=$(POST order)&f=${filter}" + ;; + new_filter) + REDIRECT "/cards/?o=$(POST order)&f=${filter}&newfilter=yes" + ;; + *) + REDIRECT '/cards/' + ;; +esac diff --git a/cards/l10n.sh b/cards/l10n.sh index ae50260..e1ad86c 100755 --- a/cards/l10n.sh +++ b/cards/l10n.sh @@ -103,6 +103,7 @@ l10n(){ edit_addfield) printf %s "+";; edit_deletefield) printf %s "X";; filter_label) printf %s "Filter";; + filter_item) printf %s "Eingrenzung nach";; filter_placeholder) printf %s "Begriffe zur Eingrenzung eingeben";; filter_type) printf %s "Filtertyp";; filter_order) printf %s "Sortierung";; @@ -117,6 +118,7 @@ l10n(){ filter_bdate) printf %s "Geburts­datum";; filter_course) printf %s "Kurs";; filter_CATEGORIES) printf %s "Kategorien";; + filter_more) printf %s "+ mehr Filter";; filter_apply) printf %s "Filtern";; filter_cancel) printf %s "Filter löschen";; newcard) printf %s "Neuen Eintrag anlegen";; diff --git a/cards/widgets.sh b/cards/widgets.sh index 544fd73..1ead03e 100755 --- a/cards/widgets.sh +++ b/cards/widgets.sh @@ -56,16 +56,16 @@ w_filter_diag(){ w_filter_item "${fil%%:*}" "${fil#*:}" $n n=$((n + 1)) done - w_filter_item any '' $n + [ "$n" -eq 0 -o "$(GET newfilter)" ] && w_filter_item any '' $n ) - + [button type="submit" name="choice" value="new_filter" $(l10n filter_more)] [fieldset class="order" [legend $(l10n filter_order):] [label [radio "order" "firstname" $( [ "$order" = firstname ] && printf checked )] $(l10n filter_firstname)] [label [radio "order" "lastname" $( [ "$order" = lastname ] && printf checked )] $(l10n filter_lastname)] [label [radio "order" "bdate" $( [ "$order" = bdate ] && printf checked )] $(l10n filter_bdate)] ] - [button type="submit" name="choice" value="new_filter" $(l10n filter_apply)] + [button type="submit" name="choice" value="filter" $(l10n filter_apply)] [button type="submit" name="choice" value="del_filter" $(l10n filter_cancel)] ] EOF diff --git a/style_new.css b/style_new.css index 24b01ac..1fc36b2 100644 --- a/style_new.css +++ b/style_new.css @@ -1,4 +1,5 @@ * { + box-sizing: border-box; font-family: sans-serif; font-weight: normal; font-size: initial; @@ -75,9 +76,63 @@ input + label { margin-left: .375em; } +/* =========== FILTER AND SEARCH Headers ========= */ + +form.search, form.sort, form.filter, form.newcard, form.newcourses { + margin-top: 1em; padding: 0 1em; + z-index: 1; +} +form.filter > h1 { display: none; } + +form.filter fieldset { margin-top: .5em; } +form.filter fieldset.item + fieldset.item legend { display: none; } +form.filter fieldset.item input[type=radio] { display: none; } +form.filter fieldset.item input[type=radio] + label { + display: table-cell; + padding: .5em 1em; + background-color: #EEE; + border-style: solid; + border-width: .5pt .25pt 0 .25pt; +} +form.filter fieldset.item input[type=radio] + label:first-of-type { + border-left: 1pt solid; +} +form.filter fieldset.item input[type=radio]:checked + label { + position: relative; + background-color: #FFF; + box-shadow: .125em -.125em .125em #888; + z-index: 1; +} +form.filter fieldset.item input[type=text], +form.filter fieldset.item fieldset.categories { + position: relative; + display: block; + width: 100%; + margin-top: -1pt; + padding: .25em .75em; + border: 1pt solid; + box-shadow: .125em .125em .25em #888; +} +form.filter fieldset.item fieldset.categories { display: none; } +form.filter fieldset.item input[value=CATEGORIES]:checked + label + input[type=text] { display: none; } +form.filter fieldset.item input[value=CATEGORIES]:checked + label + input[type=text] + fieldset.categories { display: block; } + +form.filter fieldset.order legend { + float: left; margin-right: 1em; +} + +form.filter fieldset label, +form.filter fieldset a { white-space: pre;} +form.filter button[type=submit] { + margin-top: .5em; margin-bottom: .5em; +} + + +/* ============ LIST ITEMS, Generic ============= */ + body > form, div.card, -div.courselist { +div.course { position: relative; width: 98%; width: calc(100% - 2em); margin-left: auto; margin-right: auto; @@ -169,25 +224,30 @@ form .section button[value^=addfield] { margin-top: .5em; padding: 0 .375em; } -form input.delete { display: none; } -form input.delete + label { - float: right; - font-size: .75em; - line-height: 1; - max-width: .75em; height: .875em; overflow: hidden; - color: #FBB; background-color: #444; - margin: 0; padding: .125em .5em 0 .5em; - border-radius: 4pt 4pt 0 0; - transition: max-width .3s; -} -form input.delete + label:before { content: '\274c '; margin-right: .5em; } -form input.delete + label:hover { max-width: 10em; } --form input.delete + label:hover:before { content: ''; } --form input.delete + label:hover:after { content: ' \274c'; } -form input.delete:checked + label, -form input.delete:checked + label + * { - display: none; -} +/* HACK: "responsive" Delete Button above each field */ + form input.delete { display: none; } + form input.delete + label { + float: right; + font-size: .75em; + line-height: 1; + max-width: .75em; height: .875em; overflow: hidden; + color: #FBB; background-color: #444; + margin: 0; padding: .125em .5em 0 .5em; + border-radius: 4pt 4pt 0 0; + transition: max-width .3s; + } + form input.delete + label:before { content: '\274c '; margin-right: .5em; } + form input.delete + label:hover { max-width: 10em; } + -form input.delete + label:hover:before { content: ''; } + -form input.delete + label:hover:after { content: ' \274c'; } + form input.delete:checked + label, + form input.delete:checked + label + * { + display: none; + } +/**/ + + +/* ====== right hand Control Buttons on list items ====== */ form .control { position: relative; @@ -200,21 +260,40 @@ form .control .item { vertical-align: text-bottom; } -form .control .item.newfield { - box-shadow: .125em .125em .25em; -} -form .control .item.newfield select { - margin-right: -1pt; -} -form .control .item.newfield button { - box-shadow: none; -} +/* Combined Select/Submit Box */ + form .control .item.newfield { box-shadow: .125em .125em .25em; } + form .control .item.newfield select { margin-right: -1pt; } + form .control .item.newfield button { box-shadow: none; } +/**/ -form .control .item.delete { - position: absolute; - bottom: .375em; left: .25em; width: auto; - padding-bottom: calc(2.25em + 2pt); -} +/* HACK: Delete Checkbox before delete Button */ + form .control .item.delete { + position: absolute; + bottom: .375em; left: .25em; width: auto; + padding-bottom: calc(2.25em + 2pt); + } + + form .control .item.delete input + label + button { + display: none; + position: absolute; + bottom: 0; width: 100%; + color: #800; + background-color: #FEE; + z-index: 1; + } + form .control .item.delete:after { + content: attr(label); + display: block; + position: absolute; + bottom: 0; width: 100%; + text-align: center; + color: #BAA; + padding: .25em 0; + border: 1pt solid; + box-shadow: .125em .125em .25em; + } + form .control .item.delete input:checked + label + button { display: block; } +/**/ @media(min-width: 80em) { form .control { padding: .25em; min-height: 16em; } @@ -222,23 +301,3 @@ form .control .item.delete { form .control .item.newfield select { width: calc(100% - 2.5em); } form .control .item.delete { bottom: .125em; right: .25em; } } -form .control .item.delete input + label + button { - display: none; - position: absolute; - bottom: 0; width: 100%; - color: #800; - background-color: #FEE; - z-index: 1; -} -form .control .item.delete:after { - content: attr(label); - display: block; - position: absolute; - bottom: 0; width: 100%; - text-align: center; - color: #BAA; - padding: .25em 0; - border: 1pt solid; - box-shadow: .125em .125em .25em; -} -form .control .item.delete input:checked + label + button { display: block; } -- 2.39.2