DRY up archive include

- Combine grid and list view into one include
This commit is contained in:
Michael Rose 2016-03-19 20:58:17 -04:00
parent da90ccaf49
commit 109f4ffb44
16 changed files with 75 additions and 76 deletions

View file

@ -1,8 +0,0 @@
<article class="archive__item" itemscope itemtype="http://schema.org/CreativeWork">
{% if post.link %}
<h2 class="archive__item-title link-post" itemprop="headline"><a href="{{ base_path }}{{ post.url }}">{% if post.id %}{{ post.title | markdownify | remove: "<p>" | remove: "</p>" }}{% else %}{{ post.title }}{% endif %}</a> <a href="{{ post.link }}" target="_blank"><i class="fa fa-link"></i></a></h2>
{% else %}
<h2 class="archive__item-title" itemprop="headline"><a href="{{ base_path }}{{ post.url }}">{% if post.id %}{{ post.title | markdownify | remove: "<p>" | remove: "</p>" }}{% else %}{{ post.title }}{% endif %}</a></h2>
{% endif %}
{% if post.excerpt %}<p class="archive__item-excerpt" itemprop="description">{{ post.excerpt | markdownify | strip_html | truncate: 160 }}</p>{% endif %}
</article>

View file

@ -1,23 +1,27 @@
{% include base_path %}
{% if post.header.teaser %} {% if post.header.teaser %}
{% capture teaser %}{{ post.header.teaser }}{% endcapture %} {% capture teaser %}{{ post.header.teaser }}{% endcapture %}
{% else %} {% else %}
{% capture teaser %}{{ site.teaser }}{% endcapture %} {% capture teaser %}{{ site.teaser }}{% endcapture %}
{% endif %} {% endif %}
<div class="grid__item"> <div class="{{ include.type | default: "list" }}__item">
<a href="{{ base_path }}{{ post.url }}"> {% if post.link %}
<a href="{{ post.link }}" target="_blank">
{% else %}
<a href="{{ base_path }}{{ post.url }}">
{% endif %}
<article class="archive__item" itemscope itemtype="http://schema.org/CreativeWork"> <article class="archive__item" itemscope itemtype="http://schema.org/CreativeWork">
<div class="archive__item-teaser"> {% if include.type == "grid" %}
<img src= <div class="archive__item-teaser">
{% if teaser contains "http" %} <img src=
"{{ teaser }}" {% if teaser contains "http" %}
{% else %} "{{ teaser }}"
"{{ teaser | prepend: "/images/" | prepend: base_path }}" {% else %}
{% endif %} "{{ teaser | prepend: "/images/" | prepend: base_path }}"
alt="{{ page.title }}"> {% endif %}
</div> alt="{{ page.title }}">
</div>
{% endif %}
<h2 class="archive__item-title" itemprop="headline">{% if post.id %}{{ post.title | markdownify | remove: "<p>" | remove: "</p>" }}{% else %}{{ post.title }}{% endif %}</h2> <h2 class="archive__item-title" itemprop="headline">{% if post.id %}{{ post.title | markdownify | remove: "<p>" | remove: "</p>" }}{% else %}{{ post.title }}{% endif %}</h2>
{% if post.excerpt %}<p class="archive__item-excerpt" itemprop="description">{{ post.excerpt | markdownify | strip_html | truncate: 160 }}</p>{% endif %} {% if post.excerpt %}<p class="archive__item-excerpt" itemprop="description">{{ post.excerpt | markdownify | strip_html | truncate: 160 }}</p>{% endif %}
</article> </article>

View file

@ -7,6 +7,6 @@ author_profile: false
<h1 class="page__title">{{ page.title }}</h1> <h1 class="page__title">{{ page.title }}</h1>
{% include base_path %} {% include base_path %}
{% for post in page.posts %} {% for post in page.posts %}
{% include archive-list-single.html %} {% include archive-single.html %}
{% endfor %} {% endfor %}
</div> </div>

View file

@ -57,7 +57,7 @@ layout: default
{% endif %} {% endif %}
<div class="grid__wrapper"> <div class="grid__wrapper">
{% for post in site.related_posts limit:4 %} {% for post in site.related_posts limit:4 %}
{% include archive-grid-single.html %} {% include archive-single.html type="grid" %}
{% endfor %} {% endfor %}
</div> </div>
</div> </div>

View file

@ -6,12 +6,12 @@ author_profile: false
--- ---
{% include base_path %} {% include base_path %}
{% include group-by-array collection=site.posts field='categories' %} {% include group-by-array collection=site.posts field="categories" %}
{% for category in group_names %} {% for category in group_names %}
{% assign posts = group_items[forloop.index0] %} {% assign posts = group_items[forloop.index0] %}
<h2 id="{{ category | slugify }}" class="archive__subtitle">{{ category }}</h2> <h2 id="{{ category | slugify }}" class="archive__subtitle">{{ category }}</h2>
{% for post in posts %} {% for post in posts %}
{% include archive-list-single.html %} {% include archive-single.html %}
{% endfor %} {% endfor %}
{% endfor %} {% endfor %}

View file

@ -9,7 +9,7 @@ author_profile: false
{% capture written_label %}'None'{% endcapture %} {% capture written_label %}'None'{% endcapture %}
{% for collection in site.collections %} {% for collection in site.collections %}
{% unless collection.output == false or collection.label == 'posts' %} {% unless collection.output == false or collection.label == "posts" %}
{% capture label %}{{ collection.label }}{% endcapture %} {% capture label %}{{ collection.label }}{% endcapture %}
{% if label != written_label %} {% if label != written_label %}
<h2 id="{{ label | slugify }}" class="archive__subtitle">{{ label }}</h2> <h2 id="{{ label | slugify }}" class="archive__subtitle">{{ label }}</h2>
@ -17,8 +17,8 @@ author_profile: false
{% endif %} {% endif %}
{% endunless %} {% endunless %}
{% for post in collection.docs %} {% for post in collection.docs %}
{% unless collection.output == false or collection.label == 'posts' %} {% unless collection.output == false or collection.label == "posts" %}
{% include archive-list-single.html %} {% include archive-single.html %}
{% endunless %} {% endunless %}
{% endfor %} {% endfor %}
{% endfor %} {% endfor %}

View file

@ -7,5 +7,5 @@ author_profile: false
{% include base_path %} {% include base_path %}
{% for post in site.pages %} {% for post in site.pages %}
{% include archive-list-single.html %} {% include archive-single.html %}
{% endfor %} {% endfor %}

View file

@ -5,12 +5,12 @@ permalink: /portfolio/
--- ---
{% include base_path %} {% include base_path %}
{% include group-by-array collection=site.portfolio field='categories' %} {% include group-by-array collection=site.portfolio field="categories" %}
{% for category in group_names %} {% for category in group_names %}
{% assign posts = group_items[forloop.index0] %} {% assign posts = group_items[forloop.index0] %}
<h2 id="{{ category | slugify }}" class="archive__subtitle">{{ category }}</h2> <h2 id="{{ category | slugify }}" class="archive__subtitle">{{ category }}</h2>
{% for post in posts %} {% for post in posts %}
{% include archive-list-single.html %} {% include archive-single.html %}
{% endfor %} {% endfor %}
{% endfor %} {% endfor %}

View file

@ -8,5 +8,5 @@ author_profile: false
{% include base_path %} {% include base_path %}
{% for post in site.recipes %} {% for post in site.recipes %}
{% include archive-list-single.html %} {% include archive-single.html %}
{% endfor %} {% endfor %}

View file

@ -11,18 +11,18 @@ A list of all the posts and pages found on the site. For you robots out there is
<h2>Pages</h2> <h2>Pages</h2>
{% for post in site.pages %} {% for post in site.pages %}
{% include archive-list-single.html %} {% include archive-single.html %}
{% endfor %} {% endfor %}
<h2>Posts</h2> <h2>Posts</h2>
{% for post in site.posts %} {% for post in site.posts %}
{% include archive-list-single.html %} {% include archive-single.html %}
{% endfor %} {% endfor %}
{% capture written_label %}'None'{% endcapture %} {% capture written_label %}'None'{% endcapture %}
{% for collection in site.collections %} {% for collection in site.collections %}
{% unless collection.output == false or collection.label == 'posts' %} {% unless collection.output == false or collection.label == "posts" %}
{% capture label %}{{ collection.label }}{% endcapture %} {% capture label %}{{ collection.label }}{% endcapture %}
{% if label != written_label %} {% if label != written_label %}
<h2>{{ label }}</h2> <h2>{{ label }}</h2>
@ -30,8 +30,8 @@ A list of all the posts and pages found on the site. For you robots out there is
{% endif %} {% endif %}
{% endunless %} {% endunless %}
{% for post in collection.docs %} {% for post in collection.docs %}
{% unless collection.output == false or collection.label == 'posts' %} {% unless collection.output == false or collection.label == "posts" %}
{% include archive-list-single.html %} {% include archive-single.html %}
{% endunless %} {% endunless %}
{% endfor %} {% endfor %}
{% endfor %} {% endfor %}

View file

@ -6,12 +6,12 @@ author_profile: false
--- ---
{% include base_path %} {% include base_path %}
{% include group-by-array collection=site.posts field='tags' %} {% include group-by-array collection=site.posts field="tags" %}
{% for tag in group_names %} {% for tag in group_names %}
{% assign posts = group_items[forloop.index0] %} {% assign posts = group_items[forloop.index0] %}
<h2 id="{{ tag | slugify }}" class="archive__subtitle">{{ tag }}</h2> <h2 id="{{ tag | slugify }}" class="archive__subtitle">{{ tag }}</h2>
{% for post in posts %} {% for post in posts %}
{% include archive-list-single.html %} {% include archive-single.html %}
{% endfor %} {% endfor %}
{% endfor %} {% endfor %}

View file

@ -13,5 +13,5 @@ author_profile: false
<h2 id="{{ year | slugify }}" class="archive__subtitle">{{ year }}</h2> <h2 id="{{ year | slugify }}" class="archive__subtitle">{{ year }}</h2>
{% capture written_year %}{{ year }}{% endcapture %} {% capture written_year %}{{ year }}{% endcapture %}
{% endif %} {% endif %}
{% include archive-list-single.html %} {% include archive-single.html %}
{% endfor %} {% endfor %}

View file

@ -13,6 +13,9 @@
@include breakpoint($x-large) { @include breakpoint($x-large) {
@include prefix(0.5 of 12); @include prefix(0.5 of 12);
} }
a {
text-decoration: none;
}
} }
.archive__subtitle { .archive__subtitle {
@ -27,12 +30,6 @@
margin-bottom: 4px; margin-bottom: 4px;
font-family: $sans-serif-narrow; font-family: $sans-serif-narrow;
font-size: 20px; font-size: 20px;
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
} }
.archive__item-excerpt { .archive__item-excerpt {
@ -50,3 +47,36 @@ a:hover {
text-decoration: underline; text-decoration: underline;
} }
} }
/*
Grid view
========================================================================== */
.grid__item {
margin-bottom: 2em;
.archive__item-excerpt {
display: none;
}
.archive__item-teaser {
border-radius: $border-radius;
}
@include breakpoint($small) {
@include gallery(5 of 10);
.archive__item-teaser {
max-height: 200px;
overflow: hidden;
}
}
@include breakpoint($medium) {
margin-left: 0; // reset before mixin does its thing
margin-right: 0; // reset before mixin does its thing
@include gallery(2.5 of 10);
.archive__item-teaser {
max-height: 120px;
}
.archive__item-excerpt {
display: block;
}
}
}

View file

@ -150,33 +150,6 @@
@include breakpoint($x-large) { @include breakpoint($x-large) {
@include pre(2.5 of 12); @include pre(2.5 of 12);
} }
.grid__item {
margin-bottom: 2em;
.archive__item-excerpt {
display: none;
}
.archive__item-teaser {
border-radius: $border-radius;
}
@include breakpoint($small) {
@include gallery(5 of 10);
.archive__item-teaser {
max-height: 200px;
overflow: hidden;
}
}
@include breakpoint($medium) {
margin-left: 0; // reset before mixin does its thing
margin-right: 0; // reset before mixin does its thing
@include gallery(2.5 of 10);
.archive__item-teaser {
max-height: 120px;
}
.archive__item-excerpt {
display: block;
}
}
}
a { a {
text-decoration: none; text-decoration: none;
} }

File diff suppressed because one or more lines are too long

View file

@ -11,7 +11,7 @@ header:
<h3 class="archive__subtitle">Recent Posts</h3> <h3 class="archive__subtitle">Recent Posts</h3>
{% for post in paginator.posts %} {% for post in paginator.posts %}
{% include archive-list-single.html %} {% include archive-single.html %}
{% endfor %} {% endfor %}
{% include pagination.html %} {% include pagination.html %}