Changeset 37463


Ignore:
Timestamp:
2023-03-11T23:54:12+13:00 (12 days ago)
Author:
davidb
Message:

Shifting work to using interact.js

Location:
gs3-extensions/tabletop-dl/trunk
Files:
1 added
2 edited

Legend:

Unmodified
Added
Removed

  • gs3-extensions/tabletop-dl/trunk/tabletop-winbox.css

    r37462 r37463  
    1212
    1313body {
    14     position: fixed;
     14    /* position: fixed;
    1515    top: 0;
    1616    right: 0;
    1717    bottom: 0;
    18     left: 0;
     18    left: 0;  */
     19   
    1920    font-family: Helvetica, Arial, "Open Sans", OpenSans, sans-serif;
    20     text-align: center;
     21    /* text-align: center; */
    2122    color: #fff;
    22 
     23/*
    2324    -webkit-tap-highlight-color: transparent;
    2425    -webkit-text-size-adjust: 100%;
    2526    -webkit-touch-callout: none;
     27*/
    2628    /*
    2729    -webkit-user-select: none;
    … …  
    3436    overflow: hidden;
    3537}
     38/*
    3639main{
    3740    position: fixed;
    … …  
    4245    overflow-x: hidden;
    4346    overflow-y: hidden;
     47    /* overflow-y: scroll; */
    4448    -webkit-overflow-scrolling: touch;
    4549    overflow-scrolling: touch;
    4650    /*content-visibility: auto;*/
    4751}
    48 header{
    49     position: sticky;
    50     top: 0;
    51     width: 100%;
    52     height: 50px;
    53     /* background: linear-gradient(to right, rgba(13, 17, 22, 0.94), rgba(17, 21, 28, 0.94)); */
    54     background: linear-gradient(to right, rgba(13, 17, 22, 0.64), rgba(17, 21, 28, 0.64));
    55     padding: 15px 0;
    56     border-bottom: 1px solid #181f2a;
    57     z-index: 2;
    58 }
     52 */
     53 
     54header {
     55    /*position: sticky;
     56    top: 0; */
     57     width: 100%;
     58     height: 50px;
     59     /* background: linear-gradient(to right, rgba(13, 17, 22, 0.94), rgba(17, 21, 28, 0.94)); */
     60     background: linear-gradient(to right, rgba(13, 17, 22, 0.64), rgba(17, 21, 28, 0.64));
     61     padding: 15px 0;
     62     /* border-bottom: 1px solid #181f2a; */
     63     z-index: 2;
     64 }
     65 
    5966.wrapper{
    6067    position: relative;
    … …  
    6774    z-index: 1;
    6875}
     76/*
    6977a{
    7078    display: inline-block;
    … …  
    7785    padding: 10px;
    7886}
     87*/
     88
    7989button{
    8090    padding: 5px 10px;
    … …  
    8595    padding: 0;
    8696}
     97/*
    8798h1 img{
    8899    width: 100%;
    … …  
    100111    margin:0;
    101112}
    102 hr{
     113*/
     114
     115hrXX {
    103116    border: 0;
    104117    border-bottom: 1px solid #1c2431;
    … …  
    106119    padding-top: 20px;
    107120}
     121
    108122.button {
    109123    display: inline-block;

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

    r37462 r37463  
    1010
    1111   
     12    <!-- Import as bundled (All-in-one): -->
     13    <!-- <script src="dist/winbox.bundle.min.js"></script> -->
     14
     15    <!-- Or import JS + CSS separately: -->
     16    <!--
     17    <link rel="stylesheet" href="winbox-dist/css/winbox.min.css">
     18    <script src="winbox-dist/js/winbox.min.js"></script>
     19    -->
     20   
     21    <script src="interactjs-dist/interact.min.js"></script>
     22    <script src="my-interact.js"></script>
     23
     24    <!--
    1225    <script src="drag-with-inertia.js"></script>
    13 
     26    -->
     27   
     28    <!--
    1429    <link rel="stylesheet" href="tabletop-winbox.css">
     30    -->
    1531   
    1632    <style>
     33      /*
    1734      html  {
    1835      overflow: hidden;
    … …  
    2340      overflow: hidden;
    2441      }
     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     
    25144    </style>
    26145</head>
    27146
     147<!--
     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.
     149  -->
     150
    28151<body>
    29   <main>
    30     <header>
    31       Greenstone Tabletop Digital Library
     152    <header id="fixed-height">
     153      <div style="padding-top: 0.6em;">Greenstone Tabletop Digital Library</div>
    32154    </header>
    33155
    34     <div class="wrapper">
    35       <div class="button" onclick="window.examples['iframe']()" style="background-color: #004000">Open DL Home</div>
    36       <br /><br />
    37 
     156    <!--
     157    <div class="wrapperXXX" style="position: absolute; height: 95%; width: 100%; margin: 0.8rem;">
     158      -->
     159     <div id="remaining-height">
     160
     161      <!--
     162      <div class="button" onclick="window.examples['iframe']()" style="background-color: #004000">Open DL Home</div>
     163      -->
     164
     165      <!--
     166        <hr />
     167      -->
     168   
     169    <div id="gesture-area" style="position: absolute; left: 700px; top: 30px; width: 576px; height: 384px;">
     170      <img src="backgrounds/unsplash--matrix-like-binary.jpg"
     171           style="width: 576px; height: 384px"
     172           alt="sample image" id="scale-element" />
     173    </div>
     174
     175    <div id="drag-1" class="resize-drag">
     176      <p> You can drag one element </p>
     177      <p>Goto <a href="https://greenstone.org/">Greenstone3 Project Home Page</a></p>
     178    </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>
     185
     186   
     187<!--
     188    <hr />
     189-->
     190      <!--
    38191      <div style="position: relative; height: 400px; ">
    39192    <div id="myWindow" style="width: 500px; padding: 16px; background-color: #004000; position: absolute;">
    … …  
    46199      <div style="position: relative">
    47200   
    48     <div id="myWindow2" style="width: 500px; padding: 16px; background-color: #200000; position: absolute;">
     201    <div id="myWindow2" style="width: 500px; padding: 16px; background-color: #200000; position: absolute; left: 600px;">
    49202      <div style="width: 100% height 40px; background-color: #400000;">Fixed -- no handler</div>
    50203      <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>
    … …  
    54207     
    55208    </div>
    56      
     209    -->
    57210    </div>
    58   </main>
    59211</body>
    60212</html>
Note: See TracChangeset for help on using the changeset viewer.