From: paul <paul@plutz.net>
Date: Fri, 3 Jul 2015 12:24:03 +0000 (+0000)
Subject: css and markup improvements
X-Git-Url: https://git.plutz.net/?a=commitdiff_plain;h=10dc80cb808b22e1ffe613b3a6b5ec82691b08dc;p=lobster

css and markup improvements

svn path=/trunk/; revision=69
---

diff --git a/templates/attendees.css.sh b/templates/attendees.css.sh
index e4038f0..6d375a1 100755
--- a/templates/attendees.css.sh
+++ b/templates/attendees.css.sh
@@ -83,47 +83,28 @@ input[type="radio"]:checked + label::before {content: '\29bf';}
 
 .card {
   display: block;
+  position: relative;
   border-style: solid;
   border-width: 1px;
   margin: .25em 2em;
-  padding: 0;
+  padding: 0 20ex 0 0;
   overflow: auto;
   background: #FFF;
 }
-.card .section {
-  display: inline-block;
-  float:left;
-  width: 20ex;
-  margin: .125em .25ex .5ex .25ex;
-  padding: 0 .2em .2em .2em;
-  background: #EEE;
-}
-.card .section a.attendance {
-  display: inline-block;
-  margin-right: 1ex;
-  word-wrap: break-word;
-}
-
-.card .attendance {
-  width: 83.5ex;
-}
-.card .attendance .check {
-  display: inline-block;
-  width: 27ex;
-}
-
 .card .control {
-  float: right;
+  display: inline-block;
+  position: absolute;
+  top: 0; right: 0;
   text-align: right;
-  margin-right: 0;
   background: #EEF;
+  margin: 0;
+  height: 100%;
+  width: 20ex;
+  max-width: 33%;
+  padding: .25em 1ex;
 }
-
-.card div.control {
-  width: 23ex;
-}
-
 .card .control .item {
+  display: block;
   color: #008;
   margin-top: .2em;
   margin-right: 1ex;
@@ -140,19 +121,48 @@ input[type="radio"]:checked + label::before {content: '\29bf';}
   border-width: 1px 1px 1px 1px;
 }
 
