joshua/dash-website
1
0
Fork 0
mirror of https://github.com/seigler/dash-website synced 2025-07-26 23:06:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Wallets:

Browse source 
-- adds accessibility tags wallet tabs & panels
-- adds conditional modal treatment for "dash-core" vendor_id's
-- activates modal buttons
-- presentation / style cleanup on modals (incomplete)
-- wallet modal action buttons are now the first "link"
This commit is contained in:
Chuck Williams 2017-01-27 04:55:53 -07:00
parent 249c1cf709
commit f71fc75876
5 changed files with 376 additions and 320 deletions
Download patch file Download diff file Expand all files Collapse all files

12
_includes/modals/vendor-group-download-collection.html
View file

@ -1,7 +1,13 @@
<!-- Modal -->
{% for wallet in vendor-group.items %}
<div id="{{wallet.os}}-{{wallet.vendor_id}}-{{wallet.type_id}}-{{wallet.product_id}}-modal"
class="modal fade wallet-modal-container" role="dialog" tabindex="-1">
{% if wallet.vendor_id == 'dash_core' %}
class="modal fade wallet-modal-container dash-core"
{% else %}
class="modal fade wallet-modal-container"
{% endif %}
role="dialog" tabindex="-1">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content b-modal__content">
<div class="modal-header">
@ -64,8 +70,8 @@
</h5>
</div>
<div>
<button type="button" class="btn btn-default" data-dismiss="modal" aria-label="Download {{wallet.product_label}}"><span
aria-hidden="true">Download {{wallet.product_label}}</span></button>
<button type="button" class="btn btn-default" data-dismiss="modal" aria-label="{{wallet.links[0].label}}" data-url="{{wallet.links[0].url}}" ><span
aria-hidden="true">{{wallet.links[0].label}}: {{wallet.name}}</span></button>
</div>
</div>
</div>

4
_includes/wallet-tile-group-container.html
View file

@ -1,4 +1,6 @@
<div id="{{wallet-group.name}}" class="tab-pane fade in out {% if forloop.first == true %}active{% endif %}">
<div id="{{wallet-group.name}}"
role="tab-panel"
class="tab-pane fade in out {% if forloop.first == true %}active{% endif %}">
<div class="row">
{% for wallet in wallet-group.items %}
{% include wallet-tile.html %}

4
src/js/wallets.js
View file

@ -8,5 +8,9 @@
$('.wallet-tile a').click(function (event) {
event.stopImmediatePropagation();
});
$('.wallet-modal-container button[data-url]').click(function (event) {
window.open($(event.currentTarget).data('url'));
});
});
}(jQuery));

56
src/scss/_junk-drawer.scss
View file

@ -5,7 +5,6 @@ you're in a hurry or lost or you just need to Make It Work©
*/
.center-block {
margin: 0 auto;
display: block;
@ -135,9 +134,21 @@ $wallet-tile-hover-background-base-color: lighten($color-blue-light,9);
}
.wallet-modal-container {
& .modal-header {
border-bottom: none;
}
&.dash-core {
& .btn.btn-default {
border: 1px solid $color-blue-highlight;
&:hover, &:focus {
background-color: $wallet-tile-hover-background-base-color;
border-color: white;
color: $color-blue-dark;
}
}
}
}
img.staff {
@ -171,7 +182,7 @@ a.blog_link {
width: 32px;
height: 32px;
cursor: pointer;
&:hover{
&:hover, .dash-core &:hover {
&:before, &:after {
background-color: #000;
}
@ -182,8 +193,12 @@ a.blog_link {
content: ' ';
height: 33px;
width: 2px;
background-color: #fff;
transition: .5s;
background-color: $color-blue-dark;
.dash-core & {
background-color: #fff;
}
}
&:before {
transform: rotate(45deg);
@ -193,12 +208,18 @@ a.blog_link {
}
}
&__title {
color: #fff;
font-size: 2.6em;
margin-right: 45px;
.dash-core & {
color: #fff;
}
}
&__content {
background-color: #fff;
.dash-core & {
background-color: #1c75bc;
}
}
&__header {
padding-left: 44px;
border: none;
@ -208,16 +229,36 @@ a.blog_link {
padding-left: 44px;
}
&__descr {
.dash-core & {
color: #fff;
}
font-size: 1.5em;
}
&__accent {
.dash-core & {
color: #fff;
}
font-size: 0.9em;
}
&__sidebar {
padding: 3px 0 0 42px;
padding: 3px 15px 0 42px;
@media (min-width: $screen-sm-min) {
border-left: none;
border-top: 1px solid $color-gray;
.dash-core & {
border-left: none;
border-top: 1px solid rgba(255, 255, 255, .22);
}
}
@media (min-width: $screen-md-min) {
border-left: 1px solid $color-gray;
border-top: none;
.dash-core & {
border-left: 1px solid rgba(255, 255, 255, .22);
border-top: none;
}
}
}
&__select {
position: relative;
@ -238,7 +279,8 @@ a.blog_link {
top: 50%;
right: 12px;
margin-top: -2px;
vertical-align: middle;width: 0;
vertical-align: middle;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
@ -378,9 +420,11 @@ a.blog_link {
background-color: #ffffff;
}
}
.text-word-wrap {
word-wrap: break-word;
}
.color-article {
float: left;
margin-left: 15px;

6
wallets/index.html
View file

@ -28,7 +28,7 @@ description: pages.wallets.description
{% for os-sequence in desktop-os-order-list %}
{% for wallet-group in desktop-os-collection %}
{% if os-sequence == wallet-group.name %}
<li role="presentation" {%if forloop.first == true %}class="active"{% endif %}><a data-toggle="pill" href="#{{wallet-group.name}}">
<li role="tab" {%if forloop.first == true %}class="active"{% endif %}><a data-toggle="pill" href="#{{wallet-group.name}}">
{% case wallet-group.name %}
{% when 'win32' %}
Windows (32bit)
@ -64,9 +64,9 @@ 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 id="wallet-mobile-os-tabs" class="nav2 nav-tabs ">
<ul id="wallet-mobile-os-tabs" class="nav2 nav-tabs " role="">
{% for wallet-group in mobile-os-collection %}
<li {%if forloop.first == true %}class="active"{% endif %}><a data-toggle="pill" href="#{{wallet-group.name}}">
<li {%if forloop.first == true %}class="active"{% endif %} role="tab"><a data-toggle="pill" href="#{{wallet-group.name}}">
{% case wallet-group.name %}
{% when 'android' %}
Android