From 268f33d7d6e4fceb0b2ee6cc24ef95b4b743372e Mon Sep 17 00:00:00 2001
From: paul <paul@plutz.net>
Date: Sat, 27 Sep 2014 01:00:33 +0000
Subject: [PATCH] improved semantic markup

svn path=/trunk/; revision=17
---
 pages/videoview.sh           |  4 ++--
 templates/filterdiag.html.sh | 39 ++++++++++++++++++------------------
 templates/tagger.html.sh     | 22 ++++++++++----------
 templates/videoview.css.sh   |  7 ++++++-
 templates/videoview.html.sh  |  4 ++--
 5 files changed, 41 insertions(+), 35 deletions(-)

diff --git a/pages/videoview.sh b/pages/videoview.sh
index 6f418f0..3839869 100755
--- a/pages/videoview.sh
+++ b/pages/videoview.sh
@@ -100,7 +100,7 @@ _printVideo(){
 
     linkinfo="$(echo -n "$info" |sed -r 's:%:%25:g;s:\&:%26:g;')"
     tee "$cache" <<VIDEOend
-      <div class="thumb">
+      <li class="thumb">
         <a class="watchlink" name="$linkinfo" href="?action=watch&i=$linkinfo">
           <img src="$thumb">
         </a>
@@ -109,7 +109,7 @@ _printVideo(){
         <a class="videolink fake-mp4" href="$mpfake">fake-mp4</a>
         <input type="checkbox" name="tagsel" value="$info">
         <span class="info property">${minutes}min</span>
-        <span class="info property">${width}x${height}</span><br>
+        <span class="info property">${width}x${height}</span>
 	$(echo "$tags" |sed -r 's:\|*([^|]+)\|*:<span class="info tag">\1</span>:g')
       </div>
 VIDEOend
diff --git a/templates/filterdiag.html.sh b/templates/filterdiag.html.sh
index 3e81b28..465dd8e 100755
--- a/templates/filterdiag.html.sh
+++ b/templates/filterdiag.html.sh
@@ -5,8 +5,8 @@ cat <<FilterEnd
         action="?" method="get" accept-charset="UTF-8">
     <input type="text" name="s" value="$search" placeholder="Search">
 
-    <span class="label order">Order by:</span>
-    <select class="order" size="1" name="o">
+    <label for="o1" class="order">Order by:</label>
+    <select class="order" size="1" name="o" id="o1">
       <option>Name</option>
       <option>Date</option>
       <option>Length</option>
@@ -17,7 +17,7 @@ cat <<FilterEnd
     <a class="panel advanced show" href="#" onclick="javascript:hide('search');show_block('advfilter');">Advanced</a>
 
     <div class="pagination_nav">
-      <span class="label">Page:</span>
+      <label>Page:</label>
       <a href="?${page_prev}">&lt;&lt;</a>
       <a href="?${page_this}">$(($page + 1))</a>
       <a href="?${page_next}">&gt;&gt;</a>
@@ -27,8 +27,8 @@ cat <<FilterEnd
   <form class="panel" id="advfilter" style="display: none;"
         action="?action=filter" method="post" accept-charset="UTF-8">
     <input disabled type="text" name="s" value="$search" placeholder="Search">
-    <span class="label order">Order by:</span>
-    <select disabled class="order" size="1" name="o">
+    <label for="o2" class="order">Order by:</label>
+    <select disabled class="order" size="1" name="o" id="o2">
       <option>Name</option>
       <option>Date</option>
       <option>Length</option>
@@ -41,18 +41,19 @@ cat <<FilterEnd
     >Hide</a>
     <hr>
 
-    <span class="help">Up to <b>10</b> filter boxes will appear as you start selecting tags. You can select <b>multiple</b> tags in each box by holding down the <b>Ctrl</b>-key. Click the "<b>Filter!</b>" button when you are ready.</span>
+    <p class="help">Up to <strong>10</strong> filter boxes will appear as you start selecting tags. You can select <strong>multiple</strong> tags in each box by holding down the <strong>Ctrl</strong>-key. Click the "<strong>Filter!</strong>" button when you are ready.</p>
 
   $(for n in {0..9}; do
     hideall="$(echo "$taglist" |sed -rn "s;^([^:]+):.*$;hide('${n}_\\1')\\;;p" |sort -u)hide('${n}_none');"
     echo "
-    <div class="filter" id=\"filter$n\" $([ $n -gt 0 ] && echo 'style="display:none;"')>
+    <p class="filter" id=\"filter$n\" $([ $n -gt 0 ] && echo 'style="display:none;"')>
       <span class=\"help conjunction\">and</span>
-      <input type=\"radio\" name=\"type$n\" value=\"pos\" checked><span class=\"label conjunction\">Any</span>
-      <input type=\"radio\" name=\"type$n\" value=\"neg\"><span class=\"label conjunction\">None</span>
+      <label class=\"conjunction\"><input type=\"radio\" name=\"type$n\" value=\"pos\" checked>Any</label>
+      <label class=\"conjunction\"><input type=\"radio\" name=\"type$n\" value=\"neg\">None</label>
       <span class=\"help\">of the tags selected here:</span>
-      <span class=\"label category\">Category:</span>
-      <select class=\"input category\" name=\"category$n\" size=\"1\" onchange=\"${hideall}show_block('${n}_'+this.options[this.options.selectedIndex].value)\">
+      <label for=\"category$n\" class=\"category\">Category:</label>
+      <select class=\"input category\" name=\"category$n\" size=\"1\" id=\"category$n\"
+              onchange=\"${hideall}show_block('${n}_'+this.options[this.options.selectedIndex].value)\">
         <option>none</option>
         $(echo "$taglist" |sed -rn 's;^([^:]+):.*$;<option>\1</option>;p' |sort -u)
       </select>
@@ -66,21 +67,21 @@ cat <<FilterEnd
          $(echo "$taglist" |sed -rn 's;^'"$cat"':(.*)$;<option>\1</option>;p')
       </select>"
       done)
-    </div>"
+    </p>"
   done)
 
-    <div class="filter final">
-      <span class="label order">Order by:</span>
-      <select class="edit order" size="1" name="o">
+    <p class="filter final">
+      <label for="o3" class="order">Order by:</label>
+      <select class="edit order" size="1" name="o" id="o3">
         <option>Name</option>
         <option>Date</option>
         <option>Length</option>
       </select>
       <input type="submit" value="Filter!">
-    </div>
+    </p>
 
-    <div class="quicklinks">
-      <span class="label quicklinks">Most recent</span>
+    <p class="quicklinks">
+      <label class="quicklinks">Most recent</label>
       $(output=''
         tac ${_DATA}/meta/recent |while [ "$(echo "$output" |wc -l)" -lt 10 ]; do
           read line
@@ -89,7 +90,7 @@ cat <<FilterEnd
         done
         echo $output
       )
-    </div>
+    </p>
   </form>
 FilterEnd
 
diff --git a/templates/tagger.html.sh b/templates/tagger.html.sh
index 2fd18f5..b4f2d7d 100755
--- a/templates/tagger.html.sh
+++ b/templates/tagger.html.sh
@@ -5,7 +5,7 @@ cat <<LOCATIONend
     <a class="panel tagger show" href="#foot" onclick="javascript:hide('foot');show_block('tagger');">Add Tags</a>
 
     <div class="pagination_nav">
-      <span class="label">Page:</span>
+      <label>Page:</label>
       <a href="?${page_prev}">&lt;&lt;</a>
       <a href="?${page_this}">$(($page + 1))</a>
       <a href="?${page_next}">&gt;&gt;</a>
@@ -18,26 +18,26 @@ cat <<LOCATIONend
      onclick="javascript:hide('tagger');$(for n in $(seq 1 4); do echo "hide('filter$n');"; done)show_block('foot')"
     >Hide</a>
     <hr>
-    <span class="help">Add selectetd tags to selected videos.</span>
-    <div class="newtag">
-      <span class="label category">None:</span>
+    <p class="help">Add selectetd tags to selected videos.</p>
+    <p class="newtag">
+      <label class="category">None:</label>
       <select name="ctag" size="12" multiple id="${n}_none">
        $(echo "$taglist" |sed -rn 's;^([^:]+)$;<option value="\1">\1</option>;p')
       </select>
-    </div>
+    </p>
     $(echo "$taglist" |sed -rn 's;^([^:]+):.*$;\1;p' |sort -u |while read cat; do echo "
-    <div class=\"newtag\">
-      <span class=\"label category\">${cat}:</span>
+    <p class=\"newtag\">
+      <label class=\"category\">${cat}:</label>
       <input type=\"hidden\" name=\"category\" value=\"$cat\">
       <select name=\"ctag\" size=\"12\" multiple id=\"${n}_$cat\">
        $(echo "$taglist" |sed -rn "s;^${cat}:(.*)$;<option value=\"${cat}:\\1\">\\1</option>;p")
       </select>
-    </div>"
+    </p>"
     done)
-    <div class="newtag additional">
-      <span class="label additional">Additional Tags (one per line):</span>
+    <p class="newtag additional">
+      <label class="additional">Additional Tags (one per line):</label>
       <textarea name="tags" rows="2"></textarea>
-    </div>
+    </p>
     <input type="submit" value="Add Tags!">
   </div>
 LOCATIONend
diff --git a/templates/videoview.css.sh b/templates/videoview.css.sh
index 08d5a81..3d152d1 100755
--- a/templates/videoview.css.sh
+++ b/templates/videoview.css.sh
@@ -31,10 +31,15 @@ a {
   color: #EEE;
 }
 
-.label {
+label, .label {
   font-weight: bold;
 }
 
+textarea {
+  display: block;
+  width: 100%;
+}
+
 .info {
   margin: 0;
   padding: 0 .25em;
diff --git a/templates/videoview.html.sh b/templates/videoview.html.sh
index 92a32c9..5d50119 100755
--- a/templates/videoview.html.sh
+++ b/templates/videoview.html.sh
@@ -19,9 +19,9 @@ cat <<EOF
   $(filterdiag)
   $(view)
   <form action="?action=multitag&${page_this}" method="post" accept-charset="UTF-8">
-    <div id="thumblist">
+    <ul id="thumblist">
       $(thumblist)
-    </div>
+    </ul>
     $(tagger)
   </form>
 EOF
-- 
2.39.2