+.card .section {
+  display: inline-block;
+  vertical-align: top;
+  float: left;
+  width: 20ex;
+  min-width: 16.5%;
+  min-height: 6em;
+  margin: .125em 0 .5ex 0;
+  padding: 0 1ex .25em 1ex;
+}
+.card .section:nth-of-type(2n){ background: #EEE;}
 .card .section h2, .card .section h3 {
   font-size: 1em;
   display: block;
   font-weight: bold;
-  margin: .2em .2em .2em .2em;
+  margin: .25em -.5ex .25em -.5ex;
+  border-style: none none solid none;
+  border-width: 1px;
 }
-.card .section .FN {
+.card .section .FN {  /* will override h2 */
   font-size: 1.2em;
+  margin-top: 0;
 }
 
+.card .section.attendance ul { margin: 0; padding: 0; }
+.card .section.attendance ul li {
+  display: block;
+  word-wrap: break-word;
+}
+
+form.card .attendance {
+  min-width: 66%;
+}
+form.card .attendance input[type=checkbox] + label {
+  display: inline-block;
+  width: 25ex;
+}
+
+
 .card .section .item {
   display: block;
-  max-width: 20ex;
+  max-width: 100%;
   word-wrap: break-word;
 }
 
@@ -164,8 +174,8 @@ input[type="radio"]:checked + label::before {content: '\29bf';}
 }
 
 .card .section .PHOTO {
-  width: 20ex;
-  max-heigth: 30ex;
+  width: 100%;
+  max-height: 10em;
 }
 
 
diff --git a/templates/edit_attendee.sh b/templates/edit_attendee.sh
index b8b4000..4513a3d 100755
--- a/templates/edit_attendee.sh
+++ b/templates/edit_attendee.sh
@@ -1,4 +1,4 @@
-# Copyright 2014 Paul Hänsch
+# Copyright 2014, 2015 Paul Hänsch
 #
 # This file is part of Confetti.
 # 
@@ -32,111 +32,107 @@ SUP_FIELDS=(N NICKNAME GENDER BDAY X-ZACK-JOINDATE X-ZACK-LEAVEDATE EMAIL TEL IM
 
 [ -z "$values[UID]" ] && values[UID]="$(uuidgenerator)"
 
-echo '<div id="'${id}'" class="card">'
-echo '<form action="?action=update_attendee" method="POST">'
-echo '<input type="hidden" name="card" value="'${id}'"/>'
-echo '  <div class="section basic">'
-echo '    <h3>'$(l10n N)'</h3>'
-echo '    <input class="item N" name="3N" placeholder="'$(l10n n_pre)'" value="'$n_pre'" />'
-echo '    <input class="item N" name="1N" placeholder="'$(l10n n_first)'" value="'$n_first'" />'
-echo '    <input class="item N" name="2N" placeholder="'$(l10n n_middle)'" value="'$n_middle'" />'
-echo '    <input class="item N" name="0N" placeholder="'$(l10n n_last)'" value="'$n_last'" />'
-echo '    <input class="item N" name="4N" placeholder="'$(l10n n_post)'" value="'$n_post'" />'
-
-echo '    <select class="item GENDER" name="GENDER">'
-echo '      <option value="" disabled="disabled">'$(l10n GENDER)'</option>'
-echo '      <option value="female" '$(check_gen female)'>'$(l10n gender_female)'</option>'
-echo '      <option value="male" '$(check_gen male)'>'$(l10n gender_male)'</option>'
-echo '      <option value="other" '$(check_gen other)'>'$(l10n gender_other)'</option>'
-echo '      <option value="none" '$(check_gen none)'>'$(l10n gender_none)'</option>'
-echo '    </select>'
-
-for n in NICKNAME NICKNAME{0..10}; do [ -n "$values[$n]" ] &&\
-  echo '    <input class="item NICKNAME" name="NICKNAME" placeholder="'$(l10n NICKNAME)'" value="'$values[$n]'" />'
-done
-
-echo '    <h3>'$(l10n BDAY)'</h3>'
-echo '    <input class="item BDAY" name="BDAY" value="'$values[BDAY]'" />'
-
-echo '    <h3>'$(l10n X-ZACK-JOINDATE)'</h3>'
-echo '    <input class="item X-ZACK-LEAVEDATE" name="X-ZACK-JOINDATE" value="'$values[X-ZACK-JOINDATE]'" />'
-if [ -n "$values[X-ZACK-LEAVEDATE]" ]; then
-  echo '    <h3>'$(l10n X-ZACK-LEAVEDATE)'</h3>'
-  echo '    <input class="item X-ZACK-LEAVEDATE" name="X-ZACK-LEAVEDATE" value="'$values[X-ZACK-LEAVEDATE]'" />'
-fi
-
-if [ -n "$values[SOUND]" ]; then
-  echo '    <audio controls="controls" class="item SOUND">'
-  echo '      <source type="audio/ogg" src="data:audio/ogg;base64,'$values[SOUND]'" />'
-  echo '    </audio>'
-fi
-[ -n "$values[PHOTO]" ] &&\
-  echo '    <img class="item PHOTO" src="data:image/'$tags[PHOTO_TYPE]';base64,'$values[PHOTO]'" />'
-[ -n "$values[LOGO]" ] &&\
-  echo '    <img class="item LOGO" src="data:image/'$tags[LOGO_TYPE]';base64,'$values[LOGO]'" />'
-echo '  </div>'
-echo ''
-echo '  <div class="section phone">'
-echo '    <h3>'$(l10n TEL)'</h3>'
-  echo '    <input class="item TEL" name="TEL" value="'$values[TEL]'" />'
-for n in TEL{0..10}; do [ -n "$values[$n]" ] &&\
-  echo '    <input class="item TEL" name="TEL" value="'$values[$n]'" />'
-done
-echo '  </div>'
-echo ''
-echo '  <div class="section message">'
-echo '    <h3>'$(l10n EMAIL)'</h3>'
-  echo '    <input class="item EMAIL" name="EMAIL" value="'$values[EMAIL]'" />'
-for n in EMAIL{0..10}; do [ -n "$values[$n]" ] &&\
-  echo '    <input class="item EMAIL" name="EMAIL" value="'$values[$n]'" />'
-done
-[ -n "$values[IMPP]" ] && \
-  echo '    <h3>'$(l10n IMPP)'</h3>'
-for n in IMPP IMPP{0..10}; do [ -n "$values[$n]" ] &&\
-  echo '    <input class="item IMPP" name="IMPP" value="'$values[$n]'" />'
-done
-echo '  </div>'
-echo ''
-echo '  <div class="section address">'
-echo '    <h3>'$(l10n ADR)'</h3>'
-echo '    <textarea class="item ADR" name="ADR">'$values[ADR]'</textarea>'
-for n in ADR{0..10}; do [ -n "$values[$n]" ] &&\
-  echo '    <textarea class="item ADR" name="ADR">'$values[$n]'</textarea>'
-done
-[ -n "$values[URL]" ] && \
-  echo '    <h3>'$(l10n URL)'</h3>'
-for n in URL URL{0..10}; do [ -n "$values[$n]" ] &&\
-  echo '    <input class="item URL" name="URL" value="'$values[$n]'" />'
-done
-echo '  </div>'
-echo ''
-echo '  <div class="section note">'
-echo '    <h3>'$(l10n NOTE)'</h3>'
-echo '    <textarea class="item NOTE" name="NOTE">'$values[NOTE]'</textarea>'
-for n in NOTE{0..10}; do [ -n "$values[$n]" ] &&\
-  echo '    <textarea class="item NOTE" name="NOTE">'$values[$n]'</textarea>'
-done
-echo '  </div>'
-echo ''
-echo '  <div class="section attendance">'
-echo '    <h3>'$(l10n course_attendance)'</h3>'
-listcourses |while read each; do
-  cname="$(sed -rn 's:^SUMMARY\:(.*)$:\1:p' "$_DATA/ical/$each")"
-  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 ''
-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 '      <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 '  </div>'
-echo '<input type="hidden" name="UID" value="'$values[UID]'"/>'
-echo '</form>'
-echo '</div>'
+cat <<END_HTML
+<form id="$id" class="card" action="?action=update_attendee" method="POST">
+  <input type="hidden" name="card" value="${id}"/>
+  <div class="section basic">
+    <h3>$(l10n N)</h3>
+    <input class="item N" name="3N" placeholder="$(l10n n_pre)" value="$n_pre" />
+    <input class="item N" name="1N" placeholder="$(l10n n_first)" value="$n_first" />
+    <input class="item N" name="2N" placeholder="$(l10n n_middle)" value="$n_middle" />
+    <input class="item N" name="0N" placeholder="$(l10n n_last)" value="$n_last" />
+    <input class="item N" name="4N" placeholder="$(l10n n_post)" value="$n_post" />
 
+    <select class="item GENDER" name="GENDER">
+      <option value="" disabled="disabled">$(l10n GENDER)</option>
+      <option value="female" $(check_gen female)>$(l10n gender_female)</option>
+      <option value="male" $(check_gen male)>$(l10n gender_male)</option>
+      <option value="other" $(check_gen other)>$(l10n gender_other)</option>
+      <option value="none" $(check_gen none)>$(l10n gender_none)</option>
+    </select>
+
+    $(for n in NICKNAME NICKNAME{0..10}; do
+      echo "${values[$n]:+<input class="item NICKNAME" name="NICKNAME" placeholder="$(l10n NICKNAME)" value="$values[$n]" />}"
+    done)
+
+    <h3>$(l10n BDAY)</h3>
+    <input class="item BDAY" name="BDAY" value="$values[BDAY]" />
+
+    <h3>$(l10n X-ZACK-JOINDATE)</h3>
+    <input class="item X-ZACK-LEAVEDATE" name="X-ZACK-JOINDATE" value="$values[X-ZACK-JOINDATE]" />
+    $(if [ -n "$values[X-ZACK-LEAVEDATE]" ]; then
+      echo '    <h3>'$(l10n X-ZACK-LEAVEDATE)'</h3>'
+      echo '    <input class="item X-ZACK-LEAVEDATE" name="X-ZACK-LEAVEDATE" value="'$values[X-ZACK-LEAVEDATE]'" />'
+    fi)
+
+    $(if [ -n "$values[SOUND]" ]; then
+      echo '    <audio controls="controls" class="item SOUND">'
+      echo '      <source type="audio/ogg" src="data:audio/ogg;base64,'$values[SOUND]'" />'
+      echo '    </audio>'
+    fi)
+    ${values[PHOTO]:+<img class="item PHOTO" src="data:image/$tags[PHOTO_TYPE];base64,$values[PHOTO]" />}
+    ${values[LOGO]:+<img class="item LOGO" src="data:image/$tags[LOGO_TYPE];base64,$values[LOGO]" />}
+  </div>
+
+  <div class="section phone">
+    <h3>$(l10n TEL)</h3>
+    <input class="item TEL" name="TEL" value="$values[TEL]" />
+    $(for n in TEL{0..10}; do
+      echo "${values[$n]:+<input class="item TEL" name="TEL" value="'$values[$n]'" />}"
+    done)
+  </div>
+
+  <div class="section message">
+    <h3>$(l10n EMAIL)</h3>
+    <input class="item EMAIL" name="EMAIL" value="$values[EMAIL]" />
+    $(for n in EMAIL{0..10}; do
+      echo "${values[$n]:+<input class="item EMAIL" name="EMAIL" value="$values[$n]" />}"
+    done)
+    ${values[IMPP]:+<h3>$(l10n IMPP)</h3>}
+    $(for n in IMPP IMPP{0..10}; do
+      echo "${values[$n]:+<input class="item IMPP" name="IMPP" value="$values[$n]" />}"
+    done)
+  </div>
+
+  <div class="section address">
+    <h3>$(l10n ADR)</h3>
+    <textarea class="item ADR" name="ADR">$values[ADR]</textarea>
+    $(for n in ADR{0..10}; do
+      echo "${values[$n]:+<textarea class="item ADR" name="ADR">$values[$n]</textarea>}"
+    done)
+    ${values[URL]:+<h3>$(l10n URL)</h3>}
+    $(for n in URL URL{0..10}; do
+      echo "${values[$n]:+<input class="item URL" name="URL" value="$values[$n]" />}"
+    done)
+  </div>
+
+  <div class="section note">
+    <h3>$(l10n NOTE)</h3>
+    <textarea class="item NOTE" name="NOTE">$values[NOTE]</textarea>
+    $(for n in NOTE{0..10}; do
+      echo "${values[$n]:+<textarea class="item NOTE" name="NOTE">$values[$n]</textarea>}"
+    done)
+  </div>
+
+  <div class="section attendance">
+    <h3>$(l10n course_attendance)</h3>
+    $(listcourses |while read each; do
+      cname="$(sed -rn 's:^SUMMARY\:(.*)$:\1:p' "$_DATA/ical/$each")"
+      echo '<input type="checkbox" name="attendance" value="'$each'" id="cbatt_'$each'" '$(check_a "$each")'/
+            ><label for="cbatt_'$each'">'$cname'</label>'
+    done)
+  </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>
+    <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>
+  </div>
+  <input type="hidden" name="UID" value="$values[UID]"/>
+</form>
+END_HTML
diff --git a/templates/frame.html.sh b/templates/frame.html.sh
index 8a754ba..27d9466 100755
--- a/templates/frame.html.sh
+++ b/templates/frame.html.sh
@@ -28,6 +28,7 @@ cat <<EOF
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
+  z-index: 0;
 }
 body {
   background: #EEE;
@@ -44,6 +45,7 @@ body {
   margin: 0 auto auto 3%;
   padding: .5em 1ex .5em 1ex;
   background: #FFF;
+  z-index: 1;
 }
 .NAVIGATION a {
   color: #008;
diff --git a/templates/view_attendee.sh b/templates/view_attendee.sh
index d54c11f..0bc29f7 100755
--- a/templates/view_attendee.sh
+++ b/templates/view_attendee.sh
@@ -1,4 +1,4 @@
-# Copyright 2014 Paul Hänsch
+# Copyright 2014, 2015 Paul Hänsch
 #
 # This file is part of Confetti.
 # 
@@ -15,82 +15,73 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with Confetti.  If not, see <http://www.gnu.org/licenses/>. 
 
-echo '<div id="'${id}'" class="card">'
-echo '  <div class="section basic">'
-echo '    <h2 class="item FN">'$values[FN]'</h2>'
-[ -n "$values[GENDER]" ] && \
-  echo '    <span class="item GENDER">'$(l10n $values[GENDER])'</span>'
-for n in NICKNAME NICKNAME{0..10}; do [ -n "$values[$n]" ] &&\
-  echo '    <span class="item NICKNAME">aka. '$values[$n]'</span>'
-done
-[ -n "$values[BDAY]" ] &&\
-  echo '    <span class="item BDAY"><b>*:</b> '$values[BDAY]'</span>'
+cat <<END_HTML
+<div id="${id}" class="card">
+  <div class="section basic">
+    <h2 class="item FN">$values[FN]</h2>
+    ${values[GENDER]:+<span class="item GENDER">$(l10n $values[GENDER])</span>}
 
-[ -n "$values[X-ZACK-JOINDATE]" ] &&\
-  echo '    <span class="item X-ZACK-JOINDATE"><b>'$(l10n label_join)':</b> '$values[X-ZACK-JOINDATE]'</span>'
-[ -n "$values[X-ZACK-LEAVEDATE]" ] &&\
-  echo '    <span class="item X-ZACK-LEAVEDATE"><b>'$(l10n label_leave)':</b> '$values[X-ZACK-LEAVEDATE]'</span>'
+    $(for n in NICKNAME NICKNAME{0..10}; do
+      echo "${values[$n]:+<span class="item NICKNAME">aka. $values[$n]</span>}"
+    done)
 
-if [ -n "$values[SOUND]" ]; then
-  echo '    <audio controls="controls" class="item SOUND">'
-  echo '      <source type="audio/ogg" src="data:audio/ogg;base64,'$values[SOUND]'" />'
-  echo '    </audio>'
-fi
-[ -n "$values[PHOTO]" ] &&\
-  echo '    <img class="item PHOTO" src="data:image/'$tags[PHOTO_TYPE]';base64,'$values[PHOTO]'" />'
-[ -n "$values[LOGO]" ] &&\
-  echo '    <img class="item LOGO" src="data:image/'$tags[LOGO_TYPE]';base64,'$values[LOGO]'" />'
-echo '  </div>'
-echo ''
-echo '  <div class="section phone">'
-echo '    <h3>'$(l10n TEL)'</h3>'
-for n in TEL TEL{0..10}; do [ -n "$values[$n]" ] &&\
-  echo '    <span class="item TEL">'$tags[${n}_TYPE]' '$values[$n]'</span>'
-done
-echo '  </div>'
-echo ''
-echo '  <div class="section message">'
-[ -n "$values[EMAIL]" ] && \
-  echo '    <h3>'$(l10n EMAIL)'</h3>'
-for n in EMAIL EMAIL{0..10}; do [ -n "$values[$n]" ] &&\
-  echo '    <span class="item EMAIL"><a href="mailto:'$values[$n]'">'$values[$n]'</a></span>'
-done
-[ -n "$values[IMPP]" ] && \
-  echo '    <h3>'$(l10n IMPP)'</h3>'
-for n in IMPP IMPP{0..10}; do [ -n "$values[$n]" ] &&\
-  echo '    <span class="item IMPP">'$tags[${n}_TYPE]' <a href="'$values[$n]'">'$values[$n]'</a></span>'
-done
-echo '  </div>'
-echo ''
-echo '  <div class="section address">'
-echo '    <h3>'$(l10n ADR)'</h3>'
-for n in ADR ADR{0..10}; do [ -n "$values[$n]" ] &&\
-  echo '    <span class="item ADR">'$values[$n]'</span>'
-done
-[ -n "$values[URL]" ] && \
-  echo '    <h3>'$(l10n URL)'</h3>'
-for n in URL URL{0..10}; do [ -n "$values[$n]" ] &&\
-  echo '    <span class="item URL"><a href="'$values[$n]'">'$values[$n]'</a></span>'
-done
-echo '  </div>'
-echo ''
-echo '  <div class="section note">'
-echo '    <h3>'$(l10n NOTE)'</h3>'
-for n in NOTE NOTE{0..10}; do [ -n "$values[$n]" ] &&\
-  echo '    <span class="item NOTE">'$values[$n]'</span>'
-done
-echo '  </div>'
-echo ''
-echo '  <div class="section">'
-echo '    <h3>'$(l10n course_attendance)'</h3>'
-sed -rn 's:(.*)\t'$id'$:\1:p' "$_DATA/mappings/attendance" |while read each; do
-  cname="$(sed -rn 's:^SUMMARY\:(.*)$:\1:p' "$_DATA/ical/$each")"
-  echo '    <a class="item attendance" href="?p=courses#'$each'">'$cname'</a>'
-done
-echo '  </div>'
-echo ''
-echo '  <div class="section control">'
-echo '    <a class="item control" href="?action=edit_attendee&card='${id}'">'$(l10n edit)'</a>'
-echo '    <a class="item control" href="?action=export_vcard&card='${id}'">'$(l10n vcf_export)'</a>'
-echo '  </div>'
-echo '</div>'
+    ${values[BDAY]:+<span class="item BDAY"><b>*:</b> $values[BDAY]</span>}
+    ${values[X-ZACK-JOINDATE]:+<span class="item X-ZACK-JOINDATE"><b>$(l10n label_join):</b> $values[X-ZACK-JOINDATE]</span>}
+    ${values[X-ZACK-LEAVEDATE]:+<span class="item X-ZACK-LEAVEDATE"><b>$(l10n label_leave):</b> $values[X-ZACK-LEAVEDATE]</span>}
+    ${values[SOUND]:+<audio controls="controls" class="item SOUND"><source type="audio/ogg" src="data:audio/ogg;base64,$values[SOUND]" /></audio>}
+    ${values[PHOTO]:+<img class="item PHOTO" src="data:image/$tags[PHOTO_TYPE];base64,$values[PHOTO]" />}
+    ${values[LOGO]:+<img class="item LOGO" src="data:image/$tags[LOGO_TYPE];base64,$values[LOGO]" />}
+  </div><!--
+
+  --><div class="section phone">
+    <h3>$(l10n TEL)</h3>
+    $(for n in TEL TEL{0..10}; do
+      echo "${values[$n]:+<span class="item TEL">$tags[${n}_TYPE] $values[$n]</span>}"
+    done)
+  </div><!--
+
+  --><div class="section message">
+    ${values[EMAIL]:+<h3>$(l10n EMAIL)</h3>}
+    $(for n in EMAIL EMAIL{0..10}; do
+      echo "${values[$n]:+<span class="item EMAIL"><a href="mailto:$values[$n]">$values[$n]</a></span>}"
+    done)
+    ${values[IMPP]:+<h3>$(l10n IMPP)</h3>}
+    $(for n in IMPP IMPP{0..10}; do
+      echo "${values[$n]:+<span class="item IMPP">$tags[${n}_TYPE] <a href="$values[$n]">$values[$n]</a></span>}"
+    done)
+  </div><!--
+
+  --><div class="section address">
+    <h3>$(l10n ADR)</h3>
+    $(for n in ADR ADR{0..10}; do
+      echo "${values[$n]:+<span class="item ADR">$values[$n]</span>}"
+    done)
+    ${values[URL]:+<h3>$(l10n URL)</h3>}
+    $(for n in URL URL{0..10}; do
+      echo "${values[$n]:+<span class="item URL"><a href="$values[$n]">$values[$n]</a></span>}"
+    done)
+  </div><!--
+
+  --><div class="section note">
+    <h3>$(l10n NOTE)</h3>
+    $(for n in NOTE NOTE{0..10}; do
+      echo "${values[$n]:+<span class="item NOTE">$values[$n]</span>}"
+    done)
+  </div><!--
+
+  --><div class="section attendance">
+    <h3>$(l10n course_attendance)</h3>
+    <ul>
+    $(sed -rn 's:(.*)\t'$id'$:\1:p' "$_DATA/mappings/attendance" |while read each; do
+      cname="$(sed -rn 's:^SUMMARY\:(.*)$:\1:p' "$_DATA/ical/$each")"
+      echo '   <li><a class="item attendance" href="?p=courses#'$each'">'$cname'</a></li>'
+    done)
+    </ul>
+  </div><!--
+
+  --><div class="control">
+    <a class="item" href="?action=edit_attendee&card=${id}">$(l10n edit)</a>
+    <a class="item" href="?action=export_vcard&card=${id}">$(l10n vcf_export)</a>
+  </div>
+</div>
+END_HTML