Commit 8ab166a0 authored by Daniel Edgecumbe's avatar Daniel Edgecumbe

Various tweaks to styling, headers etc on dashboard page

parent db211d70
Pipeline #295 passed with stages
in 28 seconds
......@@ -319,7 +319,7 @@ div#data-chooser span:hover { background: var(--red-3) }
div.dashboard-block {
display: grid;
grid-gap: 2rem;
grid-gap: 1rem;
margin: 2rem;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-areas:
......@@ -329,13 +329,23 @@ div.dashboard-block {
"warn warn warn warn"
}
div.dashboard-block div {
div.dashboard-item {
text-align: center;
font-weight: bold;
color: var(--neutral-0);
background-color: var(--neutral-5);
line-height: 6rem;
border-radius: 0.2rem;
line-height: 4rem;
border-radius: 0.3rem;
overflow: hidden;
}
div.dashboard-item span {
display: block;
}
div.dashboard-item span.dashboard-item-header {
font-size: 1rem;
line-height: 1rem;
margin-top: 1rem;
}
div.dashboard-block div.dashboard-block-hash {
......@@ -344,38 +354,38 @@ div.dashboard-block div.dashboard-block-hash {
}
div.dashboard-block div.dashboard-block-height {
grid-area: hght;
font-size: 3rem;
font-size: 2rem;
}
div.dashboard-block div.dashboard-block-age {
grid-area: age;
font-size: 3rem;
font-size: 2rem;
}
div.dashboard-block div.dashboard-block-download {
grid-area: down;
font-size: 3rem;
font-size: 2rem;
color: var(--green-2);
}
div.dashboard-block div.dashboard-block-upload {
grid-area: upld;
font-size: 3rem;
font-size: 2rem;
color: var(--red-2);
}
div.dashboard-block div.dashboard-block-peers {
grid-area: peer;
font-size: 3rem;
font-size: 2rem;
}
div.dashboard-block div.dashboard-block-mininginfo-hashrate {
grid-area: hrte;
font-size: 3rem;
font-size: 2rem;
}
div.dashboard-block div.dashboard-block-mininginfo-chain {
grid-area: chn;
font-size: 3rem;
font-size: 2rem;
}
div.dashboard-block div.dashboard-block-mininginfo-warnings {
grid-area: warn;
font-size: 2rem;
line-height: 4rem;
font-size: 1rem;
line-height: 2.5rem;
color: var(--neutral-6);
background-color: var(--red-3);
}
......
......@@ -141,35 +141,50 @@ along with bitcoin-top. If not, see <http://www.gnu.org/licenses/>.
>
<div class="dashboard-block">
<div class="dashboard-block-hash">
<div class="dashboard-block-hash dashboard-item">
<span class="dashboard-item-header">block hash</span>
<span v-if="chaininfo">{{ chaininfo.bestblockhash }}</span>
<span v-else>...</span>
</div>
<div class="dashboard-block-height">
<div class="dashboard-block-height dashboard-item">
<span class="dashboard-item-header">block height</span>
<span v-if="chaininfo && blocks[chaininfo.bestblockhash]">{{ blocks[chaininfo.bestblockhash].height }}</span>
<span v-else>...</span>
</div>
<div class="dashboard-block-age">
<div class="dashboard-block-age dashboard-item">
<span class="dashboard-item-header">block age</span>
<span v-if="chaininfo && blocks[chaininfo.bestblockhash]">{{ (now - blocks[chaininfo.bestblockhash].time) | timeInterval }}</span>
<span v-else>...</span>
</div>
<div class="dashboard-block-download">
<span v-if="nettotals">{{ (nettotals.totalbytesrecv / 1024 / 1024).toFixed(0) }}MiB D</span>
<div class="dashboard-block-download dashboard-item">
<span class="dashboard-item-header">downloaded</span>
<span v-if="nettotals">{{ (nettotals.totalbytesrecv / 1024 / 1024).toFixed(0) }}MiB</span>
<span v-else>...</span>
</div>
<div class="dashboard-block-upload">
<span v-if="nettotals">{{ (nettotals.totalbytessent / 1024 / 1024).toFixed(0) }}MiB U</span>
<div class="dashboard-block-upload dashboard-item">
<span class="dashboard-item-header">uploaded</span>
<span v-if="nettotals">{{ (nettotals.totalbytessent / 1024 / 1024).toFixed(0) }}MiB</span>
<span v-else>...</span>
</div>
<div class="dashboard-block-peers">
<span v-if="peers">{{ peers.length }} peer(s)</span>
<div class="dashboard-block-peers dashboard-item">
<span class="dashboard-item-header">peers</span>
<span v-if="peers">{{ peers.length }}</span>
<span v-else>...</span>
</div>
<div class="dashboard-block-mininginfo-hashrate dashboard-item">
<span class="dashboard-item-header">hashrate</span>
<span v-if="mininginfo">{{ (mininginfo.networkhashps/1000000000000).toFixed(0) }}TH/s</span>
<span v-else>...</span>
</div>
<div class="dashboard-block-mininginfo-chain dashboard-item">
<span class="dashboard-item-header">chain</span>
<span v-if="mininginfo">{{ mininginfo.chain }}</span>
<span v-else>...</span>
</div>
<div v-if="mininginfo.warnings" class="dashboard-block-mininginfo-warnings dashboard-item">
<span v-if="mininginfo">{{ mininginfo.warnings }}</span>
<span v-else>...</span>
</div>
<template v-if="mininginfo">
<div class="dashboard-block-mininginfo-hashrate">
{{ (mininginfo.networkhashps/1000000000000).toFixed(0) }}TH/s
</div>
<div class="dashboard-block-mininginfo-chain">
{{ mininginfo.chain }}
</div>
<div v-if="mininginfo.warnings" class="dashboard-block-mininginfo-warnings">
{{ mininginfo.warnings }}
</div>
</template>
</div>
</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