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

[Update] Merchants: Add grid and styles (WIP)

Browse source
This commit is contained in:
0xfff 2016-11-14 00:28:47 +01:00
parent a32d788243
commit c2fdbc7e7e
6 changed files with 138 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

18
_includes/merchant-list.html
View file

@ -1,23 +1,23 @@
<li class="member" data-mh="merchant"> <li class="member" data-mh="merchant">
<div class="merchant__avatar"> <div class="member__avatar">
{% if merchant.image %} {% if merchant.image %}
<div class="merchant__image-wrapper"> <div class="member__image-wrapper">
<a href="{{ merchant.url }}" target="_blank" class="ctabox__link"> <a href="{{ merchant.url }}" target="_blank" class="member__link">
<img class="merchant__image" src="/assets/img/merchants/{{ merchant.image }}" alt="{{ merchant.name }}"> <img class="member__image" src="/assets/img/merchants/{{ merchant.image }}" alt="{{ merchant.name }}">
</a> </a>
</div> </div>
{% else %} {% else %}
<div class="merchant__image-wrapper"> <div class="member__image-wrapper">
<a href="{{ merchant.url }}" target="_blank" class="ctabox__link"> <a href="{{ merchant.url }}" target="_blank" class="member__link">
<img class="merchant__image" src="/assets/img/merchant_generic_logo.png" alt="{{ merchant.name }}"> <img class="member__image" src="/assets/img/merchant_generic_logo.png" alt="{{ merchant.name }}">
</a> </a>
</div> </div>
{% endif %} {% endif %}
</div> </div>
<div class="merchant__name" data-mh="merchant-name">{{ merchant.name }}</div> <div class="member__name" data-mh="merchant-name">{{ merchant.name }}</div>
{% if merchant.title %} {% if merchant.title %}
<div class="merchant__title" data-mh="merchant-title">{{ merchant.title }}</div> <div class="member__title" data-mh="merchant-title">{{ merchant.title }}</div>
{% endif %} {% endif %}
</li> </li>

4
_includes/nav-desktop.html
View file

@ -27,12 +27,12 @@
{% if page.layout != 'post' %} {% if page.layout != 'post' %}
<li class="nav__item nav__item--languages"> <li class="nav__item nav__item--languages">
<a href="#" class="nav__link" style="text-transform:uppercase;">{{site.lang}} <span class="flag {% if 'en' == site.lang %}us{% else %}{{site.lang}}{% endif %}"></span></a> <a href="#" class="nav__link" style="text-transform:uppercase;">{{site.lang}} <span class="flag {% if 'en' == site.lang %}gb{% else %}{{site.lang}}{% endif %}"></span></a>
<ul class="nav__sublist"> <ul class="nav__sublist">
<!-- TODO: dynamically generate this list --> <!-- TODO: dynamically generate this list -->
<li class="nav__subitem"> <li class="nav__subitem">
<a href="{{ page.url }}" class="nav__link {% if site.lang == 'en' %}is-active{% endif %}">English <span class="flag us"></span></a> <a href="{{ page.url }}" class="nav__link {% if site.lang == 'en' %}is-active{% endif %}">English <span class="flag gb"></span></a>
</li> </li>
<li class="nav__subitem"> <li class="nav__subitem">
<a href="/es{{ page.url }}" class="nav__link {% if site.lang == 'es' %}is-active{% endif %}">Español <span class="flag es"></span></a> <a href="/es{{ page.url }}" class="nav__link {% if site.lang == 'es' %}is-active{% endif %}">Español <span class="flag es"></span></a>

20
merchants/index.html
View file

