add color scheme, feedback

public/css/data.css

@@ -14,7 +14,7 @@ h1{
     font-size: 20px;
 }
 h1 span{
-    color: gray;
+    color: var(--themeh);
     text-align: right;
 }
 .data-catagory{
@@ -23,7 +23,8 @@ h1 span{
     max-width: 90%;
     margin: 0px auto;
     cursor: pointer;
-    background-color: #eee;
+    background-color: var(--theme3);
+    color: var(--themeh);
     border-radius: 3px;
     margin-bottom: 10px;
     -webkit-box-shadow: 10px 10px 5px -6px rgba(0,0,0,0.1);
@@ -31,8 +32,8 @@ h1 span{
     box-shadow: 10px 10px 5px -6px rgba(0,0,0,0.1);
 }
 .data-header{
-    background-color: #ddd;
-
+    background-color: var(--theme2);
+    color: var(--themeh);
     padding-top: 3px;
     padding-bottom: 3px;
     width: 100%;
@@ -42,7 +43,6 @@ h1 span{
     border-top-right-radius: 3px;
 }
 .elem-div{
-    margin-top: 10px;
     max-width: 40%;
     width: 300px;
     display: inline-block;
@@ -50,7 +50,9 @@ h1 span{
     border-radius: 3px;
     padding-left: 30px;
     text-align: left;
-    margin: 1%;
+    margin-bottom:10px;
+    margin-left: 5px;
+    margin-right: 5px;
 }
 @media only screen and (max-width: 800px) {
     .elem-div{
@@ -59,10 +61,10 @@ h1 span{
     }
 }
 .elem-1{
-    background-color: #ccc;
+    background-color: var(--theme4);
 }
 .elem-0{
-    background-color: #ccc;
+    background-color: var(--theme4);
 }
 input[type="radio"]:checked+label{ 
     font-weight: bold; 
@@ -81,7 +83,7 @@ input[type="radio"]:checked{
      display: inline-block;
      position: relative;
      background-color: #f1f1f1;
-     color: #666;
+     color: var(--themeh);
      top: 10px;
      height: 30px;
      width: 30px;
@@ -102,7 +104,7 @@ input[type="radio"]:checked{
 }
 .form-radio:hover
 {
-     background-color: #f7f7f7;
+     background-color: var(--theme4);
 }
 .form-radio:checked
 {
@@ -111,15 +113,15 @@ input[type="radio"]:checked{
 label
 {
      font: 15px/1.7 'Open Sans', sans-serif;
-     color: #333;
+     color: var(--themep);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      cursor: pointer;
 } 
 
 #data-prompt-box{
-    background-color: #888;
-    color: white;
+    background-color: var(--theme1);
+    color: var(--theme1);
     position: fixed;
     bottom: 0px;
     padding-top: 30px;
@@ -129,6 +131,12 @@ label
 #data-prompt{
     transition-duration: 1s;
 }
+#prompt-text{
+    background: -webkit-linear-gradient(white,lightgray);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-size: 20px;
+}
 
 .lds-ellipsis {
     display: inline-block;

public/css/main.css

 :root {
-    --datacolor1: rgb(240, 92, 92);
-    --datacolor2:rgb(209, 50, 50);
+    --datacolor1: #1D976C;
+    --datacolor2:#93F9B9;
+    --theme1: #444;
+    --theme2: #888;
+    --theme3: #bbb;
+    --theme4: #ddd;
+    --themeh: white;
+    --themep: black;
   }
 
 html, body, #viewDiv{
@@ -29,19 +35,19 @@ html, body, #viewDiv{
     padding: 10px; 
     margin-top: 0px;
     border-radius: 10px; 
-    border: 1px solid black;
+    border: 1px solid var(--theme2);
     -webkit-box-shadow: 10px 10px 5px -4px rgba(0,0,0,0.35);
     -moz-box-shadow: 10px 10px 5px -4px rgba(0,0,0,0.35);
     box-shadow: 10px 10px 5px -4px rgba(0,0,0,0.35);
 }
 .nav-view-button:hover{
-    background-color: lightgray;
+    background-color: var(--theme3);
 }
 .nav-button-idle{
-    background-color: white; 
+    background-color: var(--theme4); 
 }
 .nav-button-select{
-    background-color: gray; 
+    background-color: var(--theme2); 
 }
 #loading{
     width: 100vw;
@@ -66,24 +72,24 @@ html, body, #viewDiv{
   }
   @-webkit-keyframes glowing {
     0% { background-color: var(--datacolor2);; -webkit-box-shadow: 0 0 3px var(--datacolor2);; }
-    50% { background-color: var(--datacolor1);; -webkit-box-shadow: 0 0 40px var(--datacolor1);; }
+    50% { background-color: var(--datacolor1);; -webkit-box-shadow: 0 0 20px var(--datacolor1);; }
     100% { background-color: var(--datacolor2);; -webkit-box-shadow: 0 0 3px var(--datacolor2);; }
   }
   
   @-moz-keyframes glowing {
     0% { background-color: var(--datacolor2);; -moz-box-shadow: 0 0 3px var(--datacolor2);; }
-    50% { background-color: var(--datacolor1);; -moz-box-shadow: 0 0 40px var(--datacolor1);; }
+    50% { background-color: var(--datacolor1);; -moz-box-shadow: 0 0 20px var(--datacolor1);; }
     100% { background-color: var(--datacolor2);; -moz-box-shadow: 0 0 3px var(--datacolor2);; }
   }
   
   @-o-keyframes glowing {
     0% { background-color: var(--datacolor2);; box-shadow: 0 0 3px var(--datacolor2);; }
-    50% { background-color: var(--datacolor1);; box-shadow: 0 0 40px var(--datacolor1);; }
+    50% { background-color: var(--datacolor1);; box-shadow: 0 0 20px var(--datacolor1);; }
     100% { background-color: var(--datacolor2);; box-shadow: 0 0 3px var(--datacolor2);; }
   }
   
   @keyframes glowing {
     0% { background-color: var(--datacolor2);; box-shadow: 0 0 3px var(--datacolor2);; }
-    50% { background-color: var(--datacolor1);; box-shadow: 0 0 40px var(--datacolor1);; }
+    50% { background-color: var(--datacolor1);; box-shadow: 0 0 20px var(--datacolor1);; }
     100% { background-color: var(--datacolor2);; box-shadow: 0 0 3px var(--datacolor2);; }
   }
\ No newline at end of file

public/js/data.js

@@ -12,7 +12,7 @@
 var query_type = null; // 0 = reading, 1 = streaming
 var query_selection = [null,null,null,null,null,null]; // trip, site, sector, spot, platform, date
 
-var placeholderHTML = "<div style='float: left; width: 100%; height: 100%; text-align:center; padding-top:20px;color: #bbb'>Organizing numbers...</div><div class='lds-ellipsis'><div></div><div></div><div></div><div></div></div>";
+var placeholderHTML = "<div style='float: left; width: 100%; height: 100%; text-align:center; padding-top:20px;color: var(--themep)'>Organizing numbers...</div><div class='lds-ellipsis'><div></div><div></div><div></div><div></div></div>";
  
 /*
 Streamings/Readings

public/js/map.js

@@ -70,7 +70,9 @@ function createPoints(points,color){
             type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
             color: color,
         };
-        view.center = [points[0].longitude, points[0].latitude]; // set center of view to the first point in the set
+        if (points.length > 0){
+            view.center = [points[0].longitude, points[0].latitude]; // set center of view to the first point in the set
+        }
 
         for(x=0;x<points.length;x++){
             var point = {

public/js/util.js

@@ -9,8 +9,13 @@
 
 // NAVIGATION / UTIL //
 function switchToMap(){ 
-    var dataview = document.getElementById("dataView")
+    var dataview = document.getElementById("dataView");
+    var mapview = document.getElementById("mapView");
+    if (dataview.querySelector("#nav-button-map").classList.contains("new_data_button")){
+        mapview.querySelector("#nav-button-graph").classList.add("new_data_button");
+    }
     dataview.querySelector("#nav-button-map").classList.remove("new_data_button");
+    dataview.querySelector("#nav-button-graph").classList.remove("new_data_button");
 
     setTimeout(function(){ document.getElementById("loading").style.display = "block"; }, 10);
     document.getElementById("dataView").style.display = "none";
@@ -20,8 +25,13 @@ function switchToMap(){
     setTimeout(function(){ document.getElementById("loading").style.display = "none"; }, 10);
 }
 function switchToGraph(){
-    var dataview = document.getElementById("dataView")
-    dataview.querySelector("#nav-button-graph").classList.remove("new_data_button");
+    var dataview = document.getElementById("dataView");
+    var graphview = document.getElementById("graphView");
+    if (dataview.querySelector("#nav-button-map").classList.contains("new_data_button")){
+        graphview.querySelector("#nav-button-map").classList.add("new_data_button");
+    }
+    dataview.querySelector("#nav-button-graph").classList.remove("new_data_button"); // set graph view to no prompt
+    dataview.querySelector("#nav-button-map").classList.remove("new_data_button");
 
     setTimeout(function(){ document.getElementById("loading").style.display = "block"; }, 10);
     document.getElementById("mapView").style.display = "none";

views/index.ejs

@@ -88,7 +88,7 @@
         <div id='dataView'>
             <div id='data'>
                 <div class='data-catagory'>
-                    <div class='data-header' style='padding-bottom:15px; background-color: #bbb'>
+                    <div class='data-header' style='padding-bottom:15px;''>
                         <input class="data-radio form-radio" onchange="setReading();" type="radio" name="data-type" id="readings"/>
                         <label for="readings"><strong>Readings</strong></label>
 
@@ -105,7 +105,7 @@
                 <div class='data-catagory' id='streaming'></div>
                 <div class='data-catagory' id='reading'></div>
                 <div id='data-prompt-box'>
-                    <strong>
+                    <strong id='prompt-text'>
                         <span id='data-prompt'>Select a data type</span>
                     </strong>
                 </div>