mirror of
https://github.com/seigler/dash-website
synced 2025-07-27 07:16:10 +00:00
Style currency page (#36)
* feat: basic table styles * feat: add data-attributes for table column names for responsive tables * feat: much better looking tables * feat: add separate sections, add IDs for fragment URL links * feat: responsive tables mixin, used on currency page * feat: link budget items, align tables
This commit is contained in:
Joshua Seigler
Perry Woodin
parent
b530cc7c47
commit
5ef3273826
5 changed files with 150 additions and 56 deletions
|
|
@ -13,13 +13,13 @@
|
|||
<div class="hero__content">
|
||||
<h1 class="hero__title">{% t pages.currency.hero-heading %}</h1>
|
||||
|
||||
<p class="hero__lead">Visualizer Goes Here</p>
|
||||
<!-- <p class="hero__lead">Visualizer Goes Here</p>-->
|
||||
|
||||
<div class="hero__buttons">
|
||||
<a href="#" class="btn-white-solid">{% t pages.currency.hero-markets-btn %}</a>
|
||||
<a href="#" class="btn-white-solid">{% t pages.currency.hero-governance-btn %}</a>
|
||||
<a href="#" class="btn-white-solid">{% t pages.currency.hero-network-btn %}</a>
|
||||
<a href="#" class="btn-white-solid">{% t pages.currency.hero-blockchain-btn %}</a>
|
||||
<a href="#section-markets" class="btn-white-solid">{% t pages.currency.hero-markets-btn %}</a>
|
||||
<a href="#section-governance" class="btn-white-solid">{% t pages.currency.hero-governance-btn %}</a>
|
||||
<a href="#section-network" class="btn-white-solid">{% t pages.currency.hero-network-btn %}</a>
|
||||
<a href="#section-blockchain" class="btn-white-solid">{% t pages.currency.hero-blockchain-btn %}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,63 +6,73 @@ description: pages.currency.description
|
|||
|
||||
{% include hero/currency.html %}
|
||||
|
||||
<div class="content">
|
||||
<div class="content page--currency">
|
||||
|
||||
<h2>{% t pages.currency.markets-heading %}</h2>
|
||||
<section id="section-exchanges">
|
||||
<h2>{% t pages.currency.markets-heading %}</h2>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Exchange</th>
|
||||
<th>Volume (24h)</th>
|
||||
<th>Price</th>
|
||||
<th>Volume (%)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="exchanges">
|
||||
<table id="exchanges">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Exchange</th>
|
||||
<th>Volume (24h)</th>
|
||||
<th>Price</th>
|
||||
<th>Volume (%)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<h2>{% t pages.currency.governance-heading %}</h2>
|
||||
<section id="section-governance">
|
||||
<h2>{% t pages.currency.governance-heading %}</h2>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Title</th>
|
||||
<th>Owner</th>
|
||||
<th>Votes (yes/no)</th>
|
||||
<th>Votes Required</th>
|
||||
<th>Monthly Amount</th>
|
||||
<th>Will be Funded</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="budgets">
|
||||
<table id="budgets">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Title</th>
|
||||
<th>Owner</th>
|
||||
<th>Votes (yes/no)</th>
|
||||
<th>Votes Required</th>
|
||||
<th>Monthly Amount</th>
|
||||
<th>Will be Funded</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<h2>{% t pages.currency.network-heading %}</h2>
|
||||
<section id="section-network">
|
||||
<h2>{% t pages.currency.network-heading %}</h2>
|
||||
|
||||
<div id="masternodes_count"></div>
|
||||
<div id="masternodes_max"></div>
|
||||
<p>
|
||||
Current masternodes: <span id="masternodes_count"></span><br>
|
||||
Maximum masternodes so far: <span id="masternodes_max"></span>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<h2>{% t pages.currency.blockchain-heading %}</h2>
|
||||
<section id="section-blockchain">
|
||||
<h2>{% t pages.currency.blockchain-heading %}</h2>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Height</th>
|
||||
<th>Age</th>
|
||||
<th>Transactions</th>
|
||||
<th>Value Out</th>
|
||||
<th>Difficulty</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="blocks">
|
||||
<table id="blocks">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Height</th>
|
||||
<th>Block Time</th>
|
||||
<th>Transactions</th>
|
||||
<th>Value Out</th>
|
||||
<th>Difficulty</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -91,8 +101,7 @@ description: pages.currency.description
|
|||
price = "$" + formatCurrency(exchange.price),
|
||||
change = formatNumber(exchange.percent_change);
|
||||
|
||||
|
||||
$("#exchanges").append('<tr><td><a target="_blank" href="' + url + '">' + name + '</a></td><td>' + volume + '</td><td>' + price + '</td><td>' + change + '%</td></tr>');
|
||||
$("#exchanges>tbody").append('<tr><td data-header="Exchange"><a target="_blank" href="' + url + '">' + name + '</a></td><td data-header="Volume (24h)">' + volume + '</td><td data-header="Price">' + price + '</td><td data-header="Volume (%)">' + change + '%</td></tr>');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -131,7 +140,7 @@ description: pages.currency.description
|
|||
|
||||
|
||||
|
||||
$("#budgets").append('<tr><td>' + title + '</td><td>' + owner + '</td><td>' + votes_yes + '/' + votes_no + '</td><td>' + required_votes + '</td><td>' + amount_monthly + '</td><td>' + will_be_funded + '</td></tr>');
|
||||
$("#budgets>tbody").append('<tr><td data-header="Title"><a href="' + url + '">' + title + '</a></td><td data-header="Owner">' + owner + '</td><td data-header="Votes (yes/no)">' + votes_yes + '/' + votes_no + '</td><td data-header="Votes Required">' + required_votes + '</td><td data-header="Monthly Amount">' + amount_monthly + '</td><td data-header="Will be Funded">' + will_be_funded + '</td></tr>');
|
||||
|
||||
});
|
||||
});
|
||||
|
|
@ -151,7 +160,7 @@ description: pages.currency.description
|
|||
out = block.cbvalue,
|
||||
difficulty = block.difficulty;
|
||||
|
||||
$("#blocks").append('<tr><td>' + height + '</td><td>' + age + '</td><td>' + txs + '</td><td>' + out + '</td><td>' + difficulty + '</td></tr>');
|
||||
$("#blocks>tbody").append('<tr><td data-header="Height">' + height + '</td><td data-header="Block Time">' + age + '</td><td data-header="Transactions">' + txs + '</td><td data-header="Value Out">' + out + '</td><td data-header="Difficulty">' + difficulty + '</td></tr>');
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
56
src/scss/_tables.scss
Normal file
56
src/scss/_tables.scss
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
table {
|
||||
margin: 1em 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 0.25em 0.5em;
|
||||
}
|
||||
|
||||
th {
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
tbody > tr {
|
||||
border-top: 1px solid rgba(black, 0.25);
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(black, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin table-compact-mixin {
|
||||
display: block;
|
||||
thead, tbody, tr, th, td:nth-child(n) {
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
thead > tr {
|
||||
position: fixed;
|
||||
right: 110vw;
|
||||
}
|
||||
|
||||
tbody > tr {
|
||||
border: none;
|
||||
}
|
||||
|
||||
td + td {
|
||||
border-top: 1px solid rgba(black, 0.25);
|
||||
}
|
||||
|
||||
td:first-child {
|
||||
margin: 20px 0 0;
|
||||
}
|
||||
|
||||
td::before {
|
||||
content: attr(data-header);
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
width: 11em;
|
||||
padding-right: 1em;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
|
@ -18,6 +18,7 @@
|
|||
@import "logo";
|
||||
@import "buttons";
|
||||
@import "forms";
|
||||
@import "tables";
|
||||
@import "footer";
|
||||
@import "page";
|
||||
@import "pagination";
|
||||
|
|
@ -26,7 +27,6 @@
|
|||
@import "postcontent";
|
||||
@import "flags";
|
||||
|
||||
|
||||
//stuff most pages need
|
||||
@import "overlay-menu";
|
||||
@import "video";
|
||||
|
|
@ -43,3 +43,4 @@
|
|||
@import "junk-drawer";
|
||||
@import "pages/styleguide";
|
||||
@import "code-highlight";
|
||||
@import "pages/currency";
|
||||
|
|
|
|||
28
src/scss/pages/_currency.scss
Normal file
28
src/scss/pages/_currency.scss
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
.page--currency > section {
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
.page--currency table#budgets {
|
||||
td, th {
|
||||
&:nth-child(3), &:nth-child(6) {
|
||||
text-align: center;
|
||||
}
|
||||
&:nth-child(4), &:nth-child(5) {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1199px) {
|
||||
@include table-compact-mixin;
|
||||
}
|
||||
}
|
||||
|
||||
.page--currency table#blocks {
|
||||
td, th {
|
||||
&:nth-child(3), &:nth-child(4), &:nth-child(5) {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
@media (max-width: 850px) {
|
||||
@include table-compact-mixin;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue