From 0e814c6ffab2486405f60a1dfbfa048e76bba1f2 Mon Sep 17 00:00:00 2001
From: paul <paul@plutz.net>
Date: Thu, 2 Jul 2015 12:30:29 +0000
Subject: [PATCH] little more "semantic markup"

svn path=/trunk/; revision=67
---
 templates/attendees.css.sh  | 97 ++++++++++++++++++++-----------------
 templates/attendees.html.sh | 64 +++++++++++++-----------
 templates/edit_attendee.sh  |  2 +-
 templates/frame.html.sh     | 23 ++++-----
 4 files changed, 99 insertions(+), 87 deletions(-)

diff --git a/templates/attendees.css.sh b/templates/attendees.css.sh
index ce0b82b..2aa7b40 100755
--- a/templates/attendees.css.sh
+++ b/templates/attendees.css.sh
@@ -1,4 +1,4 @@
-# Copyright 2014 Paul Hänsch
+# Copyright 2014, 2015 Paul Hänsch
 #
 # This file is part of Confetti.
 # 
@@ -17,71 +17,80 @@
 
 cat <<EOF
 
+input[type="checkbox"] { display: none; }
+input[type="checkbox"] + label::before {content: '\2610'; padding: 0 .5ex .25ex 0;}
+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'; padding: 0 .5ex .25ex 0;}
+input[type="radio"]:checked + label { text-decoration: underline; }
+input[type="radio"]:checked + label::before {content: '\29bf';}
+
 .filter {
   display: block;
-  width: 128ex;
-  border-width: 1px;
-  border-style: solid;
+  border: solid 1px;
   border-radius: 4px 4px 0 0;
-  margin: .5em auto .25em auto;
-  padding: .25em 1ex .25em 1ex;
+  margin: .5em 2em .25em 2em;
+  padding: 0 2ex .5em 2ex;
   background: #EFF;
 }
 
-.filter > .label {
+.filter h1 {
   display: block;
   font-weight: bold;
-  font-size: 1.2em;
+  font-size: 1.25em;
   border-style: none none solid none;
+  border-radius: 4px 4px 0 0;
   border-width: 1px;
-  margin: 0em 0ex .5em 0ex;
+  margin: 0 -1.625ex .5em -1.625ex;
+  padding: .125em 1ex;
   background: #EEF;
 }
-
-.filter .search {
-  margin: 0em 2ex .5em 2ex;
+.filter input[type="text"] {
+  width: 100%;
+  margin-bottom: .5em;
+}
+.filter fieldset {
+  border: none;
+  padding: 0 0 0 12ex;
+  margin: 0 0 -.5em 0;
 }
-.filter .search .label {
+.filter fieldset legend {
   display: inline-block;
-  width: 12ex;
+  font-size: 1em;
   font-weight: bold;
-  margin-top: .5em;
+  margin-left: -12ex;
 }
-.filter .search input[type="radio"] {
-  margin-top: .5em;
-  margin-left: 1ex;
+.filter input[type="radio"] + label {
+  display: inline-block;
+  position: relative;
+  top: -1.125em;
+  margin-left: 2ex;
 }
-.filter .search button {
+.filter button {
   margin-top: .5em;
 }
 
-.filter .search input[type="text"] {
-  width: 124ex;
-}
-
 .newcard {
   display: block;
-  width: 126ex;
   border-width: 1px;
   border-style: solid;
   border-radius: 0 0 4px 4px;
-  margin: .25em auto 1em auto;
+  margin: .25em 2em 1em 2em;
   padding: .25em 2ex .25em 2ex;
   background: #EFF;
 }
 
-.cardlist .card {
+.card {
   display: block;
-  width: 130ex;
   border-style: solid;
   border-width: 1px;
-  margin: .25em auto;
+  margin: .25em 2em;
   padding: 0;
   overflow: auto;
   background: #FFF;
 }
-
-.cardlist .card .section {
+.card .section {
   display: inline-block;
   float:left;
   width: 20ex;
@@ -89,37 +98,37 @@ cat <<EOF
   padding: 0 .2em .2em .2em;
   background: #EEE;
 }
-.cardlist .card .section a.attendance {
+.card .section a.attendance {
   display: inline-block;
   margin-right: 1ex;
   word-wrap: break-word;
 }
 
-.cardlist .card .attendance {
+.card .attendance {
   width: 83.5ex;
 }
-.cardlist .card .attendance .check {
+.card .attendance .check {
   display: inline-block;
   width: 27ex;
 }
 
-.cardlist .card .control {
+.card .control {
   float: right;
   text-align: right;
   margin-right: 0;
   background: #EEF;
 }
 
-.cardlist .card div.control {
+.card div.control {
   width: 23ex;
 }
 
-.cardlist .card .control .item {
+.card .control .item {
   color: #008;
   margin-top: .2em;
   margin-right: 1ex;
 }
-.cardlist .card .control a.item {
+.card .control a.item {
   min-width: 10ex;
   border-style: solid double solid solid;
   border-width: 1px 3px 1px 1px;
@@ -127,35 +136,35 @@ cat <<EOF
   padding: .1em 1ex;
   background: #FFF;
 }
-.cardlist .card .control a.item:hover{
+.card .control a.item:hover{
   border-width: 1px 1px 1px 1px;
 }
 
-.cardlist .card .section .sectitle {
+.card .section .sectitle {
   display: block;
   font-weight: bold;
   margin: .2em .2em .2em .2em;
 }
 
-.cardlist .card .section .item {
+.card .section .item {
   display: block;
   max-width: 20ex;
   word-wrap: break-word;
 }
 
-.cardlist .card .section textarea.NOTE {
+.card .section textarea.NOTE {
   min-height: 6em;
 }
-.cardlist .card .section textarea.ADR {
+.card .section textarea.ADR {
   min-height: 4em;
 }
 
-.cardlist .card .section .PHOTO {
+.card .section .PHOTO {
   width: 20ex;
   max-heigth: 30ex;
 }
 
-.cardlist .card .section .FN {
+.card .section .FN {
   font-weight: bold;
   font-size: 1.2em;
 }
diff --git a/templates/attendees.html.sh b/templates/attendees.html.sh
index 7613a0b..1b57df1 100755
--- a/templates/attendees.html.sh
+++ b/templates/attendees.html.sh
@@ -27,38 +27,45 @@ edit="$_GET[\"edit\"]"
 [ -z "$_GET[\"order\"]" ] && _GET["order"]="firstname"
 
 cat <<EOF
-<div class="filter">
-  <span class="label">$(l10n filter_label)</span>
-  <form class="search" action="?action=filter_attendee" method="POST">
-    <input type="hidden" name="page" value="attendees"/>
-    <input type="text" name="filter" value="$_GET["filter"]" placeholder="$(l10n filter_placeholder)"/>
-    <br />
-    <span class="label">$(l10n filter_type):</span>
-    <input type="radio" name="filtertype" value="any" $(check_type any)>$(l10n filter_all)</input>
-    <input type="radio" name="filtertype" value="name" $(check_type name)>$(l10n filter_name)</input>
-    <input type="radio" name="filtertype" value="street" $(check_type street)>$(l10n filter_street)</input>
-    <input type="radio" name="filtertype" value="zip" $(check_type zip)>$(l10n filter_zip)</input>
-    <input type="radio" name="filtertype" value="telephone" $(check_type telephone)>$(l10n filter_phone)</input>
-    <input type="radio" name="filtertype" value="birth" $(check_type birth)>$(l10n filter_birthyear)</input>
-    <input type="radio" name="filtertype" value="course" $(check_type course)>$(l10n filter_course)</input>
-    <br />
-    <span class="label">$(l10n filter_order):</span>
-    <input type="radio" name="order" value="firstname" $(check_order firstname)>$(l10n filter_firstname)</input>
-    <input type="radio" name="order" value="lastname" $(check_order lastname)>$(l10n filter_lastname)</input>
-    <input type="radio" name="order" value="bdate" $(check_order bdate)>$(l10n filter_bdate)</input>
-    <br>
-    <button type="submit" name="choice" value="new_filter">$(l10n filter_apply)</button>
-    <button type="submit" name="choice" value="del_filter">$(l10n filter_cancel)</button>
-  </form>
-</div>
+<form class="filter" action="?action=filter_attendee" method="POST">
+  <h1>$(l10n filter_label)</h1>
+  <input type="hidden" name="page" value="attendees"/>
+  <input type="text" name="filter" value="$_GET["filter"]" placeholder="$(l10n filter_placeholder)"/>
+  <br />
+  <fieldset>
+  <legend>$(l10n filter_type):</legend>
+    <input type="radio" name="filtertype" value="any"       id="ft_any"    $(check_type any)
+     ><label for="ft_any"   >$(l10n filter_all)</label>
+    <input type="radio" name="filtertype" value="name"      id="ft_name"   $(check_type name)
+     ><label for="ft_name"  >$(l10n filter_name)</label>
+    <input type="radio" name="filtertype" value="street"    id="ft_street" $(check_type street)
+     ><label for="ft_street">$(l10n filter_street)</label>
+    <input type="radio" name="filtertype" value="zip"       id="ft_zip"    $(check_type zip)
+     ><label for="ft_zip"   >$(l10n filter_zip)</label>
+    <input type="radio" name="filtertype" value="telephone" id="ft_phone"  $(check_type telephone)
+     ><label for="ft_phone" >$(l10n filter_phone)</label>
+    <input type="radio" name="filtertype" value="birth"     id="ft_birth"  $(check_type birth)
+     ><label for="ft_birth" >$(l10n filter_birthyear)</label>
+    <input type="radio" name="filtertype" value="course"    id="ft_course" $(check_type course)
+     ><label for="ft_course">$(l10n filter_course)</label>
+  </fieldset>
+  <fieldset>
+    <legend>$(l10n filter_order):</legend>
+    <input type="radio" name="order" value="firstname" id="od_fname" $(check_order firstname)
+     ><label for="od_fname">$(l10n filter_firstname)</label>
+    <input type="radio" name="order" value="lastname"  id="od_lname" $(check_order lastname)
+     ><label for="od_lname">$(l10n filter_lastname)</label>
+    <input type="radio" name="order" value="bdate"     id="od_bdate" $(check_order bdate)
+     ><label for="od_bdate">$(l10n filter_bdate)</label>
+  </fieldset>
+  <button type="submit" name="choice" value="new_filter">$(l10n filter_apply)</button>
+  <button type="submit" name="choice" value="del_filter">$(l10n filter_cancel)</button>
+</form>
 
-<div class="newcard">
-<form action="?action=new_attendee" method="POST">
+<form class="newcard" action="?action=new_attendee" method="POST">
   <button type="submit">$(l10n newcard)</button>
 </form>
-</div>
 
-<div class="cardlist">
 $(
 [ -f "vcard/$edit" -o -f "temp/$edit" ] &&  edit_attendee "$edit"
 if [ "$?" = 0 ]; then
@@ -69,7 +76,6 @@ fi |while read card; do
   view_attendee "$card"
 done
 )
-</div>
 EOF
 
 # vi:set filetype=html:
diff --git a/templates/edit_attendee.sh b/templates/edit_attendee.sh
index e505012..bf50455 100755
--- a/templates/edit_attendee.sh
+++ b/templates/edit_attendee.sh
@@ -122,7 +122,7 @@ echo '  <div class="section attendance">'
 echo '    <span class="sectitle">'$(l10n course_attendance)'</span>'
 listcourses |while read each; do
   cname="$(sed -rn 's:^SUMMARY\:(.*)$:\1:p' "$_DATA/ical/$each")"
-  echo '    <span class="check attendance"><input type="checkbox" name="attendance" value="'$each'" '$(check_a "$each")'/>'$cname'</span>'
+  echo '    <input type="checkbox" name="attendance" value="'$each'" id="cbatt_'$each'" '$(check_a "$each")'/><label for="cbatt_'$each'"class="check attendance">'$cname'</label>'
 done
 echo '  </div>'
 echo ''
diff --git a/templates/frame.html.sh b/templates/frame.html.sh
index d6441d2..fafd0b2 100755
--- a/templates/frame.html.sh
+++ b/templates/frame.html.sh
@@ -23,10 +23,13 @@ cat <<EOF
     <title>$($PAGE title)</title>
     <style type="text/css">
     <!--
-body {
+* {
+  font-family: sans-serif;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
+}
+body {
   background: #EEE;
   margin: 0;
   padding: 2.5em 0 0 0;
@@ -35,20 +38,16 @@ body {
   position: fixed;
   top: 0;
   display: inline-block;
-  height: 1.5em;
   border-style: none solid solid solid;
   border-width: 0 1px 1px 1px;
   border-radius: 0 0 4px 4px;
-  margin-top: 0;
-  margin-left: 3%;
+  margin: 0 auto auto 3%;
   padding: .5em 1ex .25em 1ex;
   background: #FFF;
 }
 .NAVIGATION a {
   color: #008;
-  border-style: solid;
-  border-width: 1px;
-  border-color: #BBF;
+  border: solid 1px #BBF;
   margin: .5em .5ex .25em .5ex;
   padding: .2em 3ex .2em 3ex;
   background: #EFF;
@@ -58,18 +57,16 @@ body {
   background: #F3FFFF;
 }
 
-
-    $(. $PAGE css)
+/* dynamic page CSS starts here */
+$(. $PAGE css)
     -->
     </style>
   </head>
-  <body>
+  <body class="$PAGE">
     <div class="NAVIGATION">
       $(NAVIGATION |sed -r 's:^([^ ]+) (.+)$:<a href="\1">\2</a>:g')
     </div>
-    <div class="MAIN">
-      $(. $PAGE body)
-    </div>
+    $(. $PAGE body)
   </body>
 </html>
 EOF
-- 
2.39.2