From: paul <paul@plutz.net>
Date: Sat, 10 Sep 2016 14:16:51 +0000 (+0000)
Subject: more compact menues
X-Git-Url: http://git.plutz.net/?p=serve0;a=commitdiff_plain;h=f9a2881b35e0a42e36d1558ba4f41301e3acec2f

more compact menues

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

diff --git a/static/common.css b/static/common.css
index d614432..16910fb 100644
--- a/static/common.css
+++ b/static/common.css
@@ -113,40 +113,48 @@ a.panel {
   width: auto;
   padding: 0;
   margin: auto 1em 1ex 0;
+  text-decoration: none;
 }
 
 .panel .help { display: block;}
 
 /* == Top Panel == */
 
-.panel#advfilter { position: absolute; top: 0; }
-.panel#search select { margin-right: .5em; }
+.panel.switchable.top {
+  position: absolute;
+  top: 0;
+}
 
 body.playctl .panel#advfilter,
+body.playctl .panel#morelinks,
 body.playctl .panel#search {
   margin-top: 1.25em;
   border-top: 1px solid #FFF;
 }
 
+.panel#search select { margin-right: .5em; }
+
 /* == Bottom Panels == */
-.panel#preferences,
-.panel#tagger,
+.panel.bottom,
 .panel#foot {
   position: fixed;
   bottom: 0px;
   border-style: solid none none none;
 }
 
-
 /* == Switchable Panels == */
 
-form.panel,
-div.panel {
+.panel.switchable {
   z-index: 1;
   overflow: hidden;
   min-height: 0; max-height: 0;
   padding-top: 0; padding-bottom: 0;
 }
+.panel.switchable:target {
+  max-height: 100%;
+  overflow-y: scroll;
+}
+.panel.switchable.top:target{ padding-bottom: 1em; }
 
 .panel#search,
 .panel#foot {
@@ -159,24 +167,16 @@ div.panel {
 body.playctl .panel#search,
 body.playctl .panel#foot { padding-right: .25em; }
 
-.panel:target {
-  max-height: 100%;
-  overflow-y: scroll;
-}
-.panel#advfilter:target{ padding-bottom: 1em; }
 
 /* == Panel Switches == */
 
-.panel#playctl a.panel,
-.panel#advfilter a.panel,
-.panel#preferences a.panel,
-.panel#tagger a.panel {
+.panel.switchable.bottom a.panel:last-of-type,
+.panel.switchable.top a.panel:first-of-type {
   display: block;
   border-style: none none solid none;
   border-width: 1px;
 }
-.panel#preferences a.panel,
-.panel#tagger a.panel {
+.panel.switchable.bottom a.panel:last-of-type {
   border-style: solid none none none;
   margin-top: .5em;
 }
@@ -184,7 +184,6 @@ body.playctl .panel#foot { padding-right: .25em; }
 
 /* == Panel Elements == */
 
-.panel#advfilter .quicklinks,
 .panel#advfilter .filter,
 .panel#tagger .newtag,
 .panel#tagger input[type=submit],
@@ -256,7 +255,6 @@ body.playctl .panel#foot { padding-right: .25em; }
   margin-left: 1em;
 }
 
-#advfilter .quicklinks {width: 100%;}
 
 /* == Recent filters == */
 
diff --git a/templates/advfilter.html.sh b/templates/advfilter.html.sh
index c4f14cc..fb56645 100755
--- a/templates/advfilter.html.sh
+++ b/templates/advfilter.html.sh
@@ -57,7 +57,7 @@ filterbox(){
 }
 
 cat <<EOF
-  <form class="panel" id="advfilter"
+  <form class="panel switchable top" id="advfilter"
         action="?action=filter" method="post" accept-charset="UTF-8">
 
     <a class="panel toggle" href="#">Hide</a>
@@ -74,8 +74,6 @@ cat <<EOF
       </select>
       <input type="submit" value="Filter!">
     </p>
-
-    <a class="quicklinks" href="?p=quicklinks">Most recent</a>
   </form>
 EOF
 
diff --git a/templates/list.html.sh b/templates/list.html.sh
index f7bb43c..e25daf3 100755
--- a/templates/list.html.sh
+++ b/templates/list.html.sh
@@ -27,10 +27,8 @@ cat <<EOF
     </select>
     <!-- input type="submit" name="submit" value="Find" -->
 
-    <a class="panel clearsearch" href="?">Clear All</a>
-    <a class="panel toggle" href="#advfilter">Advanced</a>
-    <a class="panel treeview" href="?p=tree">Browse Folders</a>
-    <a class="panel" href="?p=playctl">Player</a>
+    <a class="panel clearsearch" href="?">Clear</a>
+    <a class="panel toggle" href="#morelinks">More</a>
 
     <div class="pagination_nav">
       <label>Page:</label>
@@ -57,6 +55,19 @@ cat <<EOF
     </div>
   </form>
 
+  <div class="panel switchable top" id="morelinks">
+    <a class="panel toggle" href="#">Hide</a>
+
+    <a class="panel toggle" href="#advfilter">Advanced</a>
+    <a class="panel toggle" href="#preferences">Preferences</a>
+
+    <a class="panel treeview" href="?p=tree">Browse Folders</a>
+    <a class="panel" href="?p=quicklinks">Most recent</a>
+
+    <a class="panel" href="?p=playctl">Player</a>
+  </div>
+  $(. $_EXEC/templates/preferences.html.sh)
+
   <form action="?action=multitag" method="post" accept-charset="UTF-8">
     <input type="hidden" name="o" value="${order}">
     <input type="hidden" name="s" value="${search}">
@@ -75,9 +86,7 @@ cat <<EOF
 
   <div class="panel" id="foot">
     <a class="panel toggle" href="#tagger">Add Tags</a>
-    <a class="panel toggle" href="#preferences">Preferences</a>
-    <a class="panel toggle" href="#">^ top ^</a>
-    
+    <a class="panel toggle" href="#">⇧</a>
 
     <div class="pagination_nav">
       <label>Page:</label>
@@ -85,7 +94,6 @@ cat <<EOF
     </div>
   </div>
 
-  $(. $_EXEC/templates/preferences.html.sh)
   $(. $_EXEC/templates/advfilter.html.sh)
 EOF
 
diff --git a/templates/playctl.html.sh b/templates/playctl.html.sh
index 6bf7dcc..a8a14a1 100755
--- a/templates/playctl.html.sh
+++ b/templates/playctl.html.sh
@@ -16,7 +16,7 @@
 # along with Serve0  If not, see <http://www.gnu.org/licenses/>. 
 
 cat <<EOF
-<form class="panel" id="search" style="display: block;" action="?" method="get" accept-charset="UTF-8">
+<form class="panel top" id="search" style="display: block;" action="?" method="get" accept-charset="UTF-8">
   <input type="text" name="s" value="$search" placeholder="Search">
 
   <label for="o1" class="order">Order by:</label>
@@ -59,7 +59,7 @@ cat <<EOF
   ${description:+<span class="info description">$(printf %s "$description" |_wiki)</span>}
 </div>
 
-<form class="panel playctl" id="advctl" action="?action=playctl" method="post">
+<form class="panel switchable bottom playctl" id="advctl" action="?action=playctl" method="post">
   <fieldset class="volume">
     <button type="submit" name="amp" value="off">Amp Off</button>
     <button type="submit" name="amp" value="on">Amp On</button>
@@ -72,7 +72,7 @@ cat <<EOF
   <a class="panel toggle" href="#foot">Hide</a>
 </form>
 
-<form class="panel" id="tagger" action="?action=meta&${page_this}" method="post" accept-charset="UTF-8">
+<form class="panel switchable bottom" id="tagger" 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">
diff --git a/templates/preferences.html.sh b/templates/preferences.html.sh
index 39b31aa..24e5df9 100755
--- a/templates/preferences.html.sh
+++ b/templates/preferences.html.sh
@@ -1,4 +1,4 @@
-# Copyright 2015 Paul Hänsch
+# Copyright 2015, 2016 Paul Hänsch
 #
 # This file is part of Serve0
 # 
@@ -16,8 +16,10 @@
 # along with Serve0  If not, see <http://www.gnu.org/licenses/>. 
 
 cat <<EOF
-  <form class="panel" id="preferences"
+  <form class="panel switchable top" id="preferences"
    action="?action=preferences" method="post" accept-charset="UTF-8">
+    <a class="panel toggle" href="#">Hide</a>
+
     <fieldset>
       <legend>Watch videos:</legend>
       <input type="radio" name="watch" value="240p"     $([ "${_COOKIE[watch]}" = 240p     ] && printf 'checked') id="rd_w240p">
@@ -44,8 +46,6 @@ cat <<EOF
     </fieldset>
 
     <input type="submit" value="Set Cookie!">
-
-    <a class="panel toggle" href="#foot">Hide</a>
   </form>
 EOF
 
diff --git a/templates/tagger.html.sh b/templates/tagger.html.sh
index f92bf0c..4838399 100755
--- a/templates/tagger.html.sh
+++ b/templates/tagger.html.sh
@@ -1,4 +1,4 @@
-# Copyright 2014, 2015 Paul Hänsch
+# Copyright 2014, 2015, 2016 Paul Hänsch
 #
 # This file is part of Serve0
 # 
@@ -38,7 +38,7 @@ EOF
 }
 
 cat <<EOF
-  <div class="panel" id="tagger">
+  <div class="panel switchable bottom" id="tagger">
     <p class="help">Add selectetd tags to selected videos.</p>
     $(category_box $(list_categories))
     <p class="newtag additional">
diff --git a/templates/tree.html.sh b/templates/tree.html.sh
index 43820e6..9343fc4 100755
--- a/templates/tree.html.sh
+++ b/templates/tree.html.sh
@@ -1,4 +1,4 @@
-# Copyright 2014, 2015 Paul Hänsch
+# Copyright 2014 - 2016 Paul Hänsch
 #
 # This file is part of Serve0
 # 
@@ -16,14 +16,27 @@
 # along with Serve0  If not, see <http://www.gnu.org/licenses/>. 
 
 cat <<EOF
-  <form class="panel" id="search" action="?" method="get" accept-charset="UTF-8">
+  <form class="panel top" id="search" action="?" method="get" accept-charset="UTF-8">
     <input type="text" name="s" value="$search" placeholder="Search">
     <input type="submit" name="submit" value="Find">
-
     <a class="panel clearsearch" href="?p=tree">Clear All</a>
-    <a class="panel" href="?p=playctl">Player</a>
+
+    <a class="panel toggle" href="#morelinks">More</a>
   </form>
 
+  <div class="panel switchable top" id="morelinks">
+    <a class="panel toggle" href="#">Hide</a>
+
+    <a class="panel toggle" href="#advfilter">Advanced</a>
+    <a class="panel toggle" href="#preferences">Preferences</a>
+
+    <a class="panel listview" href="?p=list">Index view</a>
+    <a class="panel" href="?p=quicklinks">Most recent</a>
+    <a class="panel" href="?p=playctl">Player</a>
+  </div>
+
+  $(. $_EXEC/templates/preferences.html.sh)
+
   <form action="?action=multitag&${page_this}" method="post" accept-charset="UTF-8">
     <ul id="thumblist">
       $(filelist)
@@ -31,13 +44,11 @@ cat <<EOF
     $(. $_EXEC/templates/tagger.html.sh)
   </form>
 
-  <div class="panel" id="foot">
+  <div class="panel bottom" id="foot">
     <a class="panel toggle" href="#tagger">Add Tags</a>
-    <a class="panel toggle" href="#preferences">Preferences</a>
-    <a class="panel listview" href="?p=list">Index view</a>
+    <a class="panel toggle" href="#">⇧</a>
   </div>
 
-  $(. $_EXEC/templates/preferences.html.sh)
 EOF
 
 # vi:set filetype=html:
diff --git a/templates/view.html.sh b/templates/view.html.sh
index 7da647e..f0a2313 100755
--- a/templates/view.html.sh
+++ b/templates/view.html.sh
@@ -16,7 +16,7 @@
 # along with Serve0  If not, see <http://www.gnu.org/licenses/>. 
 
 cat <<EOF
-<form class="panel" id="search" style="display: block;" action="?" method="get" accept-charset="UTF-8">
+<form class="panel top" id="search" style="display: block;" action="?" method="get" accept-charset="UTF-8">
   <input type="text" name="s" value="$search" placeholder="Search">
 
   <label for="o1" class="order">Order by:</label>
@@ -89,7 +89,7 @@ cat <<EOF
   </form>
 </div>
 
-<div class="panel footer" id="foot">
+<div class="panel bottom" id="foot">
   <a class="panel toggle" href="#tagger">Edit Tags</a>
 
   <div class="pagination_nav">