mirror of
https://github.com/seigler/dash-website
synced 2025-07-27 07:16:10 +00:00
(Update) Layout: Spacing Home (#10)
* (Update) Logo-collection: Adjust spacing / add maxheight / use BEM * (Update) Home: Adjust spacing between h1 + slogan / Adjust space between image at the bottom * (Fix) Home: Replace secure icon with correctly retraced one * [Chore] Layout: Whitespace / unused inline javascript * (Update) Home: More Spacing * (Fix) Currency: execute js onload * (Update) Layout: Add class for latest news section
This commit is contained in:
0xfff
Perry Woodin
parent
29290b301f
commit
2cde4f02dd
6 changed files with 134 additions and 156 deletions
|
|
@ -9,9 +9,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="{{ base }}/assets/img/favicon/favicon-16x16.png">
|
||||
|
||||
<meta name="msapplication-TileColor" content="#ffffff">
|
||||
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="{{ base }}/assets/css/style.css">
|
||||
|
|
@ -39,51 +37,17 @@
|
|||
<script src="{{ base }}/assets/js/moment.min.js"></script>
|
||||
<script src="{{ base }}/assets/js/full-menu.js"></script>
|
||||
|
||||
<script>
|
||||
function formatNumber (num) {
|
||||
return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
|
||||
}
|
||||
|
||||
function formatCurrency (num,decimal) {
|
||||
var _decimal;
|
||||
_decimal = typeof decimal !== "undefined" ? decimal : 2;
|
||||
return num.toFixed(_decimal).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
|
||||
}
|
||||
|
||||
function windowPopup(url, width, height) {
|
||||
// Calculate the position of the popup so
|
||||
// it’s centered on the screen.
|
||||
var left = (screen.width / 2) - (width / 2),
|
||||
top = (screen.height / 2) - (height / 2);
|
||||
|
||||
window.open(
|
||||
url,
|
||||
"",
|
||||
"menubar=no,toolbar=no,resizable=yes,scrollbars=yes,width=" + width + ",height=" + height + ",top=" + top + ",left=" + left
|
||||
);
|
||||
}
|
||||
|
||||
//jQuery
|
||||
$(".js-social-share").on("click", function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
windowPopup($(this).attr("href"), 500, 300);
|
||||
});
|
||||
|
||||
// Vanilla JavaScript
|
||||
var jsSocialShares = document.querySelectorAll(".js-social-share");
|
||||
if (jsSocialShares) {
|
||||
[].forEach.call(jsSocialShares, function(anchor) {
|
||||
anchor.addEventListener("click", function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
windowPopup(this.href, 500, 300);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
<script>
|
||||
function formatNumber (num) {
|
||||
return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
|
||||
}
|
||||
|
||||
function formatCurrency (num,decimal) {
|
||||
var _decimal;
|
||||
_decimal = typeof decimal !== "undefined" ? decimal : 2;
|
||||
return parseFloat(num).toFixed(_decimal).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
}
|
||||
> h1 {
|
||||
margin-top: 2.5em;
|
||||
margin-bottom: 8px; /*optical*/
|
||||
font-size: 56px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ $homeSectionPaddingTop: 40px;
|
|||
}
|
||||
|
||||
p {
|
||||
max-width: 60em;
|
||||
max-width: 50em;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
|
|
@ -137,6 +137,7 @@ $homeSectionPaddingTop: 40px;
|
|||
}
|
||||
|
||||
img {
|
||||
margin-top: 30px;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
|
|
@ -144,6 +145,12 @@ $homeSectionPaddingTop: 40px;
|
|||
color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
.home-latest-news {
|
||||
.btn-blue {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo-collection {
|
||||
|
|
@ -152,10 +159,15 @@ $homeSectionPaddingTop: 40px;
|
|||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> .logo {
|
||||
margin-bottom: 20px;
|
||||
|
||||
&__logo {
|
||||
flex: 1 1 auto;
|
||||
margin: 20px 10px;
|
||||
}
|
||||
&__image {
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.news-post {
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<svg width="101" height="86" viewBox="0 0 101 86" xmlns="http://www.w3.org/2000/svg"><title>private</title><g stroke="#1C75BC" stroke-width="3" fill="none" fill-rule="evenodd"><path d="M92.25 1.474l-82 82.333M33.083 74.64c41 12.168 65.5-25.333 65.5-29.833 0-2.775-7.667-13.167-15.112-19.51" stroke-linecap="round"/><path d="M24.305 69.695C11.085 60.975 1.75 48.975 1.75 44.14c0-4.833 30.404-48.264 73.368-25.465"/><path d="M47.05 59.822c.877.154 1.78.234 2.7.234 8.56 0 15.498-6.938 15.498-15.498" stroke-linecap="round"/><path d="M38.432 55.146c-2.593-2.77-4.18-6.493-4.18-10.587 0-8.56 6.94-15.5 15.498-15.5 4.163 0 7.942 1.642 10.727 4.313"/></g></svg>
|
||||
<svg width="68" height="99" viewBox="0 0 68 99" xmlns="http://www.w3.org/2000/svg"><title>secure</title><g stroke="#1C75BC" stroke-width="3" fill="none" fill-rule="evenodd"><path d="M8.325 39.06v-12c0-14.058 11.502-25.56 25.56-25.56h.136c13.96 0 25.38 11.42 25.38 25.38v12.18"/><path d="M15.295 39.002V27.277c0-10.22 8.363-18.584 18.584-18.584h.099c10.149 0 18.453 8.304 18.453 18.453v11.856"/><path d="M33.863 96.715c-17.8 0-32.363-14.563-32.363-32.363v-19.01c0-3.566 2.917-6.483 6.482-6.483h51.762c3.565 0 6.482 2.917 6.482 6.482v19.011c0 17.8-14.563 32.363-32.363 32.363z"/><path d="M36.99 67.6c1.972-1.107 3.321-3.125 3.321-5.548 0-3.57-2.886-6.417-6.456-6.417-3.57 0-6.46 2.917-6.46 6.487 0 2.427 1.34 4.365 3.316 5.471l-1.473 10.78h9.625L36.99 67.6z" stroke-linejoin="round"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 655 B After Width: | Height: | Size: 792 B |
|
|
@ -67,93 +67,94 @@ description: pages.currency.description
|
|||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$( document ).ready(function(){
|
||||
window.onload = function () {
|
||||
$( document ).ready(function(){
|
||||
|
||||
// Get the exchange data
|
||||
$.ajax({
|
||||
url: "{{ site.api }}/exchange/",
|
||||
error: function(jqXHR, textStatus, errorThrown) {
|
||||
console.log(jqXHR);
|
||||
console.log(textStatus);
|
||||
console.log('errorThrown:');
|
||||
}
|
||||
})
|
||||
.done(function(response){
|
||||
var exchanges = response;
|
||||
// Get the exchange data
|
||||
$.ajax({
|
||||
url: "{{ site.api }}/exchange/",
|
||||
error: function(jqXHR, textStatus, errorThrown) {
|
||||
console.log(jqXHR);
|
||||
console.log(textStatus);
|
||||
console.log('errorThrown:');
|
||||
}
|
||||
})
|
||||
.done(function(response){
|
||||
var exchanges = response;
|
||||
|
||||
exchanges.map(function(exchange){
|
||||
if(exchange){
|
||||
console.log('exchange',exchange);
|
||||
var name = exchange.exchange,
|
||||
url = exchange.url
|
||||
volume = "$" + formatCurrency(exchange.volume,0),
|
||||
price = "$" + formatCurrency(exchange.price),
|
||||
change = formatNumber(exchange.percent_change);
|
||||
exchanges.map(function(exchange){
|
||||
if(exchange){
|
||||
console.log('exchange',exchange);
|
||||
var name = exchange.exchange,
|
||||
url = exchange.url
|
||||
volume = "$" + formatCurrency(exchange.volume,0),
|
||||
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").append('<tr><td><a target="_blank" href="' + url + '">' + name + '</a></td><td>' + volume + '</td><td>' + price + '</td><td>' + change + '%</td></tr>');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// Get the current number of masternodes.
|
||||
$.ajax({
|
||||
url: "{{ site.api }}/masternodes/stats/"
|
||||
})
|
||||
.done(function(response){
|
||||
console.log('masternode stats', response.stats);
|
||||
var masternodes_count = formatNumber(response.stats['count']),
|
||||
masternodes_max = formatNumber(response.stats['max']);
|
||||
// Get the current number of masternodes.
|
||||
$.ajax({
|
||||
url: "{{ site.api }}/masternodes/stats/"
|
||||
})
|
||||
.done(function(response){
|
||||
console.log('masternode stats', response.stats);
|
||||
var masternodes_count = formatNumber(response.stats['count']),
|
||||
masternodes_max = formatNumber(response.stats['max']);
|
||||
|
||||
$("#masternodes_count").text(masternodes_count);
|
||||
$("#masternodes_max").text(masternodes_max);
|
||||
});
|
||||
$("#masternodes_count").text(masternodes_count);
|
||||
$("#masternodes_max").text(masternodes_max);
|
||||
});
|
||||
|
||||
|
||||
// Get the budget proposals
|
||||
$.ajax({
|
||||
url: "{{ site.api }}/budgets/"
|
||||
})
|
||||
.done(function(response){
|
||||
var proposals = response.proposals;
|
||||
// Get the budget proposals
|
||||
$.ajax({
|
||||
url: "{{ site.api }}/budgets/"
|
||||
})
|
||||
.done(function(response){
|
||||
var proposals = response.proposals;
|
||||
|
||||
proposals.map(function(proposal){
|
||||
var title = proposal.title ? proposal.title : proposal.name,
|
||||
url = proposal.dw_url,
|
||||
owner = proposal.owner_username,
|
||||
votes_yes = proposal.yes,
|
||||
votes_no = proposal.no,
|
||||
required_votes = proposal.remaining_yes_votes_until_funding,
|
||||
amount_monthly = formatCurrency(proposal.monthly_amount)
|
||||
will_be_funded = proposal.will_be_funded ? "yes" : "no";
|
||||
proposals.map(function(proposal){
|
||||
var title = proposal.title ? proposal.title : proposal.name,
|
||||
url = proposal.dw_url,
|
||||
owner = proposal.owner_username,
|
||||
votes_yes = proposal.yes,
|
||||
votes_no = proposal.no,
|
||||
required_votes = proposal.remaining_yes_votes_until_funding,
|
||||
amount_monthly = formatCurrency(proposal.monthly_amount)
|
||||
will_be_funded = proposal.will_be_funded ? "yes" : "no";
|
||||
|
||||
|
||||
|
||||
$("#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").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>');
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// Get the blockchain info
|
||||
$.ajax({
|
||||
url: "{{ site.api }}/chain/latestBlocks/"
|
||||
})
|
||||
.done(function(response){
|
||||
var blocks = response.blocks;
|
||||
|
||||
blocks.map(function(block){
|
||||
var height = block.height,
|
||||
age = moment.unix(block.time).format("LLL"),
|
||||
txs = block.txlength,
|
||||
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>');
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// Get the blockchain info
|
||||
$.ajax({
|
||||
url: "{{ site.api }}/chain/latestBlocks/"
|
||||
})
|
||||
.done(function(response){
|
||||
var blocks = response.blocks;
|
||||
|
||||
blocks.map(function(block){
|
||||
var height = block.height,
|
||||
age = moment.unix(block.time).format("LLL"),
|
||||
txs = block.txlength,
|
||||
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>');
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
</script>
|
||||
18
index.html
18
index.html
|
|
@ -61,17 +61,17 @@ description: pages.home.description
|
|||
</div>
|
||||
|
||||
<div class="logo-collection">
|
||||
<div class="logo">
|
||||
<img src="/assets/img/home/bolehvpn.png">
|
||||
<div class="logo-collection__logo">
|
||||
<img src="/assets/img/home/bolehvpn.png" class="logo-collection__image">
|
||||
</div>
|
||||
<div class="logo">
|
||||
<img src="/assets/img/home/node40.png">
|
||||
<div class="logo-collection__logo">
|
||||
<img src="/assets/img/home/node40.png" class="logo-collection__image">
|
||||
</div>
|
||||
<div class="logo">
|
||||
<img src="/assets/img/home/protonmail.png">
|
||||
<div class="logo-collection__logo">
|
||||
<img src="/assets/img/home/protonmail.png" class="logo-collection__image">
|
||||
</div>
|
||||
<div class="logo">
|
||||
<img src="/assets/img/home/qhoster.png">
|
||||
<div class="logo-collection__logo">
|
||||
<img src="/assets/img/home/qhoster.png" class="logo-collection__image">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -161,7 +161,7 @@ description: pages.home.description
|
|||
<!--
|
||||
LATEST NEWS
|
||||
-->
|
||||
<section>
|
||||
<section class="home-latest-news">
|
||||
<div class="content">
|
||||
<h2>{% t pages.home.news-heading %}</h2>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue