improved transcode display

[serve0] / templates / filterdiag.html.sh

diff --git a/templates/filterdiag.html.sh b/templates/filterdiag.html.sh
index 9a388887c9d294740e28b4ea84320ca857fb1e03..ec2dee565f2e20dea390ef8c451925857ea77480 100755 (executable)
--- 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,55 +41,55 @@ 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="$(sed -rn "s;^([^:]+):.*$;hide('${n}_\\1')\\;;p" <<<"$taglist" |sort -u)hide('${n}_none');"
+    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>
-        $(sed -rn 's;^([^:]+):.*$;<option>\1</option>;p' <<<"$taglist" |sort -u)
+        $(echo "$taglist" |sed -rn 's;^([^:]+):.*$;<option>\1</option>;p' |sort -u)
       </select>
-      <select class=\"input tagfilter\" name=\"filter${n}_\" size=\"12\" multiple id=\"${n}_none\"
+      <select class=\"input tagfilter\" name=\"cfilter${n}_\" size=\"12\" multiple id=\"${n}_none\"
               onchange=\"show_iblock('filter$((1+$n))')\">
-         $(sed -rn 's;^([^:]+)$;<option>\1</option>;p' <<<"$taglist")
+         $(echo "$taglist" |sed -rn 's;^([^:]+)$;<option>\1</option>;p')
       </select>
-      $(sed -rn 's;^([^:]+):.*$;\1;p' <<<"$taglist" |sort -u |while read cat; do echo "
+      $(echo "$taglist" |sed -rn 's;^([^:]+):.*$;\1;p' |sort -u |while read cat; do echo "
       <select class=\"input tagfilter\" name=\"cfilter${n}_\" size=\"12\" multiple id=\"${n}_$cat\" style=\"display:none;\"
               onchange=\"show_iblock('filter$((1+$n))')\">
-         $(sed -rn "s;^$cat:(.*)$;<option>\\1</option>;p" <<<"$taglist")
+         $(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
+        tac ${_DATA}/meta/recent |while [ "$(echo "$output" |wc -l)" -lt 10 ] && read line; do
           line="<a href="$line">$line</a>"
           echo "$output" |grep -qF "$line" || output="$output$line\n"
         done
         echo $output
       )
-    </div>
+    </p>
   </form>
 FilterEnd