Commit 97334033 authored by Daniel Edgecumbe's avatar Daniel Edgecumbe

Put mempool chart on dashboard; various styling tweaks

parent 9d7eb3a5
Pipeline #300 passed with stages
in 27 seconds
......@@ -230,6 +230,10 @@ 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;
......@@ -308,10 +312,14 @@ div.c3chart {
@media all and (min-width: 4400px) {
div.c3chart { width: 3250px; }
}
*/
div.tab { width: 100%; height: 100%; }
div#donations img { width: 100px; }
div#donations img { width: 5rem; }
div#donations a { font-family: monospace; font-size: 1rem; }
div#contact a { font-family: monospace; font-size: 1rem; }
table { width: 100%; }
th, td { text-align: center; }
......@@ -321,6 +329,12 @@ td { border: 1px dotted lightgray; }
div#tab-chooser span.selected { background: var(--primary-1); }
div#tab-chooser span:hover { background: var(--primary-3); }
div#range-chooser span, div#data-chooser span {
text-align: center;
font-size: 1rem;
line-height: 2rem;
padding: 0;
}
div#range-chooser span.selected { background: var(--green-1); }
div#range-chooser span:hover { background: var(--green-3); }
......@@ -336,21 +350,21 @@ div#data-chooser span:hover { background: var(--red-3) }
div.dashboard-block {
display: grid;
grid-gap: 1rem;
margin: 2rem;
margin: 1rem;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-areas:
"hght hash hash hash"
"chn age down upld"
"peer peer hrte hrte"
"warn warn warn warn"
"chrt chrt chrt chrt";
}
div.dashboard-item {
text-align: center;
font-weight: bold;
color: var(--neutral-0);
background-color: var(--primary-5);
line-height: 4rem;
background-color: var(--neutral-5);
border-radius: 0.3rem;
overflow: hidden;
height: 6rem;
......@@ -358,6 +372,7 @@ div.dashboard-item {
div.dashboard-item span {
display: block;
line-height: 4rem;
}
div.dashboard-item span.dashboard-item-header {
font-size: 1rem;
......@@ -408,6 +423,10 @@ div.dashboard-block div.dashboard-block-mininginfo-warnings {
color: var(--neutral-6);
background-color: var(--red-3);
}
div.dashboard-block div.dashboard-mempool-chart {
grid-area: chrt;
height: 30rem;
}
div#txcont {
display: grid;
......
......@@ -85,7 +85,7 @@ along with bitcoin-top. If not, see <http://www.gnu.org/licenses/>.
<div
id="range-chooser"
v-if="tab === 'network-chart' || tab === 'mempool-chart'"
v-if="tab === 'network-chart' || tab === 'dashboard'"
>
<span
v-for="r in ranges"
......@@ -98,7 +98,7 @@ along with bitcoin-top. If not, see <http://www.gnu.org/licenses/>.
<div
id="data-chooser"
v-if="tab === 'mempool-chart'"
v-if="tab === 'dashboard'"
>
<span
v-for="d in datas"
......@@ -109,31 +109,15 @@ along with bitcoin-top. If not, see <http://www.gnu.org/licenses/>.
</span>
</div>
<div class="section" id="donations">
<h2>donations</h2>
<p>
<a href="bitcoin:3BYFucUnVNhZjUDf6tZweuZ5r9PPjPEcRv"><img src="./3BYFucUnVNhZjUDf6tZweuZ5r9PPjPEcRv.png"></img></a>
</p>
<p>
<a href="bitcoin:3BYFucUnVNhZjUDf6tZweuZ5r9PPjPEcRv">3BYFucUnVNhZjUDf6tZweuZ5r9PPjPEcRv</a>
</p>
</div>
<div class="section">
<h2>notes</h2>
<p>
sorry, it's really bad on mobile
</p>
</div>
<div class="section">
<h2>source</h2>
<a href="https://www.gnu.org/licenses/agpl-3.0.en.html"><img id="gplv3img" src="./agplv3-155x51.png"></img></a>
<a href="https://gitlab.electronrelocation.com/esotericnonsense/bitcoin-top">gitlab.electronrelocation.com</a>
</div>
<div class="section">
<h2>hello</h2>
<div class="section" id="contact">
<a href="https://gitlab.electronrelocation.com/esotericnonsense/bitcoin-top"><img id="gplv3img" src="./agplv3-155x51.png"></img></a>
<a href="https://electronrelocation.com">https://electronrelocation.com</a>
<a href="mailto:contact@electronrelocation.com">contact@electronrelocation.com</a>
</div>
<div class="section" id="donations">
<a href="bitcoin:3BYFucUnVNhZjUDf6tZweuZ5r9PPjPEcRv"><img src="./3BYFucUnVNhZjUDf6tZweuZ5r9PPjPEcRv.png"></img></a>
<a href="bitcoin:3BYFucUnVNhZjUDf6tZweuZ5r9PPjPEcRv">3BYFucUnVNhZjUDf6tZweuZ5r9PPjPEcRv</a>
</div>
</div> <!-- /leftcol -->
<div id="rightcol" :class="staging ? 'staging' : 'production'">
......@@ -186,8 +170,12 @@ along with bitcoin-top. If not, see <http://www.gnu.org/licenses/>.
<div v-if="mininginfo && mininginfo.warnings" class="dashboard-block-mininginfo-warnings dashboard-item">
{{ mininginfo.warnings }}
</div>
<div class="dashboard-mempool-chart dashboard-item">
<div id="mempoolchart" class="c3chart"></div>
</div>
</div>
</div>
<div id="tab-wallet" class="tab"
......@@ -250,14 +238,6 @@ along with bitcoin-top. If not, see <http://www.gnu.org/licenses/>.
</div>
<div id="tab-mempool-chart" class="tab"
:class="tab === 'mempool-chart' ? 'visible' : 'invisible'"
>
<div id="mempoolchart" class="c3chart"></div>
</div>
<div id="tab-mempool-table" class="tab"
:class="tab === 'mempool-table' ? 'visible' : 'invisible'"
>
......
......@@ -28,7 +28,6 @@ const TABS = [
["mempool-table", "Mempool table"],
["blocks", "Blocks"],
["peers", "Peers"],
["mempool-chart", "Mempool chart"],
["network-chart", "Network chart"],
["about", "About"],
];
......@@ -224,7 +223,7 @@ onload = function() {
setTimeout(BTCHART.resize, 500);
setTimeout(BTCHART.resize, 1000);
}
if (tab === 'mempool-chart') {
if (tab === 'dashboard') {
setTimeout(CHART.resize, 100);
setTimeout(CHART.resize, 500);
setTimeout(CHART.resize, 1000);
......
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