Changeset 37467 for gs3-extensions/tabletop-dl/trunk/tabletop.html

Timestamp:

2023-03-12T17:47:25+13:00 (14 months ago)

Author:

davidb

Message:

Control bar now slides out from left

File:

• gs3-extensions/tabletop-dl/trunk/tabletop.html (modified) (4 diffs)

gs3-extensions/tabletop-dl/trunk/tabletop.html

@@ -35 +35 @@
 
     <div class="box">
-      <div id="gs-header" class="row header" style="display: none;">
+      <div id="gs-control-bar_ORIG" class="row header" style="display: none;">
     <div style="padding-top: 0.6em;">Greenstone Tabletop Digital Library</div>
       </div>
@@ -42 +42 @@
     <div style="position: relative; width: 100%; height: 100%;">
 
-      <div id="gs-open-home" class="button" onclick="gsToggleHeader()">Toggle Control Bar</div>
+      <div id="gs-control-bar">
+        <div style="padding-top: 0.6em;">Greenstone Tabletop Digital Library</div>
+      </div>
+      <div id="gs-control-bar-toggle" class="button" onclickXXX="gsToggleHeader()">&#9776;</div>
       
 
@@ -52 +55 @@
       </div>
       
-      <div id="info-window-id" class="info-window resize-drag" style="width: 400px;">
+      <div id="info-window-id" class="info-window resize-drag"
+           style="position: absolute; left: 100px; top: 60px; width: 400px;">
+        <p class="interact-info-bar">Info:</p>
         <p> You can Drag and Resize this element </p>
-        <p>Goto <a href="https://greenstone.org/">Greenstone3 Project Home Page</a></p>
+        <p>Goto <a target="_blank" href="https://greenstone.org/">Greenstone3 Project Home Page</a></p>
         <p>
           <form>
@@ -86 +91 @@
   </body>
   <script>
+    /*
     function gsToggleHeader()
     {
     $('#gs-header').slideToggle();
     }
+    */
+    $(document).ready(function() {
+    $("#gs-control-bar").width("100%").hide();
+    
+    $("#gs-control-bar-toggle").click(function(){
+            $("#gs-control-bar").animate({
+        width: "toggle"
+            });
+    });
+    });
+    
   </script>
 </html>