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

Timestamp:

2023-03-12T17:12:26+13:00 (13 months ago)

Author:

davidb

Message:

Added in text window that can be zoomed and dragged

File:

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

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

@@ -42 +42 @@
     <div style="position: relative; width: 100%; height: 100%;">
 
-      <div id="gs-open-home" class="button" 
-           style="position: absolute; left: 10px; bottom: 10px; background-color: #004000"
-           onclick="gsToggleHeader()">Open DL Home</div>
+      <div id="gs-open-home" class="button" onclick="gsToggleHeader()">Toggle Control Bar</div>
       
 
-      <div id="gesture-area" style="position: absolute; left: 700px; top: 30px; width: 576px; height: 384px;">
-        <img src="backgrounds/unsplash--matrix-like-binary.jpg"
+      <div id="gesture-area" class="drag-and-zoom"
+           style="position: absolute; left: 700px; top: 30px; width: 576px; height: 384px;">
+        <img class="info-window scale-element" src="backgrounds/unsplash--matrix-like-binary.jpg"
          style="width: 576px; height: 384px"
          id="scale-element" />
       </div>
       
-      <div id="info-window-id" class="info-window resize-drag">
-        <p> You can drag one element </p>
+      <div id="info-window-id" class="info-window resize-drag" style="width: 400px;">
+        <p> You can Drag and Resize this element </p>
         <p>Goto <a href="https://greenstone.org/">Greenstone3 Project Home Page</a></p>
         <p>
@@ -61 +60 @@
           </form>
         </p>
+      </div>
+
+      <div class="drag-and-zoom"
+           style="position: absolute; left: 300px; top: 430px; width: 400px;">
+        <div class="info-window scale-element" style="width: 100%">
+          <p>You can Drag and Zoom this element </p>
+          <p>Goto <a href="https://greenstone.org/">Greenstone3 Project Home Page</a></p>
+          <p>
+        <form>
+          <input type="text" />
+        </form>
+          </p>
+        </div> 
       </div>