Commit c224b209 authored by Patrick Godwin's avatar Patrick Godwin

switch to Chad's light theme, change time range select in historical to modify end time

parent da52d20d
Pipeline #74536 passed with stages
in 1 minute and 36 seconds
......@@ -27,12 +27,15 @@ body {
}
.dashboard {
background-image: linear-gradient(to bottom, #d5d4d0 0%, #d5d4d0 1%, #eeeeec 31%, #efeeec 75%, #e9e9e7 100%);
//background-image: linear-gradient(to bottom, #d5d4d0 0%, #d5d4d0 1%, #eeeeec 31%, #efeeec 75%, #e9e9e7 100%);
background-image: url("https://ldas-jobs.ligo.caltech.edu/~channa/bnslight.jpg");
background-size: cover;
font-family: 'Nunito', sans-serif;
}
.dashboard .chart-wrapper {
background: #f5f6fa;
//background: #f5f6fa;
background: rgba(236, 240, 241, 0.5);
box-shadow: 0px 1px 2px rgba(44, 62, 80, 0.5);
border: 1px solid #e2e2e2;
border-radius: 3px;
......@@ -63,6 +66,11 @@ body {
.navbar {
min-height: 20px;
max-height: 50px;
background: rgba(236, 240, 241, 0.9);
}
.btn {
background: rgba(236, 240, 241, 0.9);
}
.scrollable {
......@@ -78,6 +86,10 @@ body {
justify-content: left;
}
.fas, .nav-clock, .nav-link {
color: #495057;
}
.unstyled-button{
border: none;
padding: 0;
......
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark py-0">
<nav class="navbar fixed-top navbar-expand-lg py-0">
<!-- add logo/title -->
% if 'image' in dashboard_config:
......@@ -23,20 +23,20 @@
<!-- lock/unlock -->
<span v-if="analysis" title="Unlock Graph Layout">
<b-button class="ml-1 mr-1" size="sm" :pressed.sync="analysis">
<i class="fas fa-lock" style="color:white"></i>
<b-button class="ml-1 mr-1 border rounded border-secondary" size="sm" variant="light" :pressed.sync="analysis">
<i class="fas fa-lock"></i>
</b-button>
</span>
<span v-else title="Lock Graph Layout">
<b-button class="ml-1 mr-1" size="sm" :pressed.sync="analysis">
<i class="fas fa-unlock" style="color:white"></i>
<b-button class="ml-1 mr-1 border rounded border-secondary" size="sm" variant="light" :pressed.sync="analysis">
<i class="fas fa-unlock"></i>
</b-button>
</span>
<!-- plot menu -->
<b-dropdown id="dropdown-left" size="sm" class="mx-1">
<b-dropdown id="dropdown-left" size="sm" class="mx-1 border rounded border-secondary" variant="light">
<template slot="button-content">
<i class="fas fa-chart-line" style="color:white"></i>
<i class="fas fa-chart-line"></i>
</template>
% for i, plot in enumerate(plots):
<b-dropdown-item
......@@ -54,21 +54,21 @@
</b-dropdown>
<!-- time selection -->
<b-button class="mx-1" size="sm" v-on:click="decreaseTime">
<i class="fas fa-angle-left" style="color:white"></i>
<b-button class="mx-1 border rounded border-secondary" size="sm" variant="light" v-on:click="decreaseTime">
<i class="fas fa-angle-left"></i>
</b-button>
<div>
<b-form-select size="sm" v-model="form.lookback" :options="options"></b-form-select>
<b-form-select class="border rounded border-secondary" size="sm" v-model="form.lookback" :options="options"></b-form-select>
</div>
<b-button class="mx-1" size="sm" v-on:click="increaseTime">
<i class="fas fa-angle-right" style="color:white"></i>
<b-button class="mx-1 border rounded border-secondary" size="sm" variant="light" v-on:click="increaseTime">
<i class="fas fa-angle-right"></i>
</b-button>
<!-- online/historical options form -->
<b-nav-form id="nav-form" class="ml-1 mr-3">
<b-dropdown id="dropdown-form" size="sm" ref="dropdown">
<b-dropdown id="dropdown-form" class="border rounded border-secondary" size="sm" ref="dropdown" variant="light">
<template slot="button-content">
<i class="fas fa-history" style="color:white"></i>
<i class="fas fa-history"></i>
</template>
<span v-if="form.type == 'online'" title="Online options">
<b-form-group id="input-group-1" class="my-2 mx-2" label="Lookback [s]" label-for="dropdown-lookback">
......@@ -125,8 +125,8 @@
v-model="form.type"
:options="timeOptions"
buttons
button-variant="outline-secondary"
class="mx-1"
button-variant="light"
class="mx-1 border rounded border-secondary"
></b-form-radio-group>
</b-form-group>
......@@ -135,7 +135,7 @@
</b-form>
<!-- add clock to right edge -->
<a href="#"><div id="clock" style="color: grey"></div></a>
<a class="nav-clock" href="#"><div id="clock"></div></a>
</b-collapse>
</nav>
......@@ -40,8 +40,8 @@
responsive: true,
modalShow: false,
timeOptions: [
{ value: 'historical', html: '<i class="fa fa-hourglass-half" style="color:white"></i>' },
{ value: 'online', html: '<i class="fa fa-step-forward" style="color:white"></i>' },
{ value: 'historical', html: '<i class="fas fa-hourglass-half"></i>' },
{ value: 'online', html: '<i class="fas fa-step-forward"></i>' },
],
form: {
lookback: {{ lookback }},
......@@ -50,7 +50,7 @@
end: {{ stop }},
type: '{{ query_type }}'
},
selected: 600,
selected: {{ lookback }},
options: [
{ value: 30, text: '30 s' },
{ value: 60, text: '1 min' },
......@@ -80,24 +80,32 @@
this.options.splice(insertIdx, 0, {value: this.form.lookback, text: text});
}
},
watch: {
"form.lookback": function() {
if (this.form.type == 'historical') {
this.form.end = this.form.start + this.form.lookback;
this.selected = this.form.lookback;
}
},
},
methods: {
increaseTime: function() {
if (this.selected == 'custom') {
this.selected = this.prevSelected;
}
idx = this.options.map(function(e) { return e.value; }).indexOf(this.selected);
idx = Math.min(idx + 1, this.options.length - 1);
this.selected = this.options[idx].value;
this.form.lookback = this.selected;
if (this.form.type == 'historical') {
this.form.end = this.form.start + this.selected;
}
},
decreaseTime: function() {
if (this.selected == 'custom') {
this.selected = this.prevSelected;
}
idx = this.options.map(function(e) { return e.value; }).indexOf(this.selected);
idx = Math.max(idx - 1, 0);
this.selected = this.options[idx].value;
this.form.lookback = this.selected;
if (this.form.type == 'historical') {
this.form.end = this.form.start + this.selected;
}
},
resizeEvent: function() {
window.addEventListener('selectstart', disableSelect);
......
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