From: paul <paul@plutz.net>
Date: Sun, 21 Sep 2014 21:58:44 +0000 (+0000)
Subject: html/css cleanup
X-Git-Url: http://git.plutz.net/?p=serve0;a=commitdiff_plain;h=3a030bfc7933228ab4405dbb706bd63edbf7bc31

html/css cleanup

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

diff --git a/actions/meta.sh b/actions/meta.sh
index a5f578c..605d809 100755
--- a/actions/meta.sh
+++ b/actions/meta.sh
@@ -1,7 +1,11 @@
 #!/bin/zsh
 
 info="$_GET[\"i\"]"
-file="{$DATA}/meta/$info.meta"
+order="$_GET[\"o\"]"
+search="$_GET[\"s\"]"
+filter="$_GET[\"f\"]"
+page="$_GET[\"p\"]"
+file="${_DATA}/meta/$info.meta"
 
 cgi_post
 length="$_POST[\"length\"]"
@@ -9,10 +13,6 @@ width="$_POST[\"width\"]"
 height="$_POST[\"height\"]"
 trash="$_POST[\"trash\"]"
 cancel="$_POST[\"cancel\"]"
-filter="$_POST[\"f\"]"
-search="$_POST[\"s\"]"
-page="$_POST[\"p\"]"
-order="$_POST[\"o\"]"
 tagacc="$_POST[\"tag\"]"
 tags="$(echo "$_POST[\"tags\"]" \
         | sed -r 's:\t| :_:g;s:^!|\r|\$|\^::g;s:\\:\\\\:g;s/</\&lt\;/g;s/>/\&gt\;/g'
diff --git a/actions/watch.sh b/actions/watch.sh
new file mode 100755
index 0000000..cd1dd14
--- /dev/null
+++ b/actions/watch.sh
@@ -0,0 +1,17 @@
+#!/bin/zsh
+
+cgi_refdata
+info="$_GET[\"i\"]"
+order="$_REF[\"o\"]"
+search="$_REF[\"s\"]"
+filter="$_REF[\"f\"]"
+page="$_REF[\"p\"]"
+
+watch_link=''
+[ -n "$info" ]   && watch_link="${watch_link}i=${info}&"
+[ -n "$order" ]  && watch_link="${watch_link}o=${order}&"
+[ -n "$search" ] && watch_link="${watch_link}s=${search}&"
+[ -n "$filter" ] && watch_link="${watch_link}f=${filter}&"
+[ -n "$page" ]   && watch_link="${watch_link}p=${page}"
+
+echo -n "Location: ?${watch_link}\n\n"
diff --git a/pages/videoview.sh b/pages/videoview.sh
index dacb524..ac3532b 100755
--- a/pages/videoview.sh
+++ b/pages/videoview.sh
@@ -24,6 +24,16 @@ order=$(echo "$_GET[\"o\"]" |egrep '^(Name|Date|Length)$')
 page=$(echo "$_GET[\"p\"]" |egrep '^[0-9]+$')
 [ -z "$page" ] && page=0
 
+page_link=''
+[ -n "$info" ]   && page_link="${page_link}i=${info}&"
+[ -n "$order" ]  && page_link="${page_link}o=${order}&"
+[ -n "$search" ] && page_link="${page_link}s=${search}&"
+[ -n "$filter" ] && page_link="${page_link}f=${filter}&"
+page_prev="${page_link}p=$([ "$page" = 0 ] && echo 0 || echo $(($page - 1)) )"
+page_next="${page_link}p=$(($page + 1))"
+page_this="${page_link}p=$page"
+
+
 taglist=$(
   [ -r ${_DATA}/cache/taglist ] && cat ${_DATA}/cache/taglist ||\
   for each in ${_DATA}/meta/*.meta; do
@@ -90,17 +100,16 @@ _printVideo(){
 
     tee "$cache" <<VIDEOend
       <div class="thumb">
-        <a name="$info" href="?i=$info&p=$page&f=$filter&s=$search&o=$order#$info"><img src="$thumb"></a>
-        <div class="thumbinfo">
-          <a href="$video"><b>$info</b></a><br>
-          <!-- a href="$reenc">VP8</a -->
-          <a href="$mpfake">fake-mp4</a><br>
-          <input type="checkbox" name="tagsel" value="$info">
-          <span class="coord">${minutes}min</span>
-          <span class="coord">${width}x${height}</span><br>
-          <!--a class="function" href='write/lock.cgi?p=Locations&e=$info&i=$info&f=$filter#$anchor'>edit</a-->
-          <span class="tag">$(sed 's,|$,,;s,|,</span> <span class="tag">,g' <<<"$tags")</span>
-        </div>
+        <a class="watchlink" name="$info" href="?action=watch&i=$info">
+          <img src="$thumb">
+        </a>
+        <a class="videolink" href="$video">$info</a>
+        <!-- a href="$reenc">VP8</a -->
+        <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>
+	$(echo "$tags" |sed -r 's:\|*([^|]+)\|*:<span class="info tag">\1</span>:g')
       </div>
 VIDEOend
   fi
diff --git a/templates/filterdiag.html.sh b/templates/filterdiag.html.sh
index 5fbf2c3..2ebb22e 100755
--- a/templates/filterdiag.html.sh
+++ b/templates/filterdiag.html.sh
@@ -1,69 +1,90 @@
 #!/bin/zsh    
 
 cat <<FilterEnd
-  <div class="panel" id="search" style="display: block;">
-    <form action="?" method="get" accept-charset="UTF-8">
-      <input type="text" name="s" value="$search" placeholder="Search">
-      Order by:<select size="1" name="o">
-	<option>Name</option>
-	<option>Date</option>
-	<option>Length</option>
-      </select>
-      <input type="submit" name="submit" value="Find">
-      <a class="panel" href="?">Clear All</a>
-      <a class="panel" href="#" onclick="javascript:hide_block('search');show_block('advfilter');">Advanced</a>
-    <span style="float:right;">
-      <b>Page:</b> <a href="?i=$info&o=$order&p=$([ "$page" != 0 ] && echo $(($page - 1)) || echo 0)&f=$filter&s=$search#$anchor">&lt;&lt;</a>
-      <a href="?i=&o=$order&p=$page&f=$filter&s=$search#$anchor">$(($page + 1))</a>
-      <a href="?i=$info&o=$order&p=$(($page + 1))&f=$filter&s=$search#$anchor">&gt;&gt;</a>
-    </span>
-    </form>
-  </div>
+  <form class="panel" id="search" style="display: block;"
+        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">
+      <option>Name</option>
+      <option>Date</option>
+      <option>Length</option>
+    </select>
+    <input type="submit" name="submit" value="Find">
+
+    <a class="panel clearsearch" href="?">Clear All</a>
+    <a class="panel advanced show" href="#" onclick="javascript:hide('search');show_block('advfilter');">Advanced</a>
 
+    <div class="pagination_nav">
+      <span class="label">Page:</span>
+      <a href="?${page_prev}">&lt;&lt;</a>
+      <a href="?${page_this}">$(($page + 1))</a>
+      <a href="?${page_next}">&gt;&gt;</a>
+    </div>
+  </form>
 
-  <div class="panel" id="advfilter" style="display: none;">
+  <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">
     <input disabled type="submit" name="submit" value="Find">
-    <a class="panel" href="?">Clear All</a>
-    <a class="panel" href="#" onclick="javascript:hide_block('advfilter');$(for n in {1..9}; do echo "hide_inline('filter$n');"; done)show_block('search')">Hide</a>
+
+    <a class="panel clearsearch" href="?">Clear All</a>
+    <a class="panel advanced hide" href="#" 
+     onclick="javascript:hide('advfilter');$(for n in {1..9}; do echo "hide('filter$n');"; done)show_block('search')"
+    >Hide</a>
     <hr>
-    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.
-    <form action="?action=filter" method="post" accept-charset="UTF-8">
-    $(for n in {0..9}; do
-      hideall="$(sed -rn "s;^([^:]+):.*$;hide_inline('${n}_\\1')\\;;p" <<<"$taglist" |sort -u)hide_inline('${n}_none');"
-      echo "
-      <div id=\"filter$n\" $([ $n -gt 0 ] && echo 'style="display:none;"')><b>and</b><br>
-        <input type=\"radio\" name=\"type$n\" value=\"pos\" checked><b>Any</b><br>
-        <input type=\"radio\" name=\"type$n\" value=\"neg\"><b>None</b><br>
-        of the tags selected here:<br> Category:
-        <select name=\"category\" size=\"1\" onchange=\"${hideall}show_inline('${n}_'+this.options[this.options.selectedIndex].value)\">
-          <option>none</option>
-          $(sed -rn 's;^([^:]+):.*$;<option>\1</option>;p' <<<"$taglist" |sort -u)
-        </select><br>
-        <select name=\"filter\" size=\"12\" multiple id=\"${n}_none\" onchange=\"show_inline('filter$((1+$n))')\">
-           $(sed -rn 's;^([^:]+)$;<option>\1</option>;p' <<<"$taglist")
-        </select>
-        $(sed -rn 's;^([^:]+):.*$;\1;p' <<<"$taglist" |sort -u |while read cat; do echo "
-        <select name=\"cfilter\" size=\"12\" multiple id=\"${n}_$cat\" style=\"display:none;\" onchange=\"show_inline('filter$((1+$n))')\">
-           $(sed -rn "s;^$cat:(.*)$;<option>\\1</option>;p" <<<"$taglist")
-        </select>"
-        done)
-      </div>"
-    done)
-      <div>
-        Order by:<select size="1" name="o">
-          <option>Name</option>
-          <option>Date</option>
-	  <option>Length</option>
-        </select><br>
-        <input type="submit" value="Filter!">
-      </div>
-    </form>
 
-    <br/>
-    <h2>Most recent</h2>
-    $(uniq ${_DATA}/meta/recent |tail -n 10 |sed -r 's:^(.*)$:<a href="\1">\1</a><br/>:g')
-  </div>
+    <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>
+
+  $(for n in {0..9}; do
+    hideall="$(sed -rn "s;^([^:]+):.*$;hide('${n}_\\1')\\;;p" <<<"$taglist" |sort -u)hide('${n}_none');"
+    echo "
+    <div 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>
+      <span class=\"help\">of the tags selected here:</span>
+      <span class=\"label category\">Category:</span>
+      <select class=\"input category\" name=\"category\" size=\"1\" onchange=\"${hideall}show_block('${n}_'+this.options[this.options.selectedIndex].value)\">
+        <option>none</option>
+        $(sed -rn 's;^([^:]+):.*$;<option>\1</option>;p' <<<"$taglist" |sort -u)
+      </select>
+      <select class=\"input tagfilter\" name=\"filter\" size=\"12\" multiple id=\"${n}_none\"
+              onchange=\"show_iblock('filter$((1+$n))')\">
+         $(sed -rn 's;^([^:]+)$;<option>\1</option>;p' <<<"$taglist")
+      </select>
+      $(sed -rn 's;^([^:]+):.*$;\1;p' <<<"$taglist" |sort -u |while read cat; do echo "
+      <select class=\"input tagfilter\" name=\"cfilter\" size=\"12\" multiple id=\"${n}_$cat\" style=\"display:none;\"
+              onchange=\"show_iblock('filter$((1+$n))')\">
+         $(sed -rn "s;^$cat:(.*)$;<option>\\1</option>;p" <<<"$taglist")
+      </select>"
+      done)
+    </div>"
+  done)
+
+    <div class="filter final">
+      <span class="label order">Order by:</span>
+      <select class="edit order" size="1" name="o">
+        <option>Name</option>
+        <option>Date</option>
+        <option>Length</option>
+      </select>
+      <input type="submit" value="Filter!">
+    </div>
+
+    <div class="quicklinks">
+      <span class="label quicklinks">Most recent</span>
+      $(output=''
+        tac ${_DATA}/meta/recent |while [ "$(echo "$output" |wc -l)" -lt 10 ]; do
+          read line
+          line="<a href="$line">$line</a>"
+          echo "$output" |grep -qF "$line" || output="$output$line\n"
+        done
+        echo $output
+      )
+    </div>
+  </form>
 FilterEnd
 
 # vi:set filetype=html:
diff --git a/templates/frame.html.sh b/templates/frame.html.sh
index 822659b..eae2968 100755
--- a/templates/frame.html.sh
+++ b/templates/frame.html.sh
@@ -36,11 +36,14 @@ cat <<EOF
       document.getElementById(id).style.display = "inline";
       try{document.getElementById('vid_'+id).play();}catch(foo){}
     }
-    function hide_block(id){
+    function show_iblock(id){
+      document.getElementById(id).style.display = "inline-block";
+      try{document.getElementById('vid_'+id).play();}catch(foo){}
+    }
+    function hide(id){
       try{document.getElementById('vid_'+id).pause();}catch(foo){}
       document.getElementById(id).style.display = "none";
     }
-    function hide_inline(id){ hide_block(id);}
     -->
     </script>
   </head>
diff --git a/templates/tagger.html.sh b/templates/tagger.html.sh
index 28fb1b8..2fd18f5 100755
--- a/templates/tagger.html.sh
+++ b/templates/tagger.html.sh
@@ -1,46 +1,45 @@
 #!/bin/zsh    
 
 cat <<LOCATIONend
-  <div class="footer" id="foot">
-    <a class="panel" href="#foot" onclick="javascript:hide_block('foot');show_block('tagger');">Add Tags</a>
-    <span style="float:right;">
-      <b>Page:</b>
-      <a href="?o=$order&i=$info&p=$([ "$page" != 0 ] && echo $(($page - 1)) || echo 0)&f=$filter&s=$search#$anchor">&lt;&lt;</a>
-      <a href="?o=$order&i=&p=$page&f=$filter&s=$search#$anchor">$(($page + 1))</a>
-      <a href="?o=$order&i=$info&p=$(($page + 1))&f=$filter&s=$search#$anchor">&gt;&gt;</a>
-    </span>
+  <div class="panel footer" id="foot">
+    <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>
+      <a href="?${page_prev}">&lt;&lt;</a>
+      <a href="?${page_this}">$(($page + 1))</a>
+      <a href="?${page_next}">&gt;&gt;</a>
+    </div>
   </div>
 
 
-  <div class="footer" id="tagger" style="display: none;">
-    <a class="panel" href="#foot" onclick="javascript:hide_block('tagger');$(for n in $(seq 1 4); do echo "hide_inline('filter$n');"; done)show_block('foot')">Hide</a>
+  <div class="panel footer" id="tagger" style="display: none;">
+    <a class="panel tagger hide" href="#"
+     onclick="javascript:hide('tagger');$(for n in $(seq 1 4); do echo "hide('filter$n');"; done)show_block('foot')"
+    >Hide</a>
     <hr>
-    <div>Add selectetd tags to selected videos.<br>
-      <!-- select name="category" size="12" onchange="${hideall}show_inline('${n}_'+this.options[this.options.selectedIndex].value)">
-        <option>none</option>
-        $(sed -rn 's;^([^:]+):.*$;<option>\1</option>;p' <<<"$taglist" |sort -u)
-      </select -->
-      <!-- input type="hidden" name="category" value="" -->
-      <div>None:<br>
-        <select name="ctag" size="12" multiple id="${n}_none">
-         $(sed -rn 's;^([^:]+)$;<option value="\1">\1</option>;p' <<<"$taglist")
-        </select>
-      </div>
-      $(sed -rn 's;^([^:]+):.*$;\1;p' <<<"$taglist" |sort -u |while read cat; do echo "
-      <div>${cat}:</br>
-        <input type=\"hidden\" name=\"category\" value=\"$cat\">
-        <select name=\"ctag\" size=\"12\" multiple id=\"${n}_$cat\" style=\"display:inline;\">
-         $(sed -rn "s;^${cat}:(.*)$;<option value=\"${cat}:\\1\">\\1</option>;p" <<<"$taglist")
-        </select>
-      </div>"
-      done)
+    <span class="help">Add selectetd tags to selected videos.</span>
+    <div class="newtag">
+      <span class="label category">None:</span>
+      <select name="ctag" size="12" multiple id="${n}_none">
+       $(echo "$taglist" |sed -rn 's;^([^:]+)$;<option value="\1">\1</option>;p')
+      </select>
     </div>
-    <div>Additional Tags (one per line):<br>
+    $(echo "$taglist" |sed -rn 's;^([^:]+):.*$;\1;p' |sort -u |while read cat; do echo "
+    <div class=\"newtag\">
+      <span class=\"label category\">${cat}:</span>
+      <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>"
+    done)
+    <div class="newtag additional">
+      <span class="label additional">Additional Tags (one per line):</span>
       <textarea name="tags" rows="2"></textarea>
     </div>
-    <div><input type="submit" value="Add Tags!"></div>
+    <input type="submit" value="Add Tags!">
   </div>
-  <a name="foot"></a>
 LOCATIONend
 
 # vi:set filetype=html:
diff --git a/templates/videoview.css.sh b/templates/videoview.css.sh
index bf22dc2..b238998 100755
--- a/templates/videoview.css.sh
+++ b/templates/videoview.css.sh
@@ -16,9 +16,14 @@
 # along with Serve0  If not, see <http://www.gnu.org/licenses/>. 
 
 cat <<EOF
+
+* {
+  box-sizing: border-box;
+}
+
 body {
-  padding: 0px;
-  margin: 0px;
+  padding: 0;
+  margin: 0;
   background-color: #000;
   color: #DDD;
 }
@@ -26,105 +31,130 @@ a {
   color: #EEE;
 }
 
-div.thumb {
-  width: 212px;
-  padding: 0px;
-  float: left;
-  margin: .1em;
-  white-space: normal;
-}
-div.thumbinfo {
-  /*height: 200px;*/
-  min-height: 150px;
-  max-height: 300px;
-  overflow: hidden;
+.label {
+  font-weight: bold;
 }
 
-*.coord {
-  margin: 0em 0em 0em 0em;
-  padding: 0em .2em 0em .2em;
-
-  background-color: #B8B8E0;
+.info {
+  margin: 0;
+  padding: 0 .25em;
+  background-color: #BBD;
   color: #000;
-
-  border-color: #000;
-  border-width: 1px;
-  border-style: solid;
+  border: #000 1px solid;
 }
-*.tag {
-  white-space: nowrap;
-  margin: 0em 0em 0em 0em;
-  padding: 0em .2em 0em .2em;
+.info.tag {
   line-height: 1.6em;
-
   background-color: #DBB;
-  color: #000;
-
-  border-color: #000;
-  border-width: 1px;
-  border-style: solid;
 }
 
-div.panel {
-  overflow: hidden;
-  padding: .4em .5em .2em .5em;
+.panel {
+  display: block;
+  width: 100%;
+  margin: 0;
+  padding: .25em 1em;
   background-color: #333;
-  border-style: none none solid none;
   border-width: 1px;
+  border-style: none none solid none;
 }
 a.panel {
   font-weight: bold;
-  margin-left: 1em;
-  margin-right: 1em;
-  color: #EEE;
 }
-div.panel form div{
-  display: inline; float: left;
-  margin: .5em 0em 0em 1em;
-  padding: 0em .5em 0em 0em;
-  border-style: none solid none none;
-  border-width: 0px 1px 0px 0px;
+a.clearsearch, a.advanced, a.tagger, .pagination_nav {
+  display: inline;
+  border: none;
 }
-div.panel form div select[multiple]{
-  width: 12em;
-}
-div.footer {
-  position: fixed;
-  bottom: 0px;
-  width: 99%;
-  overflow: hidden;
-  padding: .2em .5em .4em .5em;
-  background-color: #333;
-  border-style: solid none none none;
-  border-width: 1px;
+.pagination_nav {
+  position: absolute;
+  right: 1em;
+  padding-top: .125em;
 }
-div.footer div {
+
+.panel .filter, .panel .quicklinks,
+.footer .newtag, .footer input[type=submit] {
   display: inline-block;
-  border-width: 0px 0px 0px 1px;
-  border-style: solid;
-  padding: .5em;
   vertical-align: top;
+  margin-top: 2em;
 }
-div.footer select[name="category"] {
-  min-width: 8em;
+.panel .help {
+  display: block;
 }
-div.footer select[name="ctag"] {
+.panel .filter select, .panel .filter .help,
+.footer .newtag select, .footer .newtag .label{
+  display: block;
   width: 10em;
 }
+.panel .filter .help.conjunction {
+  font-weight: bold;
+}
+.panel .filter .label.category {
+  display: block;
+  margin-top: 1em;
+}
+.panel .quicklinks * {
+  display: block
+}
 
-.video {
-  display: inline; float: left;
-  width: 60%;
+#thumblist .thumb {
+  display: inline-block;
+  width: 212px;
+  padding: 0;
+  margin: .5em;
+  vertical-align: top;
+  word-wrap: break-word;
 }
-.video video {width: 100%;}
-.video embed {width: 100%; min-height:360px}
-.video iframe {width: 100%; min-height:360px}
-.videoinfo {
-  display: inline; float: left;
-  margin-left: 2%; width: 35%;
+#thumblist .thumb img {
+  height: 162px;
+}
+#thumblist .thumb a {
+  display: block;
+}
+#thumblist .thumb a.fake-mp4 {
+  margin-top: .5em;
 }
 
+.footer {
+  position: fixed;
+  bottom: 0px;
+  border-style: solid none none none;
+}
 
+#videoview a.panel {
+  position: absolute;
+  right: 1em;
+  width: auto;
+  border: none;
+}
+#videoview .video {
+  display: inline-block;
+  width: 60%;
+  vertical-align: top;
+}
+#videoview .video * {
+  display: block;
+}
+#videoview .videoinfo {
+  display: inline-block;
+  width: 39%;
+  margin-top: 2em;
+}
+#videoview .videoinfo h2 {
+  display: inline;
+} 
+#videoview .videoinfo a.meta:after {
+  content: "\A";
+  white-space: pre;
+}
+#videoview .videoinfo .label {
+  display: block;
+  margin-top: 1em;
+}
+#videoview .videoinfo .info.description {
+  display: block;
+  background-color: #DDF;
+}
+#videoview .videoinfo .edit {
+  width: 100%
+}
 EOF
 
 # vi:set filetype=css:
diff --git a/templates/videoview.html.sh b/templates/videoview.html.sh
index cb0ed75..92a32c9 100755
--- a/templates/videoview.html.sh
+++ b/templates/videoview.html.sh
@@ -18,9 +18,11 @@
 cat <<EOF
   $(filterdiag)
   $(view)
-  <form action="?action=multitag&amp;f=$filter&amp;s=$search&amp;p=$page&amp;o=$order" method="post" accept-charset="UTF-8">
-  <div style="overflow:hidden;">$(thumblist)</div>
-  $(tagger)
+  <form action="?action=multitag&${page_this}" method="post" accept-charset="UTF-8">
+    <div id="thumblist">
+      $(thumblist)
+    </div>
+    $(tagger)
   </form>
 EOF
 
diff --git a/templates/view.html.sh b/templates/view.html.sh
index 42f74ac..b2856a5 100755
--- a/templates/view.html.sh
+++ b/templates/view.html.sh
@@ -2,9 +2,9 @@
 
 cat <<viewEND
   <div class="panel" id="videoview">
-    <span style="float:right;"><a href="#" onclick="javascript:hide_block('videoview');" class="panel">Dismiss</a></span>
+    <a href="#" onclick="javascript:hide('videoview');" class="panel">Dismiss</a>
     <div class="video">
-      <a href="$video">Full</a> <!-- a href="$reenc">Mobile</a --><br>
+      <a href="$video">Full</a> <!-- a href="$reenc">Mobile</a -->
       <!--iframe src="$video" width="100%" height="400px"-->
       <video controls>
         <!-- source src="$reenc" type='video/webm; codecs="vp8.0, mp3"' -->
@@ -13,40 +13,47 @@ cat <<viewEND
     </div>
   
     <div class="videoinfo" id="viewmeta">
-      <b>$info</b><a class="panel" href="#" onclick="javascript:hide_inline('viewmeta');show_inline('editmeta')">Edit</a><br>
-      <span class="coord">$(($length / 60)):$(($length % 60)) min</span>
-      <span class="coord">Width: $width</span><span class="coord">Height: $height</span><br>
-      <br><br>Tags:<span class="tag">$(sed 's,|$,,;s,|,</span> <span class="tag">,g' <<<"$tags")</span>
-      <br><br>$(_wiki <<<"$description")
+      <h2>$info</h2>
+      <a class="meta edit" href="#" onclick="javascript:hide('viewmeta');show_iblock('editmeta')">Edit</a>
+
+      <span class="info property">$(($length / 60)):$(($length % 60)) min</span>
+      <span class="info property">Width: $width</span>
+      <span class="info property">Height: $height</span><br>
+
+      <span class="label tags">Tags:</span>
+      $(echo "$tags" |sed -r 's:\|*([^|]+)\|*:<span class="info tag">\1</span>:g')
+      $([ -n "$description" ] && echo "<span class=\"info description\">$(_wiki <<<"$description")</span>")
     </div>
   
