Mercurial > lbo > hg > geohub

changeset 112:1983da548b88

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
livemap: Mobile website sanity
author Lewin Bormann <lbo@spheniscida.de>
date Wed, 30 Dec 2020 08:29:22 +0100
parents e3ba39a0c78d
children 03b95c2693ec
files assets/livemap.html assets/style.css
diffstat 2 files changed, 29 insertions(+), 12 deletions(-) [+]
line wrap: on
line diff
--- a/assets/livemap.html	Tue Dec 29 19:51:18 2020 +0100
+++ b/assets/livemap.html	Wed Dec 30 08:29:22 2020 +0100
@@ -2,20 +2,21 @@
     <head>
         <link rel="stylesheet" href="thirdparty/leaflet.css" />
         <link rel="stylesheet" href="style.css" />
+
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+
         <title>GeoHub: LiveMap</title>
     </head>
     <body>
     <script src="thirdparty/leaflet.js"></script>
     <script src="shared.js"></script>
 
-        <span id="livemapTitle">GeoHub LiveMap</span>
-    <div>
-        <span id="inputFields">
-            Client: <input type="text" value="" id="inputClient" class="field" />
-            Secret: <input type="text" value="" id="inputSecret" class="field" />
-            <input type="button" value="Go!" id="inputGoButton" onclick="buttonGoClicked()" />
-        </span>
-    </div>
+    <span id="livemapTitle">GeoHub LiveMap</span>
+    <span id="inputFields">
+        <span id="inputField">Client: <input type="text" value="" id="inputClient" class="field" /></span>
+        <span id="inputField">Secret: <input type="text" value="" id="inputSecret" class="field" /></span>
+        <span id="inputFIeld"><input type="button" value="Go!" id="inputGoButton" onclick="buttonGoClicked()" /></span>
+    </span>
     <div id="infoFields" class="timeChanged">
         <!-- Replaced by tooltip. -->
         <!--<b>Last Update:</b> <span id="outputLastUpdate"> </span>-->
--- a/assets/style.css	Tue Dec 29 19:51:18 2020 +0100
+++ b/assets/style.css	Wed Dec 30 08:29:22 2020 +0100
@@ -1,18 +1,28 @@
 body {
     text-size: 120%;
+    padding: 0;
+    margin: 3px;
+}
+html, body {
+    height: 100vh;
+    width: 100vw;
 }
 .field {
-    width: 15em;
+    width: 10em;
+}
+#inputfield {
+    margin: 3px;
+    font-family: monospace;
 }
 #mapid {
-    height: 95%;
-    width: 95%;
+    height: 90vh;
+    width: 100%;
     margin: 5px;
 }
 #livemapTitle {
     color: blue;
     font-weight: bold;
-    margin-right: 3em;
+    margin-right: 1em;
 }
 #infoFields {
     border-style: solid;
@@ -29,3 +39,9 @@
     animation-duration: 2s;
     animation-iteration-count: 1;
 }
+
+@media (max-width: 675px) {
+    #inputfield {
+        display: block;
+    }
+}