Merge pull request #116 from ppoffice/dev

Change to timeline layout for non-index pages

layout/archive.ejs

@@ -1 +1,32 @@
-<%- partial('common/archive', {type: 'archive', index: true}) %>
+<div class="timeline timeline-wrap">
+    <% var last;
+    page.posts.each(function(post, i) {
+        var year = post.date.year();
+        if (last != year) {
+            last = year; %>
+            <div class="timeline-row timeline-row-major">
+                <span class="node"><i class="fa fa-calendar"></i></span>
+                <h1 class="title"><%= year %></h1>
+            </div>
+        <% } %>
+        <div class="timeline-row">
+            <span class="node"></span>
+            <div class="content">
+                <%- partial('common/post/title', { post: post, index: true, class_name: 'timeline-article-title' }) %>
+                <div class="article-meta">
+                    <%- partial('common/post/date', { post: post, class_name: 'article-date', date_format: null }) %>
+                    <%- partial('common/post/category', { post: post }) %>
+                    <%- partial('common/post/tag', { post: post }) %>
+                </div>
+            </div>
+        </div>
+    <% }); %>
+</div>
+<% if (page.total > 1) { %>
+    <nav id="page-nav">
+        <%- paginator({
+            prev_text: '&laquo; ' + __('nav.prev'),
+            next_text: __('nav.next') + ' &raquo;'
+        }) %>
+    </nav>
+<% } %>

layout/category.ejs

@@ -1 +1 @@
-<%- partial('common/archive', {type: 'category', index: true}) %>
+<%- partial('common/timeline', { type: 'category' }) %>

layout/common/archive.ejs

@@ -1,60 +0,0 @@
-<% switch (type) {
-        case 'archive':
-        var last;
-        page.posts.each(function(post, i) {
-            var year = post.date.year();
-            if (last != year) {
-                if (last != null) { %>
-                    </div></section>
-                <% }
-                last = year; %>
-                <div class="archive-year-wrap">
-                    <a href="<%- url_for('archives/' + year) %>" class="archive-year"><%= year %></a>
-                </div>
-                <section class="archives-wrap">
-                    <div class="archives">
-            <% } %>
-            <%- partial('summary', {post: post, archive: true}) %>
-        <% });
-        if (page.posts.length) { %>
-        </div></section>
-    <% }
-        break;
-    case 'category': %>
-        <section class="archives-wrap">
-        <div class="archive-category-wrap">
-            <span class="archive-category"><%= page.category %></span>
-        </div>
-        <div class="archives">
-        <% page.posts.each(function (post, i) { %>
-            <%- partial('summary', {post: post, archive: false}) %>
-        <% }); %>
-        </div></section>
-        <%
-        break;
-    case 'tag': %>
-        <section class="archives-wrap">
-        <div class="archive-tag-wrap">
-            <span class="archive-tag">#<%= page.tag %></span>
-        </div>
-        <div class="archives">
-        <% page.posts.each(function (post, i) { %>
-            <%- partial('summary', {post: post, archive: false}) %>
-        <% }); %>
-        </div></section>
-        <%
-        break;
-    default:
-        page.posts.each(function(post) { %>
-            <%- partial('article', { post: post, index: true }) %>
-        <% })
-        break;
-}
-if (page.total > 1) { %>
-    <nav id="page-nav">
-        <%- paginator({
-            prev_text: '&laquo; ' + __('nav.prev'),
-            next_text: __('nav.next') + ' &raquo;'
-        }) %>
-    </nav>
-<% } %>

layout/common/article.ejs

@@ -15,8 +15,8 @@
             </header>
         <% } %>
         <div class="article-entry" itemprop="articleBody">
-        <% if (index) { %>
+        <% if (index && post.excerpt) { %>
-            <p><%- excerpt(post) %></p>
+            <p><%- post.excerpt %></p>
             <p class="article-more-link">
                 <a href="<%- url_for(post.path) %>#more"><%= __('article.more') %></a>
             </p>

layout/common/summary.ejs

@@ -1,23 +0,0 @@
-<article class="archive-article archive-type-summary">
-    <% if(theme.customize.thumbnail == true) { %>
-    <div class="archive-article-thumbnail">
-        <%- partial('thumbnail.ejs', { post: post }) %>
-    </div>
-    <% } %>
-    <div class="archive-article-content">
-        <header class="archive-article-header">
-            <%- partial('post/title', { class_name: 'archive-article-title' }) %>
-            <div class="article-meta">
-                <%- partial('post/date', { class_name: 'article-date', date_format: null }) %>
-                <%- partial('post/category') %>
-                <%- partial('post/tag') %>
-            </div>
-        </header>
-        <div class="article-entry">
-            <p><%- excerpt(post) %></p>
-            <p class="article-more-link">
-                <a href="<%- url_for(post.path) %>#more"><%= __('article.more') %></a>
-            </p>
-        </div>
-    </div>
-</article>

layout/common/timeline.ejs

@@ -0,0 +1,39 @@
+<%
+    switch (type) {
+        case 'category':
+            title = page.category;
+            icon = 'folder';
+            break;
+        case 'tag':
+            title = '#' + page.tag;
+            icon = 'tag';
+            break;
+    }
+%>
+<div class="timeline timeline-wrap">
+    <div class="timeline-row timeline-row-major">
+        <span class="node"><i class="fa fa-<%= icon %>"></i></span>
+        <h1 class="title"><%= title %></h1>
+    </div>
+    <% page.posts.each(function (post, i) { %>
+        <div class="timeline-row">
+            <span class="node"></span>
+            <div class="content">
+                <%- partial('post/title', { post: post, index: true, class_name: 'timeline-article-title' }) %>
+                <div class="article-meta">
+                    <%- partial('post/date', { post: post, class_name: 'article-date', date_format: null }) %>
+                    <%- partial('post/category', { post: post }) %>
+                    <%- partial('post/tag', { post: post }) %>
+                </div>
+            </div>
+        </div>
+    <% }); %>
+</div>
+<% if (page.total > 1) { %>
+    <nav id="page-nav">
+        <%- paginator({
+            prev_text: '&laquo; ' + __('nav.prev'),
+            next_text: __('nav.next') + ' &raquo;'
+        }) %>
+    </nav>
+<% } %>

layout/index.ejs

@@ -1 +1,11 @@
-<%- partial('common/archive', {type: '', index: true}) %>
+<% page.posts.each(function(post) { %>
+    <%- partial('common/article', { post: post, index: true }) %>
+<% });
+if (page.total > 1) { %>
+    <nav id="page-nav">
+        <%- paginator({
+            prev_text: '&laquo; ' + __('nav.prev'),
+            next_text: __('nav.next') + ' &raquo;'
+        }) %>
+    </nav>
+<% } %>

layout/tag.ejs

@@ -1 +1 @@
-<%- partial('common/archive', {type: 'tag', index: true}) %>
+<%- partial('common/timeline', { type: 'tag' }) %>

source/css/_partial/timeline.styl

@@ -0,0 +1,64 @@
+.timeline-wrap
+    border-left: 4px solid #e7e7e7
+    margin: 40px 20px 40px 40px
+    @media mq-mini
+        margin: 40px 20px 40px 30px
+    @media mq-mobile
+        margin: 40px 20px 40px 30px
+
+.timeline-row
+    clearfix()
+    margin: 20px 0
+    .node,
+    .title
+        float: left
+    .node
+        width: 12px
+        color: white
+        height: 12px
+        border-radius: 50%
+        margin: 11px 0 0 -8px
+        display: inline-block
+        background-color: #38b7ea
+    .content
+        margin-left: 25px
+        position: relative
+        background-color: white
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)
+        &:after,
+        &:before
+            content: ''
+            position: absolute
+            display: inline-block
+        &:after
+            top: 10px
+            left: -14px
+            border: 7px solid transparent
+            border-right-color: white
+        &:before
+            top: 9px
+            left: -16px
+            border: 8px solid transparent
+            border-right-color: rgba(0, 0, 0, 0.05)
+        h1,
+        .article-meta
+            padding: 10px
+        h1
+            font-size: 16px
+            a
+                @extend $link-dark
+        .article-meta
+            border-top: 1px solid #f7f7f7
+            background-color: rgba(244, 246, 247, 0.2)
+
+.timeline-row-major
+    .node
+        width: 14px
+        height: 14px
+        font-size: 14px
+        margin: 0 0 0 -17px
+        padding: 6px 8px 10px
+    .title
+        font-size: 18px
+        margin-left: 15px
+        line-height: 30px

source/css/style.styl

@@ -80,6 +80,7 @@ code
 @import "_partial/article"
 @import "_partial/comment"
 @import "_partial/archive"
+@import "_partial/timeline"
 @import "_partial/footer"
 @import "_partial/sidebar"
 @import "_highlight/index"