styling

README.md

@@ -0,0 +1,14 @@
+# actually a fork of XPPL for geolocation
+
+## installation 
+
+Install the required dependencies:
+
+    $ pip3 install -r requirements.txt
+
+## run in docker
+first install docker, then:
+
+    $ sh build_docker.sh
+
+

app/static/css/style.css

@@ -7,7 +7,8 @@ body{
   background-color: #f1f1f1;
   font-size: clamp(12px, 1.2vw, 25px);
   box-sizing: border-box;
-
+  margin: 0;
+  padding: 0;
 }
 
 p{
@@ -88,20 +89,7 @@ audio{
 }
 
 
-/* HOME PUPOP */
+
-.locations_popup .row{
-  position: fixed;
-  bottom: 0;
-  background-color: black;
-  color: white;
-  border-radius: 2em 2em 0 0;
-  width: 100%;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 1em;
-  left: 0;
-  display: none;
-}
 
 
 /* FROM */
@@ -220,3 +208,57 @@ margin: 4em 0;
 .redo_btn{
   display: none;
 }
+
+/* POPUP ON FRONTSCREEN */
+.close{
+  float:right;
+  font-size: 2em;
+  padding: 0;
+  cursor: pointer;
+}
+
+.locations_popup .row div:nth-of-type(2){
+  margin-bottom: 2em;
+  font-size: 2em;
+}
+
+.locations_popup .row{
+  position: fixed;
+  bottom: 0;
+  background-color: black;
+  color: white;
+  border-radius: 2em 2em 0 0;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 1em;
+  left: 0;
+  display: none;
+  padding-bottom: 2em;
+}
+
+#position{
+  position: fixed;
+  display: inline-block;
+  top: 0;
+  font-size: 1em;
+  font-family: 'Courier New', Courier, monospace;
+  margin: 1em;
+}
+
+#button_group{
+  position: fixed;
+  display: inline-block;
+  bottom: 0;
+  font-size: 1em;
+  padding: 1em;
+  box-sizing: border-box;
+}
+
+#button_group button, #button_group select{
+  background-color: black;
+  color: white;
+  border: 1px solid white;
+  border-radius: 2em;
+  padding: 0.8em;
+}

app/templates/addaudio.html

@@ -53,7 +53,7 @@
 <script>
 
 var mediaRecorder;
-var seconds_rec = 0;
+var seconds_rec = 1;
 var seconds_int;
 var audio;
 var state = "empty";
@@ -202,7 +202,7 @@ function stop_audio(){
 
 function redo_audio(){
     state = "empty";
-    seconds_rec = 0;
+    seconds_rec = 1;
     document.getElementById('play_btn').style.display = 'none'
     document.getElementById('redo_btn').style.display = 'none'
     document.getElementById('stop_btn').style.display = 'block'

app/templates/home.html

@@ -4,24 +4,29 @@
 <div id="home_content">
 <p id="position"></p>
 <!-- <h1 class="header" id="title">GEO</h1> -->
-<button id="store_location" onclick="store_location()">store my position</button>
+  <div id="button_group">
-<button id="add_text" onclick="add_text()">add message</button>
+    <button id="store_location" onclick="store_location()">store my position</button>
-<button id="add_audio" onclick="add_audio()">add audio</button>
+    <button id="add_text" onclick="add_text()">add message</button>
+    <button id="add_audio" onclick="add_audio()">add audio</button>
+
+    <select id="viewSelector" onchange="changeViewSelect()" >  
+      <option>Choose view</option>  
+      <option value="all">all nodes</option>  
+      <option value="closest">closest</option>  
+    </select> 
+  </div>
 </div>
 
 <!-- HEADING DIRECTION https://stackoverflow.com/questions/46033649/heading-javascript-geolocation -->
 <!-- COMPASS CROSS DEVICE https://stackoverflow.com/questions/16048514/can-i-use-javascript-to-get-the-compass-heading-for-ios-and-android-->
 
-<select id="viewSelector" onchange="changeViewSelect()" >  
+  
-  <option>---Choose view---</option>  
-  <option value="all">all nodes</option>  
-  <option value="closest">closest</option>  
-</select>   
 
 
 <div class="locations_popup">
   {% for location in locations %}
     <div class="row" id={{location.id}}>
+      <div onclick="closeLocation()" class="close">×</div>
       <div>{{location.longitude}}, {{location.latitude}}</div>
       <div>{{location.message if location.loc_type == "message"}}</div>
       <div>
@@ -246,6 +251,13 @@
       document.getElementById(id).style.display = "block";
     }
 
+    function closeLocation(){
+      var divsToHide = document.getElementsByClassName("row"); //divsToHide is an array
+      for(var i = 0; i < divsToHide.length; i++){
+          divsToHide[i].style.display = "none"; // depending on what you're doing
+      }
+    }
+
     window.addEventListener('resize', function(event) {
       updateView()
 }, true);