minor changes to home

app/static/css/style.css

@@ -63,8 +63,7 @@ audio{
 }
 
 .locations_list .row div:last-of-type{
-  width: 10%;
+  
-  min-width: 3rem;
 }
 
 .locations_list .row div{

app/templates/home.html

@@ -2,15 +2,15 @@
 
 {% block main %}
 <div id="home_content">
-<h1 class="header" id="title">GEO</h1>
 <p id="position"></p>
+<!-- <h1 class="header" id="title">GEO</h1> -->
 <button id="store_location" onclick="store_location()">store my position</button>
 <button id="add_text" onclick="add_text()">add message</button>
 <button id="add_audio" onclick="add_audio()">add audio</button>
 </div>
 
 <!-- HEADING DIRECTION https://stackoverflow.com/questions/46033649/heading-javascript-geolocation -->
-<!-- COMPAS CROSS DEVICE https://stackoverflow.com/questions/16048514/can-i-use-javascript-to-get-the-compass-heading-for-ios-and-android-->
+<!-- COMPASS CROSS DEVICE https://stackoverflow.com/questions/16048514/can-i-use-javascript-to-get-the-compass-heading-for-ios-and-android-->
 
 {% endblock main %}
 {% block js %}
@@ -40,13 +40,35 @@
     // }).addTo(map);
     
     locations.forEach(function (item, index) {
+
         try {
+            if(item.loc_type=="message"){
               var circle = L.circle([item.latitude, item.longitude], {
-            color: 'red',
+              color: 'blue',
-            fillColor: 'red',
+              stroke:false,
+              fillColor: 'blue',
               fillOpacity: 1,
+              radius: 15
+              }).addTo(map).on("click", circleClick);;
+            }
+            else if(item.loc_type=="audio"){
+              var circle = L.circle([item.latitude, item.longitude], {
+              color: 'green',
+              stroke:false,
+              fillColor: 'green',
+              fillOpacity: 0.5,
+              radius: 15
+              }).addTo(map).on("click", circleClick);;
+            }
+            else{
+              var circle = L.circle([item.latitude, item.longitude], {
+              color: 'black',
+              stroke:false,
+              fillColor: 'black',
+              fillOpacity: 0.5,
               radius: 30
-            }).addTo(map);
+              }).addTo(map).on("click", circleClick);;
+            }
         } catch (error) {
         console.error(error);
         }
@@ -55,9 +77,10 @@
     });
     
     var myPositionCircle = L.circle([48.172934, 9.01236], {
-        color: 'black',
+        color: 'red',
-        fillColor: 'black',
+        stroke:false,
-        fillOpacity: 1,
+        fillColor: 'red',
+        fillOpacity: 0.5,
         radius: 30
     }).addTo(map);
     

app/views.py

@@ -65,8 +65,6 @@ def list_locations():
     return render_template('list.html',domain=DOMAIN, locations = locations, data_locations = serialized)
 
 
-
-
 @app.route('/hello/<name>')
 def hello(name):
     return "Hello " + name