From d1e59a3ea7fc974ef954c8b5e66e06fe1af3ac55 Mon Sep 17 00:00:00 2001
From: paul <paul@plutz.net>
Date: Tue, 13 Oct 2015 01:12:47 +0000
Subject: [PATCH] design updates

svn path=/trunk/; revision=73
---
 templates/attendees.css.sh                    |  39 ++--
 templates/courses.css.sh                      | 210 ++++++++++--------
 templates/edit_attendee.sh                    |   4 +-
 templates/edit_course.sh                      |  42 ++--
 templates/frame.html.sh                       |   2 +-
 .../{text_attendee.sh => text_attendees.sh}   |   0
 templates/view_course.sh                      |  16 +-
 7 files changed, 163 insertions(+), 150 deletions(-)
 rename templates/{text_attendee.sh => text_attendees.sh} (100%)

diff --git a/templates/attendees.css.sh b/templates/attendees.css.sh
index 796c701..76f75a5 100755
--- a/templates/attendees.css.sh
+++ b/templates/attendees.css.sh
@@ -17,18 +17,6 @@
 
 cat <<EOF
 
-/*
-input[type="checkbox"] { display: none; }
-input[type="checkbox"] + label::before {content: '\2610'; padding-right: .5ex;}
-input[type="checkbox"]:checked + label { text-decoration: underline; }
-input[type="checkbox"]:checked + label::before {content: '\2611';}
-/*
-input[type="radio"] { display: none; }
-input[type="radio"] + label::before {content: '\25cb'; margin-right: .75ex; font-size: .75em;}
-input[type="radio"]:checked + label { text-decoration: underline; }
-input[type="radio"]:checked + label::before {content: '\29bf';}
-*/
-
 .filter {
   display: block;
   border: solid 1px;
@@ -78,8 +66,7 @@ input[type="radio"]:checked + label::before {content: '\29bf';}
 
 .newcard {
   display: block;
-  border-width: 1px;
-  border-style: solid;
+  border: solid 1px;
   border-radius: 0 0 4px 4px;
   margin: .25em 2em 1em 2em;
   padding: .25em 2ex .25em 2ex;
@@ -89,8 +76,7 @@ input[type="radio"]:checked + label::before {content: '\29bf';}
 .card {
   display: block;
   position: relative;
-  border-style: solid;
-  border-width: 1px;
+  border: solid 1px;
   margin: .25em 2em;
   padding: 0 20ex 0 0;
   overflow: auto;
@@ -109,22 +95,22 @@ input[type="radio"]:checked + label::before {content: '\29bf';}
   padding: .25em 1ex;
 }
 .card .control .item {
-  display: block;
+  display: inline-block;
+  width: 100%;
   color: #008;
-  margin-top: .2em;
-  margin-right: 1ex;
+  margin: .25em 0 0 0;
+  border: 1px solid black;
+  background: #FFF;
 }
 .card .control a.item {
-  min-width: 10ex;
-  border-style: solid double solid solid;
-  border-width: 1px 3px 1px 1px;
-  border-color: #000;
-  padding: .1em 1ex;
-  background: #FFF;
+  border-right: 3px double;
+  padding: .125em 1ex;
 }
 .card .control a.item:hover{
-  border-width: 1px 1px 1px 1px;
+  border-right: 1px solid;
 }
+.card .control .item[name=newfield] { width: 85%;}
+.card .control .item[value=addfield] { width: 15%;}
 
 .card .section {
   display: inline-block;
@@ -137,6 +123,7 @@ input[type="radio"]:checked + label::before {content: '\29bf';}
   padding: 0 1ex .25em 1ex;
 }
 .card .section:nth-of-type(2n){ background: #EEE;}
+
 .card .section h2, .card .section h3 {
   font-size: 1em;
   display: block;
diff --git a/templates/courses.css.sh b/templates/courses.css.sh
index 2c34fac..7db095c 100755
--- a/templates/courses.css.sh
+++ b/templates/courses.css.sh
@@ -19,11 +19,9 @@ cat <<EOF
 
 .sort {
   display: block;
-  width: 126ex;
-  border-width: 1px;
-  border-style: solid;
+  border: solid 1px;
   border-radius: 4px 4px 0 0 ;
-  margin: 1em auto .25em auto;
+  margin: .5em 2em .25em 2em;
   padding: .25em 2ex .25em 2ex;
   background: #EFF;
 }
@@ -33,41 +31,93 @@ cat <<EOF
 
 .newcourse {
   display: block;
-  width: 126ex;
-  border-width: 1px;
-  border-style: solid;
+  border: solid 1px;
   border-radius: 0 0 4px 4px;
-  margin: .25em auto 1em auto;
+  margin: .25em 2em 1em 2em;
   padding: .25em 2ex .25em 2ex;
   background: #EFF;
 }
 
-.courselist .course {
+.course {
   display: block;
-  width: 130ex;
-  border-style: solid;
-  border-width: 1px;
-  margin: .25em auto;
-  padding: 0;
+  position: relative;
+  border: solid 1px;
+  margin: .25em 2em;
+  padding: 0 20ex 0 0;
   overflow: auto;
   background: #FFF;
+  min-height: 9em;
+}
+.course .control {
+  display: inline-block;
+  position: absolute;
+  top 0; right: 0;
+  text-align: right;
+  background: #EEF;
+  margin: 0;
+  height: 100%;
+  width: 20ex;
+  max-width: 33%;
+  padding: .25em 1ex;
+}
+.course .control .item {
+  display: inline-block;
+  width: 100%;
+  color: #008;
+  margin: .25em 0 0 0;
+  border: 1px solid black;
+  background: #FFF;
+}
+.course .control a.item {
+  border-right: 3px double;
+  padding: .125em 1ex;
 }
+.course .control a.item:hover{
+  border-right: 1px solid;
+}
+
+.course .control .item[name=newfield] { width: 85%;}
+.course .control .item[value=addfield] { width: 15%;}
 
-.courselist .course .section {
+.course .section {
   display: inline-block;
-  float:left;
-  width: 25ex;
-  margin: .125em .5ex .5ex .5ex;
-  padding: 0 .5ex .5ex .5ex;
-  background: #EEE;
+  vertical-align: top;
+  float: left;
+  width: 20ex;
+  min-width: 16.5%;
+  min-height: 6em;
+  margin: .125em 0 .5ex 0;
+  padding: 0 1ex .25em 1ex;
+}
+.course .section:nth-of-type(2n){ background: #EEE;}
+
+.course .section .item {
+  display: block;
+  max-width: 100%;
+  word-wrap: break-word;
 }
 
-.courselist .course .attendance {
-  width:50ex;
+.course .section h2, .course .section h3 {
+  font-size: 1em;
+  display: block;
+  font-weight: bold;
+  margin: .25em -.5ex .25em -.5ex;
+  border-style: none none solid none;
+  border-width: 1px;
+}
+.course .section h2 {
+  font-size: 1.2em;
+  margin-top: 0;
 }
-.courselist .course .attendance a {
+
+.course .attendance {
+  min-width: 66%;
+}
+.course .attendance a {
   display: inline-block;
-  max-width: 13.75ex;
+  vertical-align: top;
+  min-width: 13.5ex;
+  width: 19%;
   color: #008;
   border-style: solid;
   border-width: 1px;
@@ -76,97 +126,71 @@ cat <<EOF
   background: #EFF;
 }
 
-.courselist .course .dtstart {
-  width: 35ex;
-}
-.courselist .course .dtstart .DTSYEAR{
+.course .dtstart { width: 37ex; }
+.course .dtstart .DTSYEAR,
+.course .dtstart .DTSMONTH,
+.course .dtstart .DTS{
+  font-size: .875em;
+  margin: .25em .25ex 1em .25ex;
   display: inline-block;
   text-align: center;
   font-weight: bold;
-  width: 11ex;
 }
-.courselist .course .dtstart .DTSMONTH{
-  display: inline-block;
-  text-align: center;
-  font-weight: bold;
-  width: 18ex;
-}
-.courselist .course .dtstart .DTS{
+
+.course .dtstart .DTSYEAR{ width: 11.5ex; }
+.course .dtstart .DTSMONTH{ width: 18.5ex; }
+.course .dtstart .DTS{ width: 5.5ex; }
+
+.course .dtstart .DTSCAL,
+.course .dtstart .DTSCALHEAD {
   display: inline-block;
+  overflow: hidden;
   text-align: center;
-  font-weight: bold;
-  width: 4ex;
+  width: 5ex;
+  margin: 0;
 }
-.courselist .course .dtstart .DTSCALHEAD{
-  display: inline-block;
+.course .dtstart .DTSCALHEAD {
   font-weight: bold;
-  width: 4.5ex;
-  margin: .25ex;
-  overflow: hidden;
+  border-top: 1px solid;
+  border-bottom: 1px solid;
 }
-.courselist .course .dtstart .DTSCAL{
-  display: inline-block;
-  width: 4.5ex;
-  margin: .25ex;
-}
-.courselist .course .dtstart input[name=DTSDAY] { display: none; }
-.courselist .course .dtstart input[name=DTSDAY]:checked + label.DTSCAL { font-weight: bold; }
 
-.courselist .course .dtstart .DTSTIME{
+.course .dtstart input[name=DTSDAY] { display: none; margin: 0; height: 0; width: 0; }
+.course .dtstart input[name=DTSDAY]:checked + label.DTSCAL { font-weight: bold; border: solid 1px; }
+
+.course .dtstart .DTSTIME{
   display: inline-block;
   width: 10ex;
-}
-.courselist .course .dtstart span.DTSTIME{
   font-weight: bold;
 }
 
-.courselist .course .recur{
-  width: 35ex;
+.course .recur{ width: 37ex; }
+.course .section select,
+.course .section button,
+.course .section input {
+  border: 1px solid;
+  margin: .5em 0;
 }
 
-.courselist .course .control {
-  float: right;
-  max-width: 22ex;
-  text-align: right;
-  margin-right: 0;
-  background: #EEF;
-}
-.courselist .course .control .item {
-  color: #008;
-  margin-top: .2em;
-  margin-right: 1ex;
-}
-.courselist .course .control a.item {
-  min-width: 10ex;
-  border-style: solid double solid solid;
-  border-width: 1px 3px 1px 1px;
-  border-color: #000;
-  padding: .1em 1ex;
-  background: #FFF;
-}
-.courselist .course .control a.item:hover{
-  border-width: 1px 1px 1px 1px;
-}
-
-.courselist .course .section .sectitle {
-  display: block;
-  font-weight: bold;
-  margin: .2em .2em .2em .2em;
+.course .select_attendance {
+  max-height: 17em;
+  overflow-y: scroll;
 }
-
-.courselist .course .section .item {
+.course .select_attendance label{
   display: block;
-  max-width: 25ex;
-  word-wrap: break-word;
+  position: relative;
+  margin: 0; padding: 0;
+  padding-left: 3ex;
 }
-.courselist .course .section input[type="text"] {
-  width: 24ex;
+.course .select_attendance label input{
+  position: absolute;
+  margin: 0; padding: 0;
+  margin-left: -3ex;
+  top: 0;
 }
 
-.courselist .course .section textarea.COMMENT {
-  width: 24ex;
-  min-height: 6em;
-}
+.course .section input[type="text"] { width: 100%; }
+.course .section textarea.COMMENT { min-height: 6em; width: 100%; overflow: auto; }
 
 EOF
 
diff --git a/templates/edit_attendee.sh b/templates/edit_attendee.sh
index 49d4666..5e472a8 100755
--- a/templates/edit_attendee.sh
+++ b/templates/edit_attendee.sh
@@ -123,11 +123,11 @@ cat <<END_HTML
   </div>
 
   <div class="control">
-    <button class="item" type="submit" name="action" value="addfield">$(l10n edit_addfield)</button>
     <select class="item" name="newfield">
       <option value="" disabled="disabled" selected="selected">$(l10n edit_addfieldtext)</option>
       $(for f in $SUP_FIELDS; do echo "<option value=\"$f\">$(l10n $f)</option>"; done)
-    </select>
+    </select
+    ><button class="item" type="submit" name="action" value="addfield">$(l10n edit_addfield)</button>
     <button class="item" type="submit" name="action" value="update">$(l10n edit_update)</button>
     <button class="item" type="submit" name="action" value="delete">$(l10n edit_delete)</button>
     <button class="item" type="submit" name="action" value="cancel">$(l10n edit_cancel)</button>
diff --git a/templates/edit_course.sh b/templates/edit_course.sh
index c1deb5a..d1bb75c 100755
--- a/templates/edit_course.sh
+++ b/templates/edit_course.sh
@@ -61,16 +61,16 @@ echo '<div id="'${id}'" class="course">'
 echo '<form action="?action=update_course" method="POST">'
 echo '<input type="hidden" name="course" value="'${id}'"/>'
 echo '  <div class="section basic">'
-echo '    <span class="sectitle">'$(l10n SUMMARY)'</span>'
+echo '    <h2>'$(l10n SUMMARY)'</h2>'
 echo '    <input type="text" class="item SUMMARY" name="SUMMARY" value="'$values[SUMMARY]'" />'
-echo '    <span class="sectitle">'$(l10n COMMENT)'</span>'
+echo '    <h3>'$(l10n COMMENT)'</h3>'
 for n in COMMENT COMMENT{0..10}; do [ -n "$values[$n]" ] &&\
   echo '    <textarea class="item COMMENT" name="COMMENT">'$values[$n]'</textarea>'
 done
 echo '  </div>'
 
 echo '  <div class="section dtstart">'
-echo '    <span class="sectitle">'$(l10n DTSTART)'</span>'
+echo '    <h3>'$(l10n DTSTART)'</h3>'
 echo '    <select class="DTSYEAR" name="DTSYEAR" onchange="this.form.submit();">'
 for y in {$(($dts_year - 50))..$(($dts_year + 50))}; do
   echo '    <option value="'$y'" '$([ "$y" -eq "$dts_year" ] && echo 'selected="selected"')'>'$y'</option>'
@@ -110,8 +110,9 @@ echo '    </select>'
 echo '  </div>'
 
 echo '  <div class="section recur">'
-echo '    <span class="sectitle">'$(l10n RRULE)'</span>'
-echo '    <span class="text">'$(l10n t_every)'</span>'
+echo '    <h3>'$(l10n RRULE)'</h3>'
+echo '    <span class="item">'
+echo '    '$(l10n t_every)''
 echo '    <select class="RRULE INTERVAL" name="RRULE_INTERVAL">'
 for i in {1..365}; do
   echo '    <option value="'$i'" '$([ "$i" = "$rr_int" ] && echo 'selected="selected"')'>'$i'</option>'
@@ -121,14 +122,17 @@ echo '    <select class="RRULE FREQ" name="RRULE_FREQ">'
 for f in DAILY WEEKLY MONTHLY YEARLY; do
   echo '    <option value="'$f'" '$([ "$f" = "$rr_freq" ] && echo 'selected="selected"')'>'$(l10n $f)'</option>'
 done
-echo '    </select><br/>'
+echo '    </select></span>'
+echo '    <span class="item">'
 echo '    <input type="radio" name="RRULE_LIMIT" value="ETERN" '$([ "$rr_limit" = ETERN ] && echo 'checked="checked"')'>'$(l10n t_eternal)'</input><br/>'
+echo '    </span><span class="item">'
 echo '    <input type="radio" name="RRULE_LIMIT" value="COUNT" '$([ "$rr_limit" = COUNT ] && echo 'checked="checked"')'></input>'
 echo '    <select class="RRULE COUNT" name="RRULE_COUNT">'
 for t in {1..365}; do
   echo '    <option value="'$t'" '$([ "$t" = "$rr_count" ] && echo 'selected="selected"')'>'$t'</option>'
 done
-echo '    </select><span class="text">'$(l10n t_times)'</span><br/>'
+echo '    </select>'$(l10n t_times)'</span>'
+echo '    <span class="item">'
 echo '    <input type="radio" name="RRULE_LIMIT" value="UNTIL" '$([ "$rr_limit" = UNTIL ] && echo 'checked="checked"')'>'$(l10n t_until)'</input>'
 echo '    <select class="RRULE UYEAR" name="RRULE_UYEAR">'
 for uy in {${dts_year}..$(($dts_year + 50))}; do
@@ -144,33 +148,31 @@ echo '    <select class="RRULE UDAY" name="RRULE_UDAY">'
 for ud in {01..31}; do
   echo '    <option value="'$ud'" '$([ "$ud" = "$rr_uday" ] && echo 'selected="selected"')'>'$ud'</option>'
 done
-echo '    </select>'
+echo '    </select></span>'
 echo '  </div>'
 
 echo '  <div class="section select_attendance">'
-echo '    <span class="sectitle">'$(l10n course_attendance)'</span>'
-echo '    <select class="item attendance" name="attendance" multiple="multiple">'
+echo '    <h3>'$(l10n course_attendance)'</h3>'
 listcards |while read card; do
   cfile="$_DATA/vcard/$card"
   aname=$(sed -rn 's:^N(;[^"\:]+|;"[^"]+")*\:([^;]*)(\;[^;]*)(\;[^;]*)?(\;[^;]*)?(\;[^;]*)?$:\5 \3 \4 \2 \6:p' "$cfile" \
           |sed -r 's:,: :;s:\;: :g;s: +: :g' \
           |tr -d '\r'
          )
-  selected=$(sed -rn "s:^$id\t$card\$:selected=\"selected\":p" $_DATA/mappings/attendance)
-  echo '    <option value="'$card'" '$selected'>'$aname'</option>'
+  selected=$(sed -rn "/^$id\t$card\$/{s;^.*\$;checked=\"checked\";p;q}" "${_DATA}/mappings/attendance")
+  echo '    <label><input type="checkbox" class="item" name="attendance" value="'$card'" '$selected'>'$aname'</label>'
 done
-echo '    </select>'
 echo '  </div>'
 
-echo '  <div class="section control">'
-echo '    <button class="item control" type="submit" name="action" value="addfield">'$(l10n edit_addfield)'</button>'
-echo '    <select class="item control" name="newfield">'
+echo '  <div class="control">'
+echo '    <select class="item" name="newfield">'
 echo '      <option value="" disabled="disabled" selected="selected">'$(l10n edit_addfieldtext)'</option>'
             for f in $SUP_FIELDS; do echo "<option value=\"$f\">$(l10n $f)</option>"; done
-echo '    </select>'
-echo '    <button class="item control" type="submit" name="action" value="update">'$(l10n edit_update)'</button>'
-echo '    <button class="item control" type="submit" name="action" value="delete">'$(l10n edit_delete)'</button>'
-echo '    <button class="item control" type="submit" name="action" value="cancel">'$(l10n edit_cancel)'</button>'
+echo '    </select'
+echo '    ><button class="item" type="submit" name="action" value="addfield">'$(l10n edit_addfield)'</button>'
+echo '    <button class="item" type="submit" name="action" value="update">'$(l10n edit_update)'</button>'
+echo '    <button class="item" type="submit" name="action" value="delete">'$(l10n edit_delete)'</button>'
+echo '    <button class="item" type="submit" name="action" value="cancel">'$(l10n edit_cancel)'</button>'
 echo '  </div>'
 echo '<input type="hidden" name="UID" value="'$values["UID"]'"/>'
 echo '</form>'
diff --git a/templates/frame.html.sh b/templates/frame.html.sh
index 738ec29..2cc13d1 100755
--- a/templates/frame.html.sh
+++ b/templates/frame.html.sh
@@ -30,9 +30,9 @@ cat <<EOF
     <!--
 * {
   font-family: sans-serif;
-  box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
+  box-sizing: border-box;
   z-index: 0;
 }
 body {
diff --git a/templates/text_attendee.sh b/templates/text_attendees.sh
similarity index 100%
rename from templates/text_attendee.sh
rename to templates/text_attendees.sh
diff --git a/templates/view_course.sh b/templates/view_course.sh
index ab93e02..f8e2f2c 100755
--- a/templates/view_course.sh
+++ b/templates/view_course.sh
@@ -61,7 +61,7 @@ echo '<div id="'${id}'" class="course">'
 echo '<form action="?action=update_course" method="POST">'
 echo '<input type="hidden" name="course" value="'${id}'"/>'
 echo '  <div class="section basic">'
-echo '    <span class="sectitle">'$values[SUMMARY]'</span>'
+echo '    <h2>'$values[SUMMARY]'</h2>'
 echo '    <span class="text">'$(date -d "$dts_date" "+%A %B %d, %Y - %H:%M") $(l10n t_oclock)'</span>'
 [ "$rr_int" -eq 1 ] \
 && echo '<span class="text">'$(l10n s$rr_freq)'</span>' \
@@ -79,22 +79,22 @@ esac
 echo '  </div>'
 
 echo '  <div class="section COMMENT">'
-echo '    <span class="sectitle">'$(l10n COMMENT)'</span>'
+echo '    <h3>'$(l10n COMMENT)'</h3>'
 for n in COMMENT COMMENT{0..10}; do [ -n "$values[$n]" ] &&\
   echo '    <p class="item COMMENT">'$(echo "$values[$n]" |sed -r "s:$:<br/>:g" )'</p>'
 done
 echo '  </div>'
 
 echo '  <div class="section attendance">'
-echo '    <span class="sectitle">'$(l10n course_attendance)'</span>'
+echo '    <h3>'$(l10n course_attendance)'</h3>'
 list_attendance "$id" |sort -k 2 |sed -r 's:^([^ ]+) (.*)$:<a class="attendance" href="?p=attendees#\1">\2</a>:'
 echo '  </div>'
 
-echo '  <div class="section control">'
-echo '    <a class="item control" href="?action=edit_course&course='${id}'">'$(l10n edit)'</a>'
-echo '    <a class="item control" href="?action=generate_courselist&course='${id}'" target="_blank">'$(l10n courselist)'</a>'
-echo '    <a class="item control" href="?action=export_ical&course='${id}'">'$(l10n ics_export)'</a>'
-echo '    <a class="item control" href="mailto:zack@vuesch.org?bcc='$(course_mail "$id")'">'$(l10n course_mail)'</a>'
+echo '  <div class="control">'
+echo '    <a class="item" href="?action=edit_course&course='${id}'">'$(l10n edit)'</a>'
+echo '    <a class="item" href="?action=generate_courselist&course='${id}'" target="_blank">'$(l10n courselist)'</a>'
+echo '    <a class="item" href="?action=export_ical&course='${id}'">'$(l10n ics_export)'</a>'
+echo '    <a class="item" href="mailto:zack@vuesch.org?bcc='$(course_mail "$id")'">'$(l10n course_mail)'</a>'
 echo '  </div>'
 echo '<input type="hidden" name="UID" value="'$values["UID"]'"/>'
 echo '</form>'
-- 
2.39.2