-    <div class="videoinfo" id="editmeta" style="display: none;">
-      <form action="?action=meta&amp;i=$info" method="post" accept-charset="UTF-8">
-        <input type="hidden" name="f" value="$filter"> <input type="hidden" name="s" value="$search"> <input type="hidden" name="p" value="$page"> <input type="hidden" name="o" value="$order">
-        <input type="hidden" name="length" value="$length"> <input type="hidden" name="width" value="$width">
-        <input type="hidden" name="height" value="$height">
-        <b>$info</b><a class="panel" href="#" onclick="javascript:hide_inline('editmeta');show_inline('viewmeta')">Cancel</a><br>
-        <span class="coord">$(($length / 60)):$(($length % 60)) min</span>
-        <span class="coord">Width: $width</span><span class="coord">Height: $height</span><br><br>
+    <form class="videoinfo" id="editmeta" style="display: none;"
+          action="?action=meta&${page_this}" method="post" accept-charset="UTF-8">
+      <input type="hidden" name="length" value="$length">
+      <input type="hidden" name="width" value="$width">
+      <input type="hidden" name="height" value="$height">
+
+      <h2>$info</h2>
+      <a class="meta cancel" href="#" onclick="javascript:hide('editmeta');show_iblock('viewmeta')">Cancel</a>
+
+      <span class="info property">$(($length / 60)):$(($length % 60)) min</span>
+      <span class="info property">Width: $width</span>
+      <span class="info property">Height: $height</span>
   
-        <div>
-          Tags:<br>
-          <select name="tag" size="16" multiple>
-            $(echo "$taglist" |while read line; do
-              echo "<option $(egrep -q "(^|.*\|)$line(\|.*|$)" "$meta" && echo -n selected)>$line</option>"
-            done)
-          </select><br>
-        </div><div>
-          Additional Tags (one per line):<br>
-          <textarea name="tags" rows="16" style="width: 99%"></textarea><br><br>
-        </div>
-        Description:<br>
-        <textarea name="description" rows="4" style="width: 99%">$description</textarea><br>
-        <input type="submit" value="Submit">
-        <input type="submit" name="trash" value="Delete Video">
-        <!-- input type="submit" name="cancel" value="Cancel" -->
-      </form>
-    </div>
+      <span class="label tags">Tags:</span>
+      <select class="edit tags" name="tag" size="16" multiple>
+        $(echo "$taglist" |while read line; do
+          echo "<option $(egrep -q "(^|.*\|)$line(\|.*|$)" "$meta" && echo -n selected)>$line</option>"
+        done)
+      </select>
+
+      <span class="label moretags">Additional Tags (one per line):</span>
+      <textarea class="edit moretags" name="tags" rows="4"></textarea>
+
+      <span class="label description">Description:</span>
+      <textarea class="edit description" name="description" rows="4">$description</textarea>
+      <input type="submit" value="Submit">
+      <input type="submit" name="trash" value="Delete Video">
+      <!-- input type="submit" name="cancel" value="Cancel" -->
+    </form>
   </div>
 viewEND