Merge pull request #67 from Voog/61_prev_next_article

"Blog article" layout prev / next article links.
Voog · Oct 26, 2016 · e6c5d9e · e6c5d9e
2 parents 09faca7 + 18e00db
commit e6c5d9e
Show file tree

Hide file tree

Showing 5 changed files with 203 additions and 25 deletions.
diff --git a/layouts/blog_article.tpl b/layouts/blog_article.tpl
@@ -28,6 +28,30 @@
         <main class="content" role="main" data-search-indexing-allowed="true">
           {% include "post-box" with "article" %}
 
+          {% if article.older or article.newer %}
+            <div class="post-nav">
+              <div class="post-nav-inner">
+                {% if article.older %}
+                  <a class="post-nav-link post-nav-link-older" href="{{ article.older.url }}">
+                    <div class="post-nav-link-inner">
+                      <div class="post-nav-direction">{{ "previous" | lc }}</div>
+                      <div class="post-nav-title">{{ article.older.title }}</div>
+                    </div>
+                  </a>
+                {% endif %}
+
+                {% if article.newer %}
+                  <a class="post-nav-link post-nav-link-newer" href="{{ article.newer.url }}">
+                    <div class="post-nav-link-inner">
+                      <div class="post-nav-direction">{{ "next" | lc }}</div>
+                      <div class="post-nav-title">{{ article.newer.title }}</div>
+                    </div>
+                  </a>
+                {% endif %}
+              </div>
+            </div>
+          {% endif %}
+
           <section id="comments" class="comments content-formatted" data-search-indexing-allowed="false">
             {% if article.comments_count > 0 %}
               <h2 class="comments-title">{{ "comments_for_count" | lc }}: <span class="edy-site-blog-comments-count">{{ article.comments_count }}</span></h2>

diff --git a/manifest.json b/manifest.json
@@ -33,27 +33,6 @@
       "layout_name": "blog_article",
       "title": "Blog article"
     },
-    {
-      "content_type": "component",
-      "component": true,
-      "file": "components/post-box.tpl",
-      "layout_name": "post-box",
-      "title": "post-box"
-    },
-    {
-      "content_type": "component",
-      "component": true,
-      "file": "components/footer.tpl",
-      "layout_name": "footer",
-      "title": "footer"
-    },
-    {
-      "content_type": "component",
-      "component": true,
-      "file": "components/header.tpl",
-      "layout_name": "header",
-      "title": "header"
-    },
     {
       "content_type": "component",
       "component": true,
@@ -106,9 +85,9 @@
     {
       "content_type": "component",
       "component": true,
-      "file": "components/comment-form.tpl",
-      "layout_name": "comment-form",
-      "title": "comment-form"
+      "file": "components/post-box.tpl",
+      "layout_name": "post-box",
+      "title": "post-box"
     },
     {
       "content_type": "component",
@@ -200,6 +179,27 @@
       "file": "components/topbar.tpl",
       "layout_name": "topbar",
       "title": "topbar"
+    },
+    {
+      "content_type": "component",
+      "component": true,
+      "file": "components/comment-form.tpl",
+      "layout_name": "comment-form",
+      "title": "comment-form"
+    },
+    {
+      "content_type": "component",
+      "component": true,
+      "file": "components/footer.tpl",
+      "layout_name": "footer",
+      "title": "footer"
+    },
+    {
+      "content_type": "component",
+      "component": true,
+      "file": "components/header.tpl",
+      "layout_name": "header",
+      "title": "header"
     }
   ],
   "assets": [

diff --git a/sources/stylesheets/_blog-and-article.scss b/sources/stylesheets/_blog-and-article.scss
@@ -91,6 +91,84 @@
   }
 }
 
+.post-nav {
+  margin-top: 50px;
+}
+
+.post-nav-inner {
+  @media screen and (min-width: $mobile-1 + 1) {
+    display: flex;
+  }
+}
+
+.post-nav-link {
+  position: relative;
+  display: block;
+  flex: 1;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  color: currentColor;
+  text-decoration: none;
+
+  &:hover {
+    .post-nav-direction {
+      opacity: 1;
+    }
+
+    .post-nav-title {
+      opacity: 1;
+    }
+  }
+
+  &:nth-child(2) {
+    &::before {
+      @media screen and (max-width: $mobile-1) {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        display: block;
+        border-top-color: currentColor;
+        border-top-style: solid;
+        border-top-width: 1px;
+        content: '';
+        opacity: .2;
+      }
+    }
+  }
+
+  @media screen and (max-width: $mobile-1) {
+    text-align: center;
+  }
+}
+
+.post-nav-link-older {
+  @media screen and (min-width: $mobile-1 + 1) {
+    padding-right: 20px;
+  }
+}
+
+.post-nav-link-newer {
+  @media screen and (min-width: $mobile-1 + 1) {
+    padding-left: 20px;
+    text-align: right;
+  }
+}
+
+.post-nav-direction {
+  font-size: 13px;
+  letter-spacing: .2em;
+  text-transform: uppercase;
+  opacity: .3;
+}
+
+.post-nav-title {
+  margin-top: 6px;
+  font-size: 18px;
+  opacity: .7;
+}
+
 // Style rules for the blog listing view only
 .blog-page {
   .post {

diff --git a/stylesheets/main.css b/stylesheets/main.css
@@ -1089,6 +1089,82 @@ body.dark-background {
   color: white;
 }
 
+.post-nav {
+  margin-top: 50px;
+}
+
+@media screen and (min-width: 481px) {
+  .post-nav-inner {
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+  }
+}
+
+.post-nav-link {
+  position: relative;
+  display: block;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  color: currentColor;
+  text-decoration: none;
+}
+.post-nav-link:hover .post-nav-direction {
+  opacity: 1;
+}
+.post-nav-link:hover .post-nav-title {
+  opacity: 1;
+}
+@media screen and (max-width: 480px) {
+  .post-nav-link:nth-child(2)::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: block;
+    border-top-color: currentColor;
+    border-top-style: solid;
+    border-top-width: 1px;
+    content: '';
+    opacity: .2;
+  }
+}
+@media screen and (max-width: 480px) {
+  .post-nav-link {
+    text-align: center;
+  }
+}
+
+@media screen and (min-width: 481px) {
+  .post-nav-link-older {
+    padding-right: 20px;
+  }
+}
+
+@media screen and (min-width: 481px) {
+  .post-nav-link-newer {
+    padding-left: 20px;
+    text-align: right;
+  }
+}
+
+.post-nav-direction {
+  font-size: 13px;
+  letter-spacing: .2em;
+  text-transform: uppercase;
+  opacity: .3;
+}
+
+.post-nav-title {
+  margin-top: 6px;
+  font-size: 18px;
+  opacity: .7;
+}
+
 .blog-page .post {
   margin-bottom: 50px;
   padding-bottom: 50px;