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

[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">
<div class="merchant__avatar">
<div class="member__avatar">
{% if merchant.image %}
<div class="merchant__image-wrapper">
<a href="{{ merchant.url }}" target="_blank" class="ctabox__link">
<img class="merchant__image" src="/assets/img/merchants/{{ merchant.image }}" alt="{{ merchant.name }}">
<div class="member__image-wrapper">
<a href="{{ merchant.url }}" target="_blank" class="member__link">
<img class="member__image" src="/assets/img/merchants/{{ merchant.image }}" alt="{{ merchant.name }}">
</a>
</div>
{% else %}
<div class="merchant__image-wrapper">
<a href="{{ merchant.url }}" target="_blank" class="ctabox__link">
<img class="merchant__image" src="/assets/img/merchant_generic_logo.png" alt="{{ merchant.name }}">
<div class="member__image-wrapper">
<a href="{{ merchant.url }}" target="_blank" class="member__link">
<img class="member__image" src="/assets/img/merchant_generic_logo.png" alt="{{ merchant.name }}">
</a>
</div>
{% endif %}
</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 %}
<div class="merchant__title" data-mh="merchant-title">{{ merchant.title }}</div>
<div class="member__title" data-mh="merchant-title">{{ merchant.title }}</div>
{% endif %}
</li>

4
_includes/nav-desktop.html
View file

@ -27,12 +27,12 @@
{% if page.layout != 'post' %}
<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">
<!-- TODO: dynamically generate this list -->
<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 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>

20
merchants/index.html
View file

@ -8,7 +8,7 @@ description: pages.merchants.description
<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__intro">
<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>
</section>
<section class="section section--intro-lead">
<section class="section section--intro-lead section--merchants">
<div class="section__content content">
<div class="section__intro">
<h2 class="section__title">{% t pages.merchants.email-heading %}</h1>
@ -34,7 +34,7 @@ description: pages.merchants.description
</div>
</section>
<section class="section section--intro-lead">
<section class="section section--intro-lead section--merchants">
<div class="section__content content">
<div class="section__intro">
<h2 class="section__title">{% t pages.merchants.vpn-heading %}</h1>
@ -47,7 +47,7 @@ description: pages.merchants.description
</div>
</section>
<section class="section section--intro-lead">
<section class="section section--intro-lead section--merchants">
<div class="section__content content">
<div class="section__intro">
<h2 class="section__title">{% t pages.merchants.hosting-heading %}</h1>
@ -60,7 +60,7 @@ description: pages.merchants.description
</div>
</section>
<section class="section section--intro-lead">
<section class="section section--intro-lead section--merchants">
<div class="section__content content">
<div class="section__intro">
<h2 class="section__title">{% t pages.merchants.design-heading %}</h1>
@ -73,7 +73,7 @@ description: pages.merchants.description
</div>
</section>
<section class="section section--intro-lead">
<section class="section section--intro-lead section--merchants">
<div class="section__content content">
<div class="section__intro">
<h2 class="section__title">{% t pages.merchants.gifts-heading %}</h1>
@ -86,7 +86,7 @@ description: pages.merchants.description
</div>
</section>
<section class="section section--intro-lead">
<section class="section section--intro-lead section--merchants">
<div class="section__content content">
<div class="section__intro">
<h2 class="section__title">{% t pages.merchants.games-heading %}</h1>
@ -99,7 +99,7 @@ description: pages.merchants.description
</div>
</section>
<section class="section section--intro-lead">
<section class="section section--intro-lead section--merchants">
<div class="section__content content">
<div class="section__intro">
<h2 class="section__title">{% t pages.merchants.casinos-heading %}</h1>
@ -112,7 +112,7 @@ description: pages.merchants.description
</div>
</section>
<section class="section section--intro-lead">
<section class="section section--intro-lead section--merchants">
<div class="section__content content">
<div class="section__intro">
<h2 class="section__title">{% t pages.merchants.stores-heading %}</h1>
@ -125,7 +125,7 @@ description: pages.merchants.description
</div>
</section>
<section class="section section--intro-lead">
<section class="section section--intro-lead section--merchants">
<div class="section__content content">
<div class="section__intro">
<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();
// color: $color-blue;
margin-bottom: 5px;
word-wrap: break-word;
}
&__title {
@ -64,6 +65,9 @@ $m: 'member';
}
}
/**
* Merchants (Merchantlist)
*/
&--merchants {
.#{$m} {
@include mq($from: extrasmall) {
@ -72,11 +76,26 @@ $m: 'member';
@include mq($from: small) {
width: 33.3%;
}
@include mq($from: medium) {
// @include mq($from: medium) {
// width: 25%;
// }
@include mq($from: large) {
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 {
text-align: center;
.#{$m} {