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>
|
||||
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 {
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
|
|
@ -22,9 +23,111 @@ you're in a hurry or lost or you just need to Make It Work©
|
|||
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 {
|
||||
animation: fadein 0.4s;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
margin: $wallet-tile-spacing auto;
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -6,122 +6,45 @@ description: pages.wallets.description
|
|||
|
||||
{% 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">
|
||||
|
||||
<section class="section">
|
||||
<div class="section__content">
|
||||
<h3>{% t pages.wallets.wallets-desktop-header %}</h3>
|
||||
<p>{% t pages.wallets.wallets-desktop-subtitle %}</p>
|
||||
<ul class="nav2 nav-pills bottom-space">
|
||||
<li class="active"><a data-toggle="pill" href="#windows">Windows</a></li>
|
||||
<li><a data-toggle="pill" href="#osx">OSX</a></li>
|
||||
<li><a data-toggle="pill" href="#linux">Linux</a></li>
|
||||
<li><a data-toggle="pill" href="#ppa">PPA</a></li>
|
||||
<ul id="wallet-os-tabs" class="nav2 nav-pills bottom-space">
|
||||
{% for wallet-os in desktop-os-collection %}
|
||||
<li {%if forloop.first == true %}class="active"{% endif %}><a data-toggle="pill" href="#{{wallet-os.name}}">
|
||||
{% case wallet-os.name %}
|
||||
{% when 'win32' %}
|
||||
Windows
|
||||
{% when 'win64' %}
|
||||
Windows
|
||||
{% when 'osx' %}
|
||||
OSX
|
||||
{% when 'linux' %}
|
||||
Linux
|
||||
{% when 'ppa' %}
|
||||
PPA
|
||||
{% else %}
|
||||
Other OS
|
||||
{% endcase %}
|
||||
</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
<div id="windows" class="tab-pane fade in active">
|
||||
<div class="row">
|
||||
<div class="col-xs-3">
|
||||
<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>
|
||||
{% for wallet-os in desktop-os-collection %}
|
||||
{% include wallet-tile.html %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -129,63 +52,25 @@ description: pages.wallets.description
|
|||
<div class="section__content">
|
||||
<h3>{% t pages.wallets.wallets-mobile-header %}</h3>
|
||||
<p>{% t pages.wallets.wallets-mobile-subtitle %}</p>
|
||||
<ul class="nav2 nav-pills">
|
||||
<li class="active"><a data-toggle="pill" href="#android">Android</a></li>
|
||||
<li><a data-toggle="pill" href="#ios">iOS</a></li>
|
||||
<ul id="wallet-mobile-os-tabs" class="nav2 nav-pills bottom-space">
|
||||
{% for wallet-os in mobile-os-collection %}
|
||||
<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>
|
||||
|
||||
<div class="tab-content">
|
||||
<div id="android" class="tab-pane fade in active">
|
||||
<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 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>
|
||||
{% for wallet-os in mobile-os-collection %}
|
||||
{% include wallet-tile.html %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -194,29 +79,17 @@ description: pages.wallets.description
|
|||
<h3>{% t pages.wallets.wallets-hardware-header %}</h3>
|
||||
<p>{% t pages.wallets.wallets-hardware-subtitle %}</p>
|
||||
<div class="row">
|
||||
<div class="col-xs-3">
|
||||
<div class="wallet-tile">
|
||||
<h4 class="text-center">Trezor</h4>
|
||||
</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>
|
||||
{% for wallet-os in hardware-wallets %}
|
||||
{% include wallet-tile.html %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="section__content">
|
||||
<h3>{% t pages.wallets.wallets-paper-header %}</h3>
|
||||
<p>{% t pages.wallets.wallets-paper-subtitle %}</p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -226,5 +99,4 @@ description: pages.wallets.description
|
|||
<p>{% t pages.wallets.wallets-security-subtitle %}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue