Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
Field Science
datavis
Commits
88944985
Commit
88944985
authored
Nov 05, 2019
by
Porter Libby
Browse files
add color scheme, feedback
parent
9c80fbdd
Changes
6
Hide whitespace changes
Inline
Side-by-side
public/css/data.css
View file @
88944985
...
...
@@ -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
View file @
88944985
: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
4
0px
var
(
--datacolor1
);
;
}
50
%
{
background-color
:
var
(
--datacolor1
);
;
-webkit-box-shadow
:
0
0
2
0px
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
4
0px
var
(
--datacolor1
);
;
}
50
%
{
background-color
:
var
(
--datacolor1
);
;
-moz-box-shadow
:
0
0
2
0px
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
4
0px
var
(
--datacolor1
);
;
}
50
%
{
background-color
:
var
(
--datacolor1
);
;
box-shadow
:
0
0
2
0px
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
4
0px
var
(
--datacolor1
);
;
}
50
%
{
background-color
:
var
(
--datacolor1
);
;
box-shadow
:
0
0
2
0px
var
(
--datacolor1
);
;
}
100
%
{
background-color
:
var
(
--datacolor2
);
;
box-shadow
:
0
0
3px
var
(
--datacolor2
);
;
}
}
\ No newline at end of file
public/js/data.js
View file @
88944985
...
...
@@ -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
View file @
88944985
...
...
@@ -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
View file @
88944985
...
...
@@ -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
View file @
88944985
...
...
@@ -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>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment