Commit 88944985 authored by Porter Libby's avatar Porter Libby
Browse files

add color scheme, feedback

parent 9c80fbdd
......@@ -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;
......
: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
......@@ -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
......
......@@ -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 = {
......
......@@ -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";
......
......@@ -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>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment