Ignore:
Timestamp:
2023-03-12T16:09:33+13:00 (14 months ago)
Author:
davidb
Message:

Changed fill-remainging height to Flex-box based

File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r37463 r37464  
    11<!DOCTYPE html>
    22<html lang="en">
    3 <head>
     3  <head>
    44    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    55    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover, shrink-to-fit=no">
    6 
     6   
    77    <title>Greenstone Tabletop DL</title>
    88
    … …  
    2121    <script src="interactjs-dist/interact.min.js"></script>
    2222    <script src="my-interact.js"></script>
     23   
    2324
    24     <!--
    25     <script src="drag-with-inertia.js"></script>
    26     -->
     25    <link rel="stylesheet" href="tabletop.css">
    2726   
    28     <!--
    29     <link rel="stylesheet" href="tabletop-winbox.css">
    30     -->
    31    
    32     <style>
    33       /*
    34       html  {
    35       overflow: hidden;
    36      
    37       background: #102010 url(backgrounds/unsplash--dark-green-fern--overview.jpg) no-repeat center center fixed;
    38       background-size: cover;
    39       height: 100%;
    40       overflow: hidden;
    41       }
    42 
    43       html, body {
    44       margin: 0;
    45       padding: 0;
    46       border: 0;
    47       }
    48 
    49       body {
    50       position: fixed;
    51       top: 0;
    52       right: 0;
    53       bottom: 0;
    54       left: 0;
    55       font-family: Helvetica, Arial, "Open Sans", OpenSans, sans-serif;
    56       text-align: center;
    57       color: #fff;
    58       }
    59 
    60       header {
    61       position: sticky;
    62       top: 0;
    63       width: 100%;
    64       //height: 30px;
    65       color: white;
    66       background: linear-gradient(to right, rgba(13, 17, 22, 0.64), rgba(17, 21, 28, 0.64));
    67       padding: 0.6rem;
    68       border-bottom: 1px solid #181f2a;
    69       z-index: 2;
    70       }
    71 */
    72       html {
    73       background: #102010 url(backgrounds/unsplash--dark-green-fern--overview.jpg) no-repeat center center fixed;
    74       background-size: cover;
    75       }
    76          
    77       html, body {
    78       overflow: hidden;
    79           height: 100%;
    80           width:  100%;
    81           margin:  0;
    82       padding: 0;
    83       border:  0;
    84       }
    85 
    86       body {
    87       font-family: Helvetica, Arial, "Open Sans", OpenSans, sans-serif;
    88       color: #fff;
    89       }
    90      
    91       #fixed-height {
    92           height: 40px;
    93       color: white;
    94       background: linear-gradient(to right, rgba(13, 17, 22, 0.64), rgba(17, 21, 28, 0.64));
    95           text-align: center;
    96       }
    97 
    98       #remaining-height {
    99       overflow: hidden;   
    100           position: absolute;
    101           top: 40px;
    102           bottom: 0;
    103           width: 100%;
    104       }
    105 
    106 
    107       #drag-1, #drag-2 {
    108       width: 25%;
    109       min-height: 6.5em;
    110       margin: 1rem 0 0 1rem;
    111       background-color: #29e;
    112       color: white;
    113       border-radius: 0.75em;
    114       padding: 4%;
    115       touch-action: none;
    116       user-select: none;
    117       transform: translate(0px, 0px);
    118       }
    119      
    120       .resize-drag {
    121       width: 120px;
    122       border-radius: 8px;
    123       padding: 20px;
    124       margin: 1rem;
    125       background-color: #29e;
    126       color: white;
    127       font-size: 20px;
    128       font-family: sans-serif;
    129      
    130       touch-action: none;
    131      
    132       /* This makes things *much* easier */
    133       box-sizing: border-box;
    134       }
    135 
    136 
    137       #scale-element {
    138       display: block;
    139       max-width: 100%;
    140       margin: 1rem auto;
    141       touch-action: none;
    142       }
    143      
    144     </style>
    14527</head>
    14628
    14729<!--
    148     https://www.w3docs.com/snippets/html/how-to-make-a-div-fill-the-height-of-the-remaining-space.html#:~:text=Another%20way%20of%20making%20a,to%20stretch%20the%20.
     30    To create a div that fills to the remaining available height see Approach 1 of:   
     31      https://www.w3docs.com/snippets/html/how-to-make-a-div-fill-the-height-of-the-remaining-space.html
    14932  -->
    15033
    151 <body>
     34  <body>
     35
     36    <div class="box">
     37      <div id="gs-header" class="row header" style="display: none;">
     38    <div style="padding-top: 0.6em;">Greenstone Tabletop Digital Library</div>
     39      </div>
     40      <div class="row content" style="margin: 0.5em;">
     41
     42    <div style="position: relative; width: 100%; height: 100%;">
     43
     44      <div id="gs-open-home" class="button"
     45           style="position: absolute; left: 10px; bottom: 10px; background-color: #004000"
     46           onclick="gsToggleHeader()">Open DL Home</div>
     47     
     48
     49      <div id="gesture-area" style="position: absolute; left: 700px; top: 30px; width: 576px; height: 384px;">
     50        <img src="backgrounds/unsplash--matrix-like-binary.jpg"
     51         style="width: 576px; height: 384px"
     52         id="scale-element" />
     53      </div>
     54     
     55      <div id="info-window-id" class="info-window resize-drag">
     56        <p> You can drag one element </p>
     57        <p>Goto <a href="https://greenstone.org/">Greenstone3 Project Home Page</a></p>
     58        <p>
     59          <form>
     60        <input type="text" />
     61          </form>
     62        </p>
     63      </div>
     64     
     65    </div>
     66   
     67      </div>
     68      <div class="row footer" style="display:none;">
     69        <p>footer (fixed height)</p>
     70      </div>
     71    </div>
     72   
     73    <!--
    15274    <header id="fixed-height">
    15375      <div style="padding-top: 0.6em;">Greenstone Tabletop Digital Library</div>
    15476    </header>
     77   
     78    <div id="remaining-height">
    15579
    156     <!--
    157     <div class="wrapperXXX" style="position: absolute; height: 95%; width: 100%; margin: 0.8rem;">
    158       -->
    159      <div id="remaining-height">
     80      <div style="position: relative; height: 100%; width: 100%; padding: 40px;">
     81    <div>
     82     
     83      <div class="button"
     84       style="position: absolute; left: 10px; bottom: 10px; background-color: #004000"
     85       onclick="openGSWindow()">Open DL Home</div>
     86       
     87      < !- -
     88      <div class="button" onclick="window.examples['iframe']()" style="background-color: #004000">Open DL Home</div>
     89      - - >
    16090
    161       <!--
    162       <div class="button" onclick="window.examples['iframe']()" style="background-color: #004000">Open DL Home</div>
    163       -->
    164 
    165       <!--
     91     
     92      < ! - -
    16693        <hr />
    167       -->
     94      - - >
    16895   
    16996    <div id="gesture-area" style="position: absolute; left: 700px; top: 30px; width: 576px; height: 384px;">
    17097      <img src="backgrounds/unsplash--matrix-like-binary.jpg"
    17198           style="width: 576px; height: 384px"
    172            alt="sample image" id="scale-element" />
     99           id="scale-element" />
    173100    </div>
    174101
    175     <div id="drag-1" class="resize-drag">
     102    <div id="info-window-id" class="info-window resize-drag">
    176103      <p> You can drag one element </p>
    177104      <p>Goto <a href="https://greenstone.org/">Greenstone3 Project Home Page</a></p>
     105      <p>
     106        <form>
     107          <input type="text" />
     108        </form>
     109      </p>
    178110    </div>
    179     <div id="drag-2" class="resize-drag">
    180       <p> with each pointer </p>
    181       <form>
    182         <input type="text" />
    183       </form>
    184     </div>
     111   
     112    < ! - -
     113        <hr />
     114        - - >
    185115
    186    
    187 <!--
    188     <hr />
    189 -->
    190       <!--
    191       <div style="position: relative; height: 400px; ">
    192     <div id="myWindow" style="width: 500px; padding: 16px; background-color: #004000; position: absolute;">
    193       <div style="width: 100% height 40px; background-color: #002000;">DIY Dragable</div>
    194       <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </p>
    195           <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    196116    </div>
    197117      </div>
    198 
    199       <div style="position: relative">
    200    
    201     <div id="myWindow2" style="width: 500px; padding: 16px; background-color: #200000; position: absolute; left: 600px;">
    202       <div style="width: 100% height 40px; background-color: #400000;">Fixed -- no handler</div>
    203       <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </p>
    204           <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    205     </div>
    206       </div>
    207      
     118       
    208119    </div>
    209120    -->
    210     </div>
    211 </body>
     121   
     122  </body>
     123  <script>
     124    function gsToggleHeader()
     125    {
     126    $('#gs-header').slideToggle();
     127    }
     128  </script>
    212129</html>
Note: See TracChangeset for help on using the changeset viewer.