joshua/dash-website
1
0
Fork 0
mirror of https://github.com/seigler/dash-website synced 2025-07-27 07:16:10 +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 --> <!-- Modal -->
{% for wallet in vendor-group.items %} {% for wallet in vendor-group.items %}
<div id="{{wallet.os}}-{{wallet.vendor_id}}-{{wallet.type_id}}-{{wallet.product_id}}-modal" <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-dialog modal-lg" role="document">
<div class="modal-content b-modal__content"> <div class="modal-content b-modal__content">
<div class="modal-header"> <div class="modal-header">
@ -64,8 +70,8 @@
</h5> </h5>
</div> </div>
<div> <div>
<button type="button" class="btn btn-default" data-dismiss="modal" aria-label="Download {{wallet.product_label}}"><span <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">Download {{wallet.product_label}}</span></button> aria-hidden="true">{{wallet.links[0].label}}: {{wallet.name}}</span></button>
</div> </div>
</div> </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"> <div class="row">
{% for wallet in wallet-group.items %} {% for wallet in wallet-group.items %}
{% include wallet-tile.html %} {% include wallet-tile.html %}

4
src/js/wallets.js
View file

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

182
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 { .center-block {
margin: 0 auto; margin: 0 auto;
display: block; display: block;
@ -34,7 +33,7 @@ $wallet-tile-logo-container-width: 5.5em;
$wallet-tile-spacing: .7em; $wallet-tile-spacing: .7em;
$wallet-tile-caption-fine-print-font-size: 0.6em; $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-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-hover-background-base-color: lighten($color-blue-light, 9);
.wallet-tile { .wallet-tile {
animation: fadein 0.4s; animation: fadein 0.4s;
@ -45,27 +44,27 @@ $wallet-tile-hover-background-base-color: lighten($color-blue-light,9);
min-height: $wallet-tile-min-height; min-height: $wallet-tile-min-height;
max-width: $wallet-tile-max-width; max-width: $wallet-tile-max-width;
overflow: hidden; overflow: hidden;
-o-transition:.25s; -o-transition: .25s;
-ms-transition:.25s; -ms-transition: .25s;
-moz-transition:.25s; -moz-transition: .25s;
-webkit-transition:.25s; -webkit-transition: .25s;
transition:.25s; transition: .25s;
&:hover,&:focus { &:hover, &:focus {
background-color: $wallet-tile-hover-background-base-color; background-color: $wallet-tile-hover-background-base-color;
border-color: $color-blue; border-color: $color-blue;
a { a {
color: darken($color-blue, 15); color: darken($color-blue, 15);
} }
& .thumbnail .caption .fine-print { & .thumbnail .caption .fine-print {
color: darken($color-gray-dark,15); color: darken($color-gray-dark, 15);
} }
& .thumbnail .wallet-links-container .link { & .thumbnail .wallet-links-container .link {
border-top: solid 1px darken($color-gray,15); border-top: solid 1px darken($color-gray, 15);
} }
} }
& .thumbnail{ & .thumbnail {
& .logo-container { & .logo-container {
margin: $wallet-tile-spacing auto; margin: $wallet-tile-spacing auto;
padding: $wallet-tile-spacing*.3; padding: $wallet-tile-spacing*.3;
@ -100,13 +99,13 @@ $wallet-tile-hover-background-base-color: lighten($color-blue-light,9);
margin: 0 auto; margin: 0 auto;
width: 90%; width: 90%;
display: block; display: block;
-o-transition:1.25s; -o-transition: 1.25s;
-ms-transition:1.25s; -ms-transition: 1.25s;
-moz-transition:1.25s; -moz-transition: 1.25s;
-webkit-transition:1.25s; -webkit-transition: 1.25s;
transition:1.25s; transition: 1.25s;
&:hover, &:focus { &:hover, &:focus {
background-color: lighten($wallet-tile-hover-background-base-color,3); background-color: lighten($wallet-tile-hover-background-base-color, 3);
border-color: white; border-color: white;
} }
& a { & a {
@ -115,18 +114,18 @@ $wallet-tile-hover-background-base-color: lighten($color-blue-light,9);
padding: $wallet-tile-spacing*.3; padding: $wallet-tile-spacing*.3;
height: 100%; height: 100%;
width: 100%; width: 100%;
-o-transition:.5s; -o-transition: .5s;
-ms-transition:.5s; -ms-transition: .5s;
-moz-transition:.5s; -moz-transition: .5s;
-webkit-transition:.5s; -webkit-transition: .5s;
transition:.5s; transition: .5s;
&:hover, &:focus { &: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 ); @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; -o-transition: .5s;
-ms-transition:.5s; -ms-transition: .5s;
-moz-transition:.5s; -moz-transition: .5s;
-webkit-transition:.5s; -webkit-transition: .5s;
transition:.5s; transition: .5s;
} }
} }
} }
@ -135,9 +134,21 @@ $wallet-tile-hover-background-base-color: lighten($color-blue-light,9);
} }
.wallet-modal-container { .wallet-modal-container {
& .modal-header { & .modal-header {
border-bottom: none; 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 { img.staff {
@ -147,12 +158,12 @@ img.staff {
} }
a.blog_link { a.blog_link {
text-align:right; text-align: right;
} }
.img-circle { .img-circle {
margin: 1px; margin: 1px;
border:1px solid #dddddd; border: 1px solid #dddddd;
border-radius: 50%; border-radius: 50%;
} }
@ -163,7 +174,7 @@ a.blog_link {
margin-bottom: 0; margin-bottom: 0;
} }
.b-modal{ .b-modal {
&__close { &__close {
position: absolute; position: absolute;
right: 32px; right: 32px;
@ -171,7 +182,7 @@ a.blog_link {
width: 32px; width: 32px;
height: 32px; height: 32px;
cursor: pointer; cursor: pointer;
&:hover{ &:hover, .dash-core &:hover {
&:before, &:after { &:before, &:after {
background-color: #000; background-color: #000;
} }
@ -182,8 +193,12 @@ a.blog_link {
content: ' '; content: ' ';
height: 33px; height: 33px;
width: 2px; width: 2px;
transition: .5s;
background-color: $color-blue-dark;
.dash-core & {
background-color: #fff; background-color: #fff;
transition:.5s;
}
} }
&:before { &:before {
transform: rotate(45deg); transform: rotate(45deg);
@ -193,52 +208,79 @@ a.blog_link {
} }
} }
&__title { &__title {
color: #fff;
font-size: 2.6em; font-size: 2.6em;
margin-right: 45px;
.dash-core & {
color: #fff;
} }
&__content{ }
&__content {
background-color: #fff;
.dash-core & {
background-color: #1c75bc; background-color: #1c75bc;
} }
&__header{ }
&__header {
padding-left: 44px; padding-left: 44px;
border: none; border: none;
} }
&__body{ &__body {
border: 0; border: 0;
padding-left: 44px; padding-left: 44px;
} }
&__descr{ &__descr {
.dash-core & {
color: #fff; color: #fff;
}
font-size: 1.5em; font-size: 1.5em;
} }
&__accent{ &__accent {
.dash-core & {
color: #fff; color: #fff;
}
font-size: 0.9em; font-size: 0.9em;
} }
&__sidebar{ &__sidebar {
padding: 3px 0 0 42px; padding: 3px 15px 0 42px;
border-left: 1px solid rgba(255,255,255, .22); @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);
} }
&__select{ }
@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; position: relative;
padding: 14px 50px 12px 10px; padding: 14px 50px 12px 10px;
background: #1c75bc; background: #1c75bc;
border-radius: 2px; border-radius: 2px;
border: 1px solid #6aaee6; border: 1px solid #6aaee6;
color:#fff; color: #fff;
font-size: 1em; font-size: 1em;
box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5);
-webkit-appearance:none; -webkit-appearance: none;
-moz-appearance:none; -moz-appearance: none;
appearance:none; appearance: none;
cursor:pointer; cursor: pointer;
&:after{ &:after {
content: ''; content: '';
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 12px; right: 12px;
margin-top: -2px; margin-top: -2px;
vertical-align: middle;width: 0; vertical-align: middle;
width: 0;
height: 0; height: 0;
margin-left: 2px; margin-left: 2px;
vertical-align: middle; vertical-align: middle;
@ -263,7 +305,7 @@ a.blog_link {
h2 { h2 {
margin-top: 0px; margin-top: 0px;
} }
.page--home>section:not(.section) p { .page--home > section:not(.section) p {
max-width: 50em; max-width: 50em;
margin: 20px auto; margin: 20px auto;
} }
@ -277,8 +319,8 @@ a.blog_link {
} }
} }
.ctabox_small-font{ .ctabox_small-font {
p{ p {
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
font-size: 0.8em; font-size: 0.8em;
@ -290,7 +332,7 @@ a.blog_link {
} }
} }
.evo-prototype-section{ .evo-prototype-section {
background-image: url(../../assets/img/evolution/bg2.png); background-image: url(../../assets/img/evolution/bg2.png);
} }
@ -303,9 +345,9 @@ a.blog_link {
min-height: $wallet-tile-min-height; min-height: $wallet-tile-min-height;
max-width: $wallet-tile-max-width; max-width: $wallet-tile-max-width;
overflow: hidden; overflow: hidden;
transition:.25s; transition: .25s;
& .thumbnail{ & .thumbnail {
& .logo-container { & .logo-container {
margin: $wallet-tile-spacing auto; margin: $wallet-tile-spacing auto;
padding: $wallet-tile-spacing*.3; padding: $wallet-tile-spacing*.3;
@ -338,9 +380,9 @@ a.blog_link {
margin: 0 auto; margin: 0 auto;
width: 90%; width: 90%;
display: block; display: block;
transition:1.25s; transition: 1.25s;
&:hover, &:focus { &:hover, &:focus {
background-color: lighten($wallet-tile-hover-background-base-color,3); background-color: lighten($wallet-tile-hover-background-base-color, 3);
border-color: white; border-color: white;
} }
& a { & a {
@ -349,10 +391,10 @@ a.blog_link {
padding: $wallet-tile-spacing*.3; padding: $wallet-tile-spacing*.3;
height: 100%; height: 100%;
width: 100%; width: 100%;
transition:.5s; transition: .5s;
&:hover, &:focus { &: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 ); @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);
transition:.5s; transition: .5s;
} }
} }
} }
@ -360,28 +402,30 @@ a.blog_link {
} }
} }
.color-box{ .color-box {
width: 44px; width: 44px;
height: 44px; height: 44px;
float:left; float: left;
&_blue{ &_blue {
background-color: #1d71b8; background-color: #1d71b8;
} }
&_gray{ &_gray {
background-color: #e3e3e3; background-color: #e3e3e3;
} }
&_black{ &_black {
background-color: #000000; background-color: #000000;
} }
&_white{ &_white {
border: 2px solid #ebebea; border: 2px solid #ebebea;
background-color: #ffffff; background-color: #ffffff;
} }
} }
.text-word-wrap{
.text-word-wrap {
word-wrap: break-word; word-wrap: break-word;
} }
.color-article{
.color-article {
float: left; float: left;
margin-left: 15px; 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 os-sequence in desktop-os-order-list %}
{% for wallet-group in desktop-os-collection %} {% for wallet-group in desktop-os-collection %}
{% if os-sequence == wallet-group.name %} {% 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 %} {% case wallet-group.name %}
{% when 'win32' %} {% when 'win32' %}
Windows (32bit) Windows (32bit)
@ -64,9 +64,9 @@ 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 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 %} {% 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 %} {% case wallet-group.name %}
{% when 'android' %} {% when 'android' %}
Android Android