feat: add image component, update article-list component

jasonephraim · Sep 4, 2018 · f1112ef · f1112ef
1 parent e2e76bb
commit f1112ef
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 9 deletions.
diff --git a/_includes/article-list.html b/_includes/article-list.html
@@ -19,15 +19,32 @@
   {%- for _article in _sorted_list -%}
 
     {%- include snippets/prepend-baseurl.html path=_article.url -%}
-    {%- assign _href = __return -%}
+    {%- assign _article_url = __return -%}
 
     {%- include snippets/locale-to-string.html locale=site.data.locale.READMORE -%}
     {%- assign _locale_readmore = __return -%}
 
     {%- if include.type == 'common' -%}
-      <article class="item" itemscope itemtype="http://schema.org/BlogPosting">
+      {%- if include.article_type == 'BlogPosting' -%}
+        <article class="item" itemscope itemtype="http://schema.org/BlogPosting">
+      {%- else -%}
+        <article class="item">
+      {%- endif -%}
+        {%- if _article.cover and include.show_cover-%}
+          {%- include snippets/get-nav-url.html path=_article.cover -%}
+          {%- assign _article_cover = __return -%}
+          <div class="item__image">
+          {%- if include.cover_size == 'lg' -%}
+            <img class="image image--lg" src="{{ _article_cover }}" />
+          {%- elsif include.cover_size == 'sm' -%}
+            <img class="image image--sm" src="{{ _article_cover }}" />
+          {%- else -%}
+            <img class="image" src="{{ _article_cover }}" />
+          {%- endif -%}
+          </div>
+        {%- endif -%}
         <div class="item__content">
-          <header><h2 itemprop="headline" class="item__header"><a href="{{ _href }}">{{ _article.title }}</a></h2></header>
+          <header><h2 itemprop="headline" class="item__header"><a href="{{ _article_url }}">{{ _article.title }}</a></h2></header>
           <div class="item__description">
             {%- if _article.excerpt and include.show_excerpt -%}
               <div class="article__content" itemprop="description articleBody">
@@ -38,9 +55,13 @@
                 {%- endif -%}
               </div>
             {%- endif -%}
-            <p><a href="{{ _href }}">{{ _locale_readmore }}</a></p>
+            {%- if include.show_readmore -%}
+              <p><a href="{{ _article_url }}">{{ _locale_readmore }}</a></p>
+            {%- endif -%}
           </div>
-          {%- include article-info.html article=_article show_pageview=true -%}
+          {%- if include.show_info -%}
+            {%- include article-info.html article=_article show_pageview=true -%}
+          {%- endif -%}
         </div>
       </article>
 
@@ -65,7 +86,7 @@
       {%- endif -%}
       {%- include snippets/locale-to-string.html locale=site.data.locale.ARTICLE_LIST_DATE_FORMAT -%}
       <li class="item" itemscope itemtype="http://schema.org/BlogPosting" data-tags="{{ _tags }}">
-        <div class="item__content"><span class="item__meta">{{ _article.date | date: __return }}</span><a itemprop="headline" class="item__header" href="{{ _href }}">{{ _article.title }}</a></div>
+        <div class="item__content"><span class="item__meta">{{ _article.date | date: __return }}</span><a itemprop="headline" class="item__header" href="{{ _article_url }}">{{ _article.title }}</a></div>
       </li>
     {%- endif -%}
 

diff --git a/_layouts/home.html b/_layouts/home.html
@@ -8,7 +8,8 @@
 show_title: false
 ---
 <div class="layout--home">
-  {%- include article-list.html articles=paginator.posts type='common' show_excerpt=true excerpt_type=site.excerpt_type -%}
+  {%- include article-list.html articles=paginator.posts type='common' article_type='BlogPosting'
+    show_excerpt=true excerpt_type=site.excerpt_type show_readmore=true show_info=true -%}
   {%- include paginator.html -%}
 </div>
 <script>

diff --git a/_sass/common/_variables.scss b/_sass/common/_variables.scss
@@ -135,6 +135,14 @@ $button: (
   transition:             all .2s ease-in-out
 );
 
+$image: (
+  width-xl:  20em,
+  width-lg:  16rem,
+  width:     12rem,
+  width-sm:  8rem,
+  width-xs:  4rem
+);
+
 $menu: (
   horizontal-spacer:      1,
   horizontal-item-vertical-spacer: 1

diff --git a/_sass/common/components/_image.scss b/_sass/common/components/_image.scss
@@ -0,0 +1,19 @@
+.image {
+  max-width: 100%;
+  @extend .image--md;
+}
+.image--xl {
+  width: map-get($image, width-xl);
+}
+.image--lg {
+  width: map-get($image, width-lg);
+}
+.image--md {
+  width: map-get($image, width);
+}
+.image--sm {
+  width: map-get($image, width-sm);
+}
+.image--xs {
+  width: map-get($image, width-xs);
+}
diff --git a/_sass/common/components/_item.scss b/_sass/common/components/_item.scss
@@ -1,7 +1,7 @@
 .item {
   @include flexbox();
   @include media-breakpoint-down(md) {
-    @include flex-direction(row);
+    @include flex-direction(column);
   }
   &:not(:last-child) {
     margin-bottom: map-get($base, vertical-space);
@@ -18,7 +18,7 @@
 
 .item__content {
   @include flex(1);
-  max-width: 100%;
+  min-width: 0;
 }
 
 .item__header {

diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -27,6 +27,7 @@
     "common/classes",
     "common/reset",
     "common/components/button",
+    "common/components/image",
     "common/components/card",
     "common/components/hero",
     "common/components/menu",