Commit 00cc4c13 authored by Daniel Edgecumbe's avatar Daniel Edgecumbe

frontend: Various style tweaks, move uptime into dashboard

parent 509b33bb
Pipeline #303 passed with stages
in 28 seconds
......@@ -73,7 +73,6 @@ along with bitcoin-top. If not, see <http://www.gnu.org/licenses/>.
body {
margin: 0; padding: 0; overflow: hidden;
/* background-color: yellow; */
}
* {
font-family: Lato, monospace;
......@@ -93,7 +92,7 @@ div#app {
}
div#app.nav_hidden {
grid-template-columns: 6rem 1fr;
grid-template-columns: 5rem 1fr;
}
div#leftcol {
......@@ -112,15 +111,11 @@ div#leftcol.nav_hidden * {
}
img#hamburger {
display: block;
width: 4rem;
width: 3rem;
filter: invert(1);
}
img#hamburger.nav_hidden {
margin-top: 2rem;
margin-left: 1rem;
}
img#hamburger.nav_shown {
margin-top: 1rem;
img#hamburger {
margin-top: 1.2rem;
margin-left: 1rem;
}
img#hamburger:hover {
......@@ -139,9 +134,9 @@ div#leftcol span {
text-align: left;
margin: 0 auto;
font-size: 1.4rem;
line-height: 3.5rem;
padding-left: 2rem;
font-size: 1.2rem;
line-height: 3rem;
padding-left: 1.5rem;
/* css mate. */
-webkit-user-select: none;
......@@ -170,7 +165,6 @@ div#leftcol a:active {
font-weight: bold;
}
div#leftcol img { display: block; margin: 2px auto; }
div#leftcol { text-align: center; }
div#rightcol {
background-color: var(--neutral-6);
......@@ -181,141 +175,42 @@ div#rightcol.staging { background-color: var(--red-6); }
img#gplv3img { filter: brightness(100); }
div#tab-chooser {
margin-bottom: 1rem;
}
div#range-chooser {
display: grid;
grid-gap: 0.2rem;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
margin-bottom: 1rem;
}
div#data-chooser {
display: grid;
grid-gap: 0.2rem;
grid-template-columns: 1fr 1fr 1fr;
margin-bottom: 1rem;
}
span.range_button, span.data_button { display: block; width: 100%; }
div#header {
width: 100%;
display: grid;
grid-gap: 0.2rem;
grid-template-columns: 1fr 4fr;
margin: 1rem 0;
grid-template-columns: 4.5rem 1fr;
margin-bottom: 0.5rem;
}
div#header.disconnected { background-color: var(--red-3); }
div#header h1 {
text-align: center;
font-size: 3rem;
line-height: 3.5rem;
}
div#header h2 {
text-align: center;
font-size: 2rem;
line-height: 2.5rem;
font-size: 3.5rem;
line-height: 5rem;
}
/*
div#header img { display: block; height: 6rem; margin: 0 auto; }
div#header img.img-test { filter: hue-rotate(140deg); }
div#header img.img-regtest { filter: hue-rotate(330deg); }
*/
div.invisible { display: none; }
div.section { margin-bottom: 1rem; }
div.section h2 { font-size: 2rem; line-height: 3rem; }
/* this nonsense is because c3js is seemingly completely incapable
of dealing with units other than px in a sane fashion */
div.c3chart {
height: 30rem;
}
/*
div.c3chart {
height: 200px;
width: 200px;
margin: 0 auto;
}
@media all and (min-height: 400px) {
div.c3chart { height: 350px; }
}
@media all and (min-height: 600px) {
div.c3chart { height: 550px; }
}
@media all and (min-height: 800px) {
div.c3chart { height: 750px; }
}
@media all and (min-height: 1000px) {
div.c3chart { height: 950px; }
}
@media all and (min-height: 1200px) {
div.c3chart { height: 1150px; }
}
@media all and (min-height: 1400px) {
div.c3chart { height: 1350px; }
}
@media all and (min-height: 1600px) {
div.c3chart { height: 1550px; }
}
@media all and (min-height: 1800px) {
div.c3chart { height: 1750px; }
}
@media all and (min-height: 2000px) {
div.c3chart { height: 1950px; }
}
@media all and (min-height: 2200px) {
div.c3chart { height: 2150px; }
}
@media all and (min-width: 800px) {
div.c3chart { width: 550px; }
}
@media all and (min-width: 1000px) {
div.c3chart { width: 700px; }
}
@media all and (min-width: 1200px) {
div.c3chart { width: 850px; }
}
@media all and (min-width: 1400px) {
div.c3chart { width: 1000px; }
}
@media all and (min-width: 1600px) {
div.c3chart { width: 1150px; }
}
@media all and (min-width: 1800px) {
div.c3chart { width: 1300px; }
}
@media all and (min-width: 2000px) {
div.c3chart { width: 1450px; }
}
@media all and (min-width: 2200px) {
div.c3chart { width: 1600px; }
}
@media all and (min-width: 2400px) {
div.c3chart { width: 1750px; }
}
@media all and (min-width: 2800px) {
div.c3chart { width: 2050px; }
}
@media all and (min-width: 3200px) {
div.c3chart { width: 2350px; }
}
@media all and (min-width: 3600px) {
div.c3chart { width: 2650px; }
}
@media all and (min-width: 4000px) {
div.c3chart { width: 2950px; }
}
@media all and (min-width: 4400px) {
div.c3chart { width: 3250px; }
}
*/
div.tab { width: 100%; }
div#contact { margin-top: 1rem; }
div#donations img { width: 5rem; }
div#donations a { font-family: monospace; font-size: 1rem; }
......@@ -329,10 +224,12 @@ td { background-color: var(--neutral-6); }
div#tab-chooser span.selected { background: var(--primary-1); }
div#tab-chooser span:hover { background: var(--primary-3); }
div#tab-chooser span.selected, div#range-chooser span.selected, div#data-chooser span.selected { font-weight: bold; }
div#range-chooser span, div#data-chooser span {
text-align: center;
font-size: 1rem;
line-height: 2rem;
font-size: 1.1rem;
line-height: 2.5rem;
padding: 0;
}
div#range-chooser span.selected { background: var(--green-1); }
......@@ -355,7 +252,7 @@ div.dashboard-block {
grid-template-areas:
"hght hash hash hash"
"chn age down upld"
"peer peer hrte hrte"
"uptm peer hrte hrte"
"warn warn warn warn"
"chrt chrt chrt chrt";
}
......@@ -403,6 +300,10 @@ div.dashboard-block div.dashboard-block-upload {
font-size: 2rem;
background-color: var(--red-5);
}
div.dashboard-block div.dashboard-block-uptime {
grid-area: uptm;
font-size: 2rem;
}
div.dashboard-block div.dashboard-block-peers {
grid-area: peer;
font-size: 2rem;
......
......@@ -65,12 +65,6 @@ along with bitcoin-top. If not, see <http://www.gnu.org/licenses/>.
<h1>
bitcoin-top
</h1>
<h2 v-if="connected">
up: {{ uptime | timeInterval }}
</h2>
<h2 v-if="!connected">
disconnected
</h2>
</div>
</div>
......@@ -152,6 +146,11 @@ along with bitcoin-top. If not, see <http://www.gnu.org/licenses/>.
<span v-if="nettotals">{{ (nettotals.totalbytessent / 1024 / 1024).toFixed(0) }}MiB</span>
<span v-else>...</span>
</div>
<div class="dashboard-block-uptime dashboard-item">
<span class="dashboard-item-header">uptime</span>
<span v-if="uptime">{{ uptime | timeInterval }}</span>
<span v-else>...</span>
</div>
<div class="dashboard-block-peers dashboard-item">
<span class="dashboard-item-header">peers</span>
<span v-if="peers">{{ peers.length }}</span>
......
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