mirror of
https://github.com/seigler/dash-website
synced 2025-07-26 23:06:09 +00:00
Wallets:
-- 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
parent
249c1cf709
commit
f71fc75876
5 changed files with 376 additions and 320 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -34,7 +33,7 @@ $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-hover-background-base-color: lighten($color-blue-light, 9);
|
||||
|
||||
.wallet-tile {
|
||||
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;
|
||||
max-width: $wallet-tile-max-width;
|
||||
overflow: hidden;
|
||||
-o-transition:.25s;
|
||||
-ms-transition:.25s;
|
||||
-moz-transition:.25s;
|
||||
-webkit-transition:.25s;
|
||||
transition:.25s;
|
||||
-o-transition: .25s;
|
||||
-ms-transition: .25s;
|
||||
-moz-transition: .25s;
|
||||
-webkit-transition: .25s;
|
||||
transition: .25s;
|
||||
|
||||
&:hover,&:focus {
|
||||
&: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);
|
||||
color: darken($color-gray-dark, 15);
|
||||
}
|
||||
|
||||
& .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 {
|
||||
margin: $wallet-tile-spacing auto;
|
||||
padding: $wallet-tile-spacing*.3;
|
||||
|
|
@ -100,13 +99,13 @@ $wallet-tile-hover-background-base-color: lighten($color-blue-light,9);
|
|||
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;
|
||||
-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);
|
||||
background-color: lighten($wallet-tile-hover-background-base-color, 3);
|
||||
border-color: white;
|
||||
}
|
||||
& a {
|
||||
|
|
@ -115,18 +114,18 @@ $wallet-tile-hover-background-base-color: lighten($color-blue-light,9);
|
|||
padding: $wallet-tile-spacing*.3;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
-o-transition:.5s;
|
||||
-ms-transition:.5s;
|
||||
-moz-transition:.5s;
|
||||
-webkit-transition:.5s;
|
||||
transition:.5s;
|
||||
-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;
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
@ -147,12 +158,12 @@ img.staff {
|
|||
}
|
||||
|
||||
a.blog_link {
|
||||
text-align:right;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.img-circle {
|
||||
margin: 1px;
|
||||
border:1px solid #dddddd;
|
||||
border: 1px solid #dddddd;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
|
@ -163,7 +174,7 @@ a.blog_link {
|
|||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.b-modal{
|
||||
.b-modal {
|
||||
&__close {
|
||||
position: absolute;
|
||||
right: 32px;
|
||||
|
|
@ -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;
|
||||
transition: .5s;
|
||||
background-color: $color-blue-dark;
|
||||
.dash-core & {
|
||||
background-color: #fff;
|
||||
transition:.5s;
|
||||
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
transform: rotate(45deg);
|
||||
|
|
@ -193,52 +208,79 @@ a.blog_link {
|
|||
}
|
||||
}
|
||||
&__title {
|
||||
color: #fff;
|
||||
font-size: 2.6em;
|
||||
margin-right: 45px;
|
||||
.dash-core & {
|
||||
color: #fff;
|
||||
}
|
||||
&__content{
|
||||
}
|
||||
&__content {
|
||||
background-color: #fff;
|
||||
.dash-core & {
|
||||
background-color: #1c75bc;
|
||||
}
|
||||
&__header{
|
||||
}
|
||||
&__header {
|
||||
padding-left: 44px;
|
||||
border: none;
|
||||
}
|
||||
&__body{
|
||||
&__body {
|
||||
border: 0;
|
||||
padding-left: 44px;
|
||||
}
|
||||
&__descr{
|
||||
&__descr {
|
||||
.dash-core & {
|
||||
color: #fff;
|
||||
}
|
||||
font-size: 1.5em;
|
||||
}
|
||||
&__accent{
|
||||
&__accent {
|
||||
.dash-core & {
|
||||
color: #fff;
|
||||
}
|
||||
font-size: 0.9em;
|
||||
}
|
||||
&__sidebar{
|
||||
padding: 3px 0 0 42px;
|
||||
border-left: 1px solid rgba(255,255,255, .22);
|
||||
&__sidebar {
|
||||
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);
|
||||
}
|
||||
&__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;
|
||||
padding: 14px 50px 12px 10px;
|
||||
background: #1c75bc;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #6aaee6;
|
||||
color:#fff;
|
||||
color: #fff;
|
||||
font-size: 1em;
|
||||
box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5);
|
||||
-webkit-appearance:none;
|
||||
-moz-appearance:none;
|
||||
appearance:none;
|
||||
cursor:pointer;
|
||||
&:after{
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
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;
|
||||
|
|
@ -263,7 +305,7 @@ a.blog_link {
|
|||
h2 {
|
||||
margin-top: 0px;
|
||||
}
|
||||
.page--home>section:not(.section) p {
|
||||
.page--home > section:not(.section) p {
|
||||
max-width: 50em;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
|
@ -277,8 +319,8 @@ a.blog_link {
|
|||
}
|
||||
}
|
||||
|
||||
.ctabox_small-font{
|
||||
p{
|
||||
.ctabox_small-font {
|
||||
p {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
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);
|
||||
}
|
||||
|
||||
|
|
@ -303,9 +345,9 @@ a.blog_link {
|
|||
min-height: $wallet-tile-min-height;
|
||||
max-width: $wallet-tile-max-width;
|
||||
overflow: hidden;
|
||||
transition:.25s;
|
||||
transition: .25s;
|
||||
|
||||
& .thumbnail{
|
||||
& .thumbnail {
|
||||
& .logo-container {
|
||||
margin: $wallet-tile-spacing auto;
|
||||
padding: $wallet-tile-spacing*.3;
|
||||
|
|
@ -338,9 +380,9 @@ a.blog_link {
|
|||
margin: 0 auto;
|
||||
width: 90%;
|
||||
display: block;
|
||||
transition:1.25s;
|
||||
transition: 1.25s;
|
||||
&: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;
|
||||
}
|
||||
& a {
|
||||
|
|
@ -349,10 +391,10 @@ a.blog_link {
|
|||
padding: $wallet-tile-spacing*.3;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
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 );
|
||||
transition:.5s;
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -360,28 +402,30 @@ a.blog_link {
|
|||
}
|
||||
}
|
||||
|
||||
.color-box{
|
||||
.color-box {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
float:left;
|
||||
&_blue{
|
||||
float: left;
|
||||
&_blue {
|
||||
background-color: #1d71b8;
|
||||
}
|
||||
&_gray{
|
||||
&_gray {
|
||||
background-color: #e3e3e3;
|
||||
}
|
||||
&_black{
|
||||
&_black {
|
||||
background-color: #000000;
|
||||
}
|
||||
&_white{
|
||||
&_white {
|
||||
border: 2px solid #ebebea;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
.text-word-wrap{
|
||||
|
||||
.text-word-wrap {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.color-article{
|
||||
|
||||
.color-article {
|
||||
float: left;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue