mirror of
https://github.com/seigler/dash-website
synced 2025-07-27 07:16:10 +00:00
WIP - wallets page draft: wallet tile templates styled and functioning with yml data
This commit is contained in:
Chuck Williams
parent
a9ea60c7e1
commit
ca201703b5
8 changed files with 444 additions and 180 deletions
245
_data/wallets-collection.yml
Normal file
245
_data/wallets-collection.yml
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -73,3 +73,5 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
28
_includes/wallet-tile.html
Normal file
28
_includes/wallet-tile.html
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
<div id="{{wallet-os.name}}" class="tab-pane fade in out {% if forloop.first == true %}active{% endif %}">
|
||||||
|
<div class="row">
|
||||||
|
{% for wallet in wallet-os.items %}
|
||||||
|
<div class="col-xs-12 col-sm-6 col-md-3">
|
||||||
|
<div class="wallet-tile" data-toggle="modal" data-target="#winDashCore">
|
||||||
|
<div class="thumbnail">
|
||||||
|
<div class="logo-container">
|
||||||
|
<img src="{{ wallet.logo_url }}"/>
|
||||||
|
</div>
|
||||||
|
<div class="caption">
|
||||||
|
<h4>{{ wallet.name }}</h4>
|
||||||
|
<div class="fine-print">
|
||||||
|
{{ wallet.description }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="wallet-links-container">
|
||||||
|
{% for link in wallet.links %}
|
||||||
|
<div class="link">
|
||||||
|
<a href="{{link.url}}" target="_blank">{{ link.label}} </a>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
BIN
assets/img/wallets/coinomi.ico
Normal file
BIN
assets/img/wallets/coinomi.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
BIN
assets/img/wallets/electrum_banner.png
Normal file
BIN
assets/img/wallets/electrum_banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
14
src/js/wallets.js
Normal file
14
src/js/wallets.js
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
/**
|
||||||
|
* Created by cwilliams on 1/9/17.
|
||||||
|
*/
|
||||||
|
|
||||||
|
;(function($) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
|
$('.wallet-tile a').click(function(event){
|
||||||
|
event.stopImmediatePropagation();
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
}(jQuery));
|
||||||
|
|
@ -5,6 +5,7 @@ you're in a hurry or lost or you just need to Make It Work©
|
||||||
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
.center-block {
|
.center-block {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -22,9 +23,111 @@ you're in a hurry or lost or you just need to Make It Work©
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$wallet-tile-min-height: 20em;
|
||||||
|
$wallet-tile-max-width: 25em;
|
||||||
|
$wallet-tile-logo-container-height: 5.5em;
|
||||||
|
$wallet-tile-logo-container-width: 5.5em;
|
||||||
|
$wallet-tile-spacing: .7em;
|
||||||
|
$wallet-tile-caption-fine-print-font-size: 0.6em;
|
||||||
|
$wallet-tile-caption-fine-print-height: $wallet-tile-caption-fine-print-font-size*8.5;
|
||||||
|
$wallet-tile-hover-background-base-color: lighten($color-blue-light,9);
|
||||||
|
|
||||||
.wallet-tile {
|
.wallet-tile {
|
||||||
|
animation: fadein 0.4s;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: center;
|
||||||
|
margin: $wallet-tile-spacing auto;
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
height: 150px;
|
min-height: $wallet-tile-min-height;
|
||||||
|
max-width: $wallet-tile-max-width;
|
||||||
|
overflow: hidden;
|
||||||
|
-o-transition:.25s;
|
||||||
|
-ms-transition:.25s;
|
||||||
|
-moz-transition:.25s;
|
||||||
|
-webkit-transition:.25s;
|
||||||
|
transition:.25s;
|
||||||
|
|
||||||
|
&:hover,&:focus {
|
||||||
|
background-color: $wallet-tile-hover-background-base-color;
|
||||||
|
border-color: $color-blue;
|
||||||
|
a {
|
||||||
|
color: darken($color-blue, 15);
|
||||||
|
}
|
||||||
|
& .thumbnail .caption .fine-print {
|
||||||
|
color: darken($color-gray-dark,15);
|
||||||
|
}
|
||||||
|
|
||||||
|
& .thumbnail .wallet-links-container .link {
|
||||||
|
border-top: solid 1px darken($color-gray,15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& .thumbnail{
|
||||||
|
& .logo-container {
|
||||||
|
margin: $wallet-tile-spacing auto;
|
||||||
|
padding: $wallet-tile-spacing*.3;
|
||||||
|
display: block;
|
||||||
|
max-width: $wallet-tile-logo-container-width;
|
||||||
|
max-height: $wallet-tile-logo-container-height;
|
||||||
|
overflow: hidden;
|
||||||
|
img {
|
||||||
|
max-height: 80px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& .caption {
|
||||||
|
line-height: 1 !important;
|
||||||
|
margin: $wallet-tile-spacing;
|
||||||
|
h4 {
|
||||||
|
padding: 0 0 $wallet-tile-spacing 0;
|
||||||
|
}
|
||||||
|
& .fine-print {
|
||||||
|
overflow: scroll;
|
||||||
|
min-height: $wallet-tile-caption-fine-print-height;
|
||||||
|
max-height: $wallet-tile-caption-fine-print-height*2;
|
||||||
|
margin: 0 0 $wallet-tile-spacing 0;
|
||||||
|
font-size: $wallet-tile-caption-fine-print-font-size;
|
||||||
|
line-height: 1.5 !important;
|
||||||
|
color: $color-gray-dark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& .wallet-links-container {
|
||||||
|
width: 100%;
|
||||||
|
& .link {
|
||||||
|
border-top: solid 1px $color-gray;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 90%;
|
||||||
|
display: block;
|
||||||
|
-o-transition:1.25s;
|
||||||
|
-ms-transition:1.25s;
|
||||||
|
-moz-transition:1.25s;
|
||||||
|
-webkit-transition:1.25s;
|
||||||
|
transition:1.25s;
|
||||||
|
&:hover, &:focus {
|
||||||
|
background-color: lighten($wallet-tile-hover-background-base-color,3);
|
||||||
|
border-color: white;
|
||||||
|
}
|
||||||
|
& a {
|
||||||
|
display: block;
|
||||||
|
margin: 0;
|
||||||
|
padding: $wallet-tile-spacing*.3;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
-o-transition:.5s;
|
||||||
|
-ms-transition:.5s;
|
||||||
|
-moz-transition:.5s;
|
||||||
|
-webkit-transition:.5s;
|
||||||
|
transition:.5s;
|
||||||
|
&:hover, &:focus {
|
||||||
|
@include gradient-horizontal-three-colors($start-color: $wallet-tile-hover-background-base-color,$mid-color: lighten($wallet-tile-hover-background-base-color,9),$end-color:$wallet-tile-hover-background-base-color );
|
||||||
|
-o-transition:.5s;
|
||||||
|
-ms-transition:.5s;
|
||||||
|
-moz-transition:.5s;
|
||||||
|
-webkit-transition:.5s;
|
||||||
|
transition:.5s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
img.staff {
|
img.staff {
|
||||||
|
|
|
||||||
|
|
@ -6,122 +6,45 @@ description: pages.wallets.description
|
||||||
|
|
||||||
{% include hero/wallets.html %}
|
{% include hero/wallets.html %}
|
||||||
|
|
||||||
|
{% include modals/win-core.html %}
|
||||||
|
|
||||||
|
{% assign desktop-os-collection = site.data.wallets-collection | where:"type","desktop" | group_by:"os" %}
|
||||||
|
{% assign mobile-os-collection = site.data.wallets-collection | where:"type","mobile" | group_by:"os" %}
|
||||||
|
{% assign hardware-wallets = site.data.wallets-collection | where:"type","hardware" %}
|
||||||
|
{% assign paper-wallets = site.data.wallets-collection | where:"type","paper" %}
|
||||||
|
{% assign security-wallets = site.data.wallets-collection | where:"type","security" %}
|
||||||
|
|
||||||
<div class="page page--wallets">
|
<div class="page page--wallets">
|
||||||
|
|
||||||
<section class="section">
|
<section class="section">
|
||||||
<div class="section__content">
|
<div class="section__content">
|
||||||
<h3>{% t pages.wallets.wallets-desktop-header %}</h3>
|
<h3>{% t pages.wallets.wallets-desktop-header %}</h3>
|
||||||
<p>{% t pages.wallets.wallets-desktop-subtitle %}</p>
|
<p>{% t pages.wallets.wallets-desktop-subtitle %}</p>
|
||||||
<ul class="nav2 nav-pills bottom-space">
|
<ul id="wallet-os-tabs" class="nav2 nav-pills bottom-space">
|
||||||
<li class="active"><a data-toggle="pill" href="#windows">Windows</a></li>
|
{% for wallet-os in desktop-os-collection %}
|
||||||
<li><a data-toggle="pill" href="#osx">OSX</a></li>
|
<li {%if forloop.first == true %}class="active"{% endif %}><a data-toggle="pill" href="#{{wallet-os.name}}">
|
||||||
<li><a data-toggle="pill" href="#linux">Linux</a></li>
|
{% case wallet-os.name %}
|
||||||
<li><a data-toggle="pill" href="#ppa">PPA</a></li>
|
{% when 'win32' %}
|
||||||
|
Windows
|
||||||
|
{% when 'win64' %}
|
||||||
|
Windows
|
||||||
|
{% when 'osx' %}
|
||||||
|
OSX
|
||||||
|
{% when 'linux' %}
|
||||||
|
Linux
|
||||||
|
{% when 'ppa' %}
|
||||||
|
PPA
|
||||||
|
{% else %}
|
||||||
|
Other OS
|
||||||
|
{% endcase %}
|
||||||
|
</a></li>
|
||||||
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<div class="tab-content">
|
<div class="tab-content">
|
||||||
<div id="windows" class="tab-pane fade in active">
|
{% for wallet-os in desktop-os-collection %}
|
||||||
<div class="row">
|
{% include wallet-tile.html %}
|
||||||
<div class="col-xs-3">
|
{% endfor %}
|
||||||
<div class="wallet-tile">
|
|
||||||
<h4 class="text-center">Dash Core</h4>
|
|
||||||
<button type="button" class="btn center-block" data-toggle="modal" data-target="#winDashCore">Open</button>
|
|
||||||
{% include modals/win-core.html %}
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-3">
|
|
||||||
<div class="wallet-tile">
|
|
||||||
<h4 class="text-center">Dash Electrum</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-3">
|
|
||||||
<div class="wallet-tile">
|
|
||||||
<h4 class="text-center">Jaxx</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-3">
|
|
||||||
<div class="wallet-tile">
|
|
||||||
<h4 class="text-center">Exodus</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="osx" class="tab-pane fade">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-xs-3">
|
|
||||||
<div class="wallet-tile">
|
|
||||||
<h4 class="text-center">Dash Core</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-3">
|
|
||||||
<div class="wallet-tile">
|
|
||||||
<h4 class="text-center">Dash Electrum</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-3">
|
|
||||||
<div class="wallet-tile">
|
|
||||||
<h4 class="text-center">Jaxx</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-3">
|
|
||||||
<div class="wallet-tile">
|
|
||||||
<h4 class="text-center">Exodus</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="linux" class="tab-pane fade">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-xs-3">
|
|
||||||
<div class="wallet-tile">
|
|
||||||
<h4 class="text-center">Dash Core</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-3">
|
|
||||||
<div class="wallet-tile">
|
|
||||||
<h4 class="text-center">Dash Electrum</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-3">
|
|
||||||
<div class="wallet-tile">
|
|
||||||
<h4 class="text-center">Jaxx</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-3">
|
|
||||||
<div class="wallet-tile">
|
|
||||||
<h4 class="text-center">Exodus</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="ppa" class="tab-pane fade">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-xs-3">
|
|
||||||
<div class="wallet-tile">
|
|
||||||
<h4 class="text-center">Dash Core</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-3">
|
|
||||||
<div class="wallet-tile">
|
|
||||||
<h4 class="text-center"> Dash Electrum</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-3">
|
|
||||||
<div class="wallet-tile">
|
|
||||||
<h4 class="text-center">Jaxx</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-3">
|
|
||||||
<div class="wallet-tile">
|
|
||||||
<h4 class="text-center">Exodus</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
@ -129,63 +52,25 @@ description: pages.wallets.description
|
||||||
<div class="section__content">
|
<div class="section__content">
|
||||||
<h3>{% t pages.wallets.wallets-mobile-header %}</h3>
|
<h3>{% t pages.wallets.wallets-mobile-header %}</h3>
|
||||||
<p>{% t pages.wallets.wallets-mobile-subtitle %}</p>
|
<p>{% t pages.wallets.wallets-mobile-subtitle %}</p>
|
||||||
<ul class="nav2 nav-pills">
|
<ul id="wallet-mobile-os-tabs" class="nav2 nav-pills bottom-space">
|
||||||
<li class="active"><a data-toggle="pill" href="#android">Android</a></li>
|
{% for wallet-os in mobile-os-collection %}
|
||||||
<li><a data-toggle="pill" href="#ios">iOS</a></li>
|
<li {%if forloop.first == true %}class="active"{% endif %}><a data-toggle="pill" href="#{{wallet-os.name}}">
|
||||||
|
{% case wallet-os.name %}
|
||||||
|
{% when 'android' %}
|
||||||
|
Android
|
||||||
|
{% when 'ios' %}
|
||||||
|
iOS
|
||||||
|
{% else %}
|
||||||
|
Other Mobile OS
|
||||||
|
{% endcase %}
|
||||||
|
</a></li>
|
||||||
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<div class="tab-content">
|
<div class="tab-content">
|
||||||
<div id="android" class="tab-pane fade in active">
|
{% for wallet-os in mobile-os-collection %}
|
||||||
<div class="row">
|
{% include wallet-tile.html %}
|
||||||
<div class="col-xs-3">
|
{% endfor %}
|
||||||
<div class="wallet-tile">
|
|
||||||
<h4 class="text-center">Dash Core</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-3">
|
|
||||||
<div class="wallet-tile">
|
|
||||||
<h4 class="text-center">Coinomi</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-3">
|
|
||||||
<div class="wallet-tile">
|
|
||||||
<h4 class="text-center">Jaxx</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-3">
|
|
||||||
<div class="wallet-tile">
|
|
||||||
<h4 class="text-center">Exodus</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="ios" class="tab-pane fade">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-xs-3">
|
|
||||||
<div class="wallet-tile">
|
|
||||||
<h4 class="text-center">Dash Core</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-3">
|
|
||||||
<div class="wallet-tile">
|
|
||||||
<h4 class="text-center">Coinomi</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-3">
|
|
||||||
<div class="wallet-tile">
|
|
||||||
<h4 class="text-center">Jaxx</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-3">
|
|
||||||
<div class="wallet-tile">
|
|
||||||
<h4 class="text-center">Exodus</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
@ -194,29 +79,17 @@ description: pages.wallets.description
|
||||||
<h3>{% t pages.wallets.wallets-hardware-header %}</h3>
|
<h3>{% t pages.wallets.wallets-hardware-header %}</h3>
|
||||||
<p>{% t pages.wallets.wallets-hardware-subtitle %}</p>
|
<p>{% t pages.wallets.wallets-hardware-subtitle %}</p>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-xs-3">
|
{% for wallet-os in hardware-wallets %}
|
||||||
<div class="wallet-tile">
|
{% include wallet-tile.html %}
|
||||||
<h4 class="text-center">Trezor</h4>
|
{% endfor %}
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-3">
|
|
||||||
<div class="wallet-tile">
|
|
||||||
<h4 class="text-center">KeepKey</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-3">
|
|
||||||
<div class="wallet-tile">
|
|
||||||
<h4 class="text-center">Ledger</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="section">
|
<section class="section">
|
||||||
<div class="section__content">
|
<div class="section__content">
|
||||||
<h3>{% t pages.wallets.wallets-paper-header %}</h3>
|
<h3>{% t pages.wallets.wallets-paper-header %}</h3>
|
||||||
<p>{% t pages.wallets.wallets-paper-subtitle %}</p>
|
<p>{% t pages.wallets.wallets-paper-subtitle %}</p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
@ -226,5 +99,4 @@ description: pages.wallets.description
|
||||||
<p>{% t pages.wallets.wallets-security-subtitle %}</p>
|
<p>{% t pages.wallets.wallets-security-subtitle %}</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue