css transitions for panels

svn path=/trunk/; revision=83

diff --git a/templates/advfilter.html.sh b/templates/advfilter.html.sh
index 74860bcad3c876c1677de13aa87ae1da8c3dea5d..ec2e5e7691afd1b00589583df7f289f4833445fe 100755 (executable)
--- a/templates/advfilter.html.sh
+++ b/templates/advfilter.html.sh
@@ -60,7 +60,7 @@ cat <<EOF
   <form class="panel" id="advfilter"
         action="?action=filter" method="post" accept-charset="UTF-8">
 
-    <a class="panel advanced hide" href="#">Hide</a>
+    <a class="panel toggle" href="#">Hide</a>
 
     <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>
     $(filterbox {0..9})

diff --git a/templates/common.css.sh b/templates/common.css.sh
index b8c7ec4f9a903ee7c39c286ecce0f5d06eca36c8..f8702198675243a600955782411f4c719e6bf8cb 100755 (executable)
--- a/templates/common.css.sh
+++ b/templates/common.css.sh
@@ -62,36 +62,57 @@ textarea {
   border-width: 1px;
   border-style: none none solid none;
 }
-.panel.footer {
+
+#advfilter {
+  position: absolute;
+  top: 0;
+}
+#preferences,
+#tagger,
+#foot {
   position: fixed;
-  min-height: 2em;
   bottom: 0px;
+  min-height: 2em;
   border-style: solid none none none;
 }
 
-.panel .help { display: block;}
-a.panel { font-weight: bold; }
-a.clearsearch, a.show, .pagination_nav {
-  display: inline;
-  border: none;
+#advfilter,
+#tagger,
+#preferences {
+  z-index: 1;
+  overflow: hidden;
+  min-height: 0; max-height: 0;
+  padding-top: 0; padding-bottom: 0;
+  transition: all .3s linear;
 }
-.pagination_nav {
-  position: absolute;
-  right: 1em;
-  padding-top: .125em;
+#advfilter:target,
+#tagger:target,
+#preferences:target {
+  max-height: 100%;
+  overflow-y: scroll;
 }
 
-.footer a.panel {
+.panel .help { display: block;}
+a.panel { font-weight: bold; }
+
+#preferences a.panel,
+#tagger a.panel {
   border-style: solid none none none;
   border-width: 1px;
   margin-top: .5em;
 }
 
-#advfilter { display: none; }
-#advfilter:target {
-  display: block;
+#search a.toggle,
+#foot a.toggle,
+a.clearsearch,
+.pagination_nav {
+  display: inline;
+  border: none;
+}
+.pagination_nav {
   position: absolute;
-  top: 0;
+  right: 1em;
+  padding-top: .125em;
 }
 
 #advfilter .quicklinks,
@@ -187,17 +208,6 @@ a.clearsearch, a.show, .pagination_nav {
   margin: .75em .5em;
 }
 
-#tagger,
-#preferences {
-  display: none;
-}
-#tagger:target,
-#preferences:target {
-  display: block;
-  z-index: 1;
-  max-height: 100%;
-  overflow-y: scroll;
-}
 #tagger .newtag select,
 #tagger .newtag .label{
   display: block;

diff --git a/templates/list.html.sh b/templates/list.html.sh
index a03c4dac673332f0525b622e91491fdc224ade1f..06d4110846aa1ddc7158673d2117b887896308df 100755 (executable)
--- a/templates/list.html.sh
+++ b/templates/list.html.sh
@@ -16,8 +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" id="search" action="?" method="get" accept-charset="UTF-8">
     <input type="text" name="s" value="$search" placeholder="Search">
 
     <label for="o1" class="order">Order by:</label>
@@ -29,7 +28,7 @@ cat <<EOF
     <input type="submit" name="submit" value="Find">
 
     <a class="panel clearsearch" href="?">Clear All</a>
-    <a class="panel advanced show" href="#advfilter">Advanced</a>
+    <a class="panel toggle" href="#advfilter">Advanced</a>
 
     <div class="pagination_nav">
       <label>Page:</label>
@@ -46,9 +45,9 @@ cat <<EOF
     $(. $_EXEC/templates/tagger.html.sh)
   </form>
 
-  <div class="panel footer" id="foot">
-    <a class="panel tagger show" href="#tagger">Add Tags</a>
-    <a class="panel tagger show" href="#preferences">Preferences</a>
+  <div class="panel" id="foot">
+    <a class="panel toggle" href="#tagger">Add Tags</a>
+    <a class="panel toggle" href="#preferences">Preferences</a>
 
     <div class="pagination_nav">
       <label>Page:</label>

diff --git a/templates/preferences.html.sh b/templates/preferences.html.sh
index 49e6c7f89a5816fc7961106f437f635b1f23b23b..39b31aa07cdde0aa73e389f582d62b72838cc420 100755 (executable)
--- a/templates/preferences.html.sh
+++ b/templates/preferences.html.sh
@@ -16,7 +16,7 @@
 # along with Serve0  If not, see <http://www.gnu.org/licenses/>. 
 
 cat <<EOF
-  <form class="panel footer" id="preferences"
+  <form class="panel" id="preferences"
    action="?action=preferences" method="post" accept-charset="UTF-8">
     <fieldset>
       <legend>Watch videos:</legend>
@@ -45,7 +45,7 @@ cat <<EOF
 
     <input type="submit" value="Set Cookie!">
 
-    <a class="panel hide" href="#foot">Hide</a>
+    <a class="panel toggle" href="#foot">Hide</a>
   </form>
 EOF
 

diff --git a/templates/tagger.html.sh b/templates/tagger.html.sh
index 20fdc84aa713f4a47ac876ba36cd4df121de183a..10ed7878b9eb883c71e8b5a68914c648df566321 100755 (executable)
--- a/templates/tagger.html.sh
+++ b/templates/tagger.html.sh
@@ -38,7 +38,7 @@ EOF
 }
 
 cat <<EOF
-  <div class="panel footer" id="tagger">
+  <div class="panel" id="tagger">
     <p class="help">Add selectetd tags to selected videos.</p>
     $(category_box $(list_categories))
     <p class="newtag additional">
@@ -47,7 +47,7 @@ cat <<EOF
     </p>
     <input type="submit" value="Add Tags!">
 
-    <a class="panel hide" href="#foot">Hide</a>
+    <a class="panel toggle" href="#foot">Hide</a>
   </div>
 EOF