@ -8,7 +8,7 @@ description: pages.merchants.description
<div class="page page--team"> <div class="page page--team">
<section class="section section--intro-lead"> <section class="section section--intro-lead section--merchants">
<div class="section__content content"> <div class="section__content content">
<div class="section__intro"> <div class="section__intro">
<h2 class="section__title">{% t pages.merchants.cards-heading %}<!-- <a class="permalink" title="Permalink" id="social"></a> --></h1> <h2 class="section__title">{% t pages.merchants.cards-heading %}<!-- <a class="permalink" title="Permalink" id="social"></a> --></h1>
@ -21,7 +21,7 @@ description: pages.merchants.description
</div> </div>
</section> </section>
<section class="section section--intro-lead"> <section class="section section--intro-lead section--merchants">
<div class="section__content content"> <div class="section__content content">
<div class="section__intro"> <div class="section__intro">
<h2 class="section__title">{% t pages.merchants.email-heading %}</h1> <h2 class="section__title">{% t pages.merchants.email-heading %}</h1>
@ -34,7 +34,7 @@ description: pages.merchants.description
</div> </div>
</section> </section>
<section class="section section--intro-lead"> <section class="section section--intro-lead section--merchants">
<div class="section__content content"> <div class="section__content content">
<div class="section__intro"> <div class="section__intro">
<h2 class="section__title">{% t pages.merchants.vpn-heading %}</h1> <h2 class="section__title">{% t pages.merchants.vpn-heading %}</h1>
@ -47,7 +47,7 @@ description: pages.merchants.description
</div> </div>
</section> </section>
<section class="section section--intro-lead"> <section class="section section--intro-lead section--merchants">
<div class="section__content content"> <div class="section__content content">
<div class="section__intro"> <div class="section__intro">
<h2 class="section__title">{% t pages.merchants.hosting-heading %}</h1> <h2 class="section__title">{% t pages.merchants.hosting-heading %}</h1>
@ -60,7 +60,7 @@ description: pages.merchants.description
</div> </div>
</section> </section>
<section class="section section--intro-lead"> <section class="section section--intro-lead section--merchants">
<div class="section__content content"> <div class="section__content content">
<div class="section__intro"> <div class="section__intro">
<h2 class="section__title">{% t pages.merchants.design-heading %}</h1> <h2 class="section__title">{% t pages.merchants.design-heading %}</h1>
@ -73,7 +73,7 @@ description: pages.merchants.description
</div> </div>
</section> </section>
<section class="section section--intro-lead"> <section class="section section--intro-lead section--merchants">
<div class="section__content content"> <div class="section__content content">
<div class="section__intro"> <div class="section__intro">
<h2 class="section__title">{% t pages.merchants.gifts-heading %}</h1> <h2 class="section__title">{% t pages.merchants.gifts-heading %}</h1>
@ -86,7 +86,7 @@ description: pages.merchants.description
</div> </div>
</section> </section>
<section class="section section--intro-lead"> <section class="section section--intro-lead section--merchants">
<div class="section__content content"> <div class="section__content content">
<div class="section__intro"> <div class="section__intro">
<h2 class="section__title">{% t pages.merchants.games-heading %}</h1> <h2 class="section__title">{% t pages.merchants.games-heading %}</h1>
@ -99,7 +99,7 @@ description: pages.merchants.description
</div> </div>
</section> </section>
<section class="section section--intro-lead"> <section class="section section--intro-lead section--merchants">
<div class="section__content content"> <div class="section__content content">
<div class="section__intro"> <div class="section__intro">
<h2 class="section__title">{% t pages.merchants.casinos-heading %}</h1> <h2 class="section__title">{% t pages.merchants.casinos-heading %}</h1>
@ -112,7 +112,7 @@ description: pages.merchants.description
</div> </div>
</section> </section>
<section class="section section--intro-lead"> <section class="section section--intro-lead section--merchants">
<div class="section__content content"> <div class="section__content content">
<div class="section__intro"> <div class="section__intro">
<h2 class="section__title">{% t pages.merchants.stores-heading %}</h1> <h2 class="section__title">{% t pages.merchants.stores-heading %}</h1>
@ -125,7 +125,7 @@ description: pages.merchants.description
</div> </div>
</section> </section>
<section class="section section--intro-lead"> <section class="section section--intro-lead section--merchants">
<div class="section__content content"> <div class="section__content content">
<div class="section__intro"> <div class="section__intro">
<h2 class="section__title">{% t pages.merchants.metals-heading %}</h1> <h2 class="section__title">{% t pages.merchants.metals-heading %}</h1>

25
src/scss/_member.scss
View file

@ -23,6 +23,7 @@ $m: 'member';
@include font-claim(); @include font-claim();
// color: $color-blue; // color: $color-blue;
margin-bottom: 5px; margin-bottom: 5px;
word-wrap: break-word;
} }
&__title { &__title {
@ -64,6 +65,9 @@ $m: 'member';
} }
} }
/**
* Merchants (Merchantlist)
*/
&--merchants { &--merchants {
.#{$m} { .#{$m} {
@include mq($from: extrasmall) { @include mq($from: extrasmall) {
@ -72,11 +76,26 @@ $m: 'member';
@include mq($from: small) { @include mq($from: small) {
width: 33.3%; width: 33.3%;
} }
@include mq($from: medium) { // @include mq($from: medium) {
// width: 25%;
// }
@include mq($from: large) {
width: 25%; width: 25%;
} }
@include mq($from: large) {
width: 20%; margin-bottom: pxToRem(40px);
&__avatar {
width: 100%;
max-width: 100%;
}
&__image-wrapper {
padding-bottom: ((281/500)*100%);
}
&__name {
color: $color-gray-dark;
} }
} }
} }

87
src/scss/_merchant.scss Normal file
View file

@ -0,0 +1,87 @@
$m: 'member';
.#{$m} {
margin-bottom: pxToRem(80px);
&__avatar {
display: inline-block;
width: 100%;
max-width: 140px;
margin-bottom: 20px;
}
&__image-wrapper {
@include overflow-image-wrapper();
padding-bottom: ((105/140)*100%);
}
&__image {
@include overflow-image();
}
&__name {
@include font-claim();
// color: $color-blue;
margin-bottom: 5px;
}
&__title {
margin-bottom: 10px;
color: $color-gray-dark;
}
&__description {
margin-bottom: 10px;
text-align: left;
}
&__detail {
text-align: left;
}
&-list {
font-size: 0;
margin: 0 pxToRem(-20px);
text-align: left;
@include mq($to: small) {
text-align: left;
}
.#{$m} {
display: inline-block;
max-width: 500px;
width: 100%;
padding: 0 20px;
vertical-align: top;
text-align: left;
font-size: $font-size-base;
@include mq($from: small) {
width: 50%;
}
@include mq($from: medium) {
width: 33.3%;
}
}
/**
* Merchants (Merchantlist)
*/
&--merchants {
.#{$m} {
@include mq($from: extrasmall) {
width: 50%;
}
@include mq($from: small) {
width: 33.3%;
}
@include mq($from: medium) {
width: 25%;
}
@include mq($from: large) {
width: 20%;
}
}
}
}
}

8
src/scss/_section.scss
View file

@ -36,6 +36,14 @@ $m: 'section';
} }
} }
&--merchants {
.#{$m} {
&__title {
color: $color-gray-dark;
}
}
}
&--claim { &--claim {
text-align: center; text-align: center;
.#{$m} { .#{$m} {