WIP – Refactored post views

assets/js/src/__init.coffee

@@ -2,7 +2,7 @@
 
 $ ->
   window.Uno = Uno =
-    version: '1.3.2'
+    version: '2.0'
 
     cover:
       width: -> $(".cover").width()
@@ -24,12 +24,9 @@ $ ->
       className = document.body.className.split(" ")[0].split("-")[0]
       if className is "" then 'error' else className
 
-    readTime: do ->
-      container = $('.content-wrapper')
-      readingTime = $(".post-reading-time")
-      isPostPage = container.length > 0 and readingTime.length > 0
-      isPostListPage = $(".post.date").length > 0
+    is: (property, value) -> document.body.dataset[property] is value
 
+    readTime: ->
       DateInDays = (selector, cb) ->
         $(selector).each ->
           postDate = $(this).html()
@@ -45,16 +42,19 @@ $ ->
           $(this).mouseout -> $(this).html(postDateInDays)
         cb?()
 
-      if isPostListPage
-        DateInDays ".post.date"
-      else if isPostPage
-        DateInDays '.post.meta > time', ->
-          container.readingTime readingTimeTarget: ".post-reading-time"
+      DateInDays ".post.meta > time"
 
+  ## Main
   el = document.body
-  context = el.dataset.page ?= Uno.context()
-  Uno.cover.collapsed() if context is 'post'
-  FastClick.attach(el) if el.dataset.device isnt 'desktop'
+  el.dataset.page ?= Uno.context()
+
+  Uno.readTime()
+
+  if Uno.is 'page', 'post'
+    $('.main').readingTime readingTimeTarget: ".post.reading-time > span"
+
+  if Uno.is 'device', 'desktop'
+    FastClick.attach(el)
 
   $('#panic-button').click ->
     s = document.createElement('script')

assets/js/src/cover.coffee

@@ -2,18 +2,14 @@
 
 $ ->
   el = document.body
-  isHome = location.pathname is "/"
   isOpen = location.hash is '#open'
-  isDesktop = el.dataset.device is 'desktop'
 
-  if isHome
+  if Uno.is 'page', 'home'
     Uno.loadingBar 'hide'
     Uno.search.form 'hide'
     $(".content-wrapper").hide() unless isOpen
-  else
-    Uno.cover.collapsed()
 
-  if isOpen
+  if isOpen or not Uno.is 'page', 'home'
     Uno.cover.collapsed()
     Uno.search.form 'show'
     $('.social.expanded').removeClass 'expanded'

assets/scss/components/_buttons.scss

@@ -37,9 +37,6 @@
   }
 }
 
-#back-button {
-  margin-left: 3.5%;
-}
 // ------------------------------
 // MOBILE MENU BUTTON
 // ------------------------------

assets/scss/components/_pagination.scss

@@ -1,5 +1,5 @@
 .pagination {
-  margin: 0 0 2.5em 0;
+  margin: 0 0 2.5em;
 }
 
 .posts.index {

assets/scss/components/_post.scss

@@ -1,38 +1,24 @@
-// ------------------------------
-// SINGLE POST LAYOUT
-// ------------------------------
-
-.post-comments {
-  padding: 60px 0;
-  border-top: 1px solid $gray-light;
-}
-// ------------------------------
-// SINGLE POST METAß
-// ------------------------------
-
-.post-meta {
-  color: darken($gray, 2%);
-  text-align: center;
-}
-.post-meta__author {
-  margin-left: 1.5em;
-}
-.post-meta__avatar {
-  display: inline-block;
-  width: 22px;
-  height: 22px;
-  margin: 0 .3em .4em 0;
-  border: none;
-  box-shadow: none;
-}
-.post-meta__date,
-.post-meta__read {
-  font-size: .85rem;
+.posts {
+  padding: 0;
+  margin: 0;
+  text-align: left;
+  list-style-type: none;
+  > li {
+    > h2 {
+      margin-bottom: 1rem;
+      font-size: 1.5em;
+      line-height: 1.3em;
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+    > p {
+      margin-bottom: 1rem;
+      font-size: .9em;
+      color: $gray-dark;
+    }
+  }
 }
-// ------------------------------
-// SINGLE POST STYLES
-// ------------------------------
-
 .post {
   img {
     max-width: 100%;
@@ -49,45 +35,65 @@
     margin: 2em 0;
     border-top: 1px solid $gray-light;
   }
-}
-// ------------------------------
-// POST LIST
-// ------------------------------
-
-.posts {
-  padding: 0;
-  margin: 0;
-  text-align: left;
-  list-style-type: none;
-  > li {
-    margin: 0 0 2.2em;
-
-    > h2 {
-      margin-top: 0;
-      margin-bottom: .2em;
-      font-size: 1.5em;
-      line-height: 1.3em;
+  > header {
+    text-align: center;
+  }
+  &.meta {
+    margin: .7em 0;
+    font-size: .85rem;
+    color: darken($gray, 2%);
+  }
+  &.tags {
+    font-size: .85em;
+    color: darken($gray, 2%);
+    a {
+      padding: .166666666666667rem .25rem;
+      font-size: .3rem;
+      color: darken($primary-color,
+      100%);
+      color: white;
+      text-transform: uppercase;
+      background-color: rgba($primary-color,
+      .7);
+      border-radius: .25rem;
+      &:hover {
+        background-color: rgba($primary-color, 1);
+      }
     }
+  }
 
-    > p {
-      margin: 0;
-      font-size: .9em;
-      color: $gray-dark;
+  &.author {
+    margin-left: 1.2em;
+
+    img {
+      display: inline-block;
+      vertical-align:middle;
+      height: 22px;
+      border: none;
+      box-shadow: none;
     }
   }
-}
 
-.post {
-  &.meta {
-    display: block;
-    margin: .7em 0 0 0;
-    font-size: .9em;
-    color: darken($gray, 2%);
+  &.comments {
+    padding: 60px 0;
+    border-top: 1px solid $gray-light;
   }
 }
 
-.post-button {
+#back-button {
   position: absolute;
   left: 0;
   top: 30px;
+  margin-left: 3.5%;
+}
+
+#post-image {
+  max-width: 100%;
+  margin-top: 1rem;
+  margin-bottom: 6%;
+}
+
+#post-title {
+  margin-bottom: 4rem;
+  text-align: center;
 }

assets/scss/modules/_global.scss

@@ -22,13 +22,12 @@ body {
   background: lighten($primary-color, 36%);
 }
 // ------------------------------
-// TYPOGRAPHYf
+// TYPOGRAPHY
 // ------------------------------
 
 a {
   color: $link-color;
   text-decoration: none;
-  // TODO
   &:hover {
     color: $hover-color;
     transition: .5s;
@@ -152,28 +151,25 @@ code:hover,
 pre:hover {
   color: $gray-darkest;
 }
-.date,
-.time,
-.author,
-.tags {
-  font-size: .8em;
-  color: darken($gray,
-  2%);
-  a {
-    padding: .166666666666667rem .25rem;
-    font-size: .3rem;
-    color: darken($primary-color,
-    100%);
-    color: white;
-    text-transform: uppercase;
-    background-color: rgba($primary-color,
-    .7);
-    border-radius: .25rem;
-    &:hover {
-      background-color: rgba($primary-color, 1);
-    }
-  }
-}
+// .date,
+// .time,
+// .author,
+// .tags {
+//   font-size: .85em;
+//   color: darken($gray, 2%);
+//   a {
+//     padding: .166666666666667rem .25rem;
+//     font-size: .3rem;
+//     color: darken($primary-color, 100%);
+//     color: white;
+//     text-transform: uppercase;
+//     background-color: rgba($primary-color, .7);
+//     border-radius: .25rem;
+//     &:hover {
+//       background-color: rgba($primary-color, 1);
+//     }
+//   }
+// }
 
 .intro {
   font-family: $serif-font;

assets/scss/modules/_helpers.scss

@@ -17,7 +17,7 @@
   }
   &.post {
     width: 30%;
-    margin: 2.2em 0 2.1em 0;
+    margin: 1.7rem 0;
     border-top: 1px solid $gray-light;
   }
 }

assets/scss/modules/_variables.scss

@@ -43,5 +43,5 @@ $font-weight-bold    : 700;
 /* OTHERS */
 
 $animation-ease        : cubic-bezier(.02, .01, .47, 1);
-$aside-width-collapsed : 28%;
+$aside-width-collapsed : 360px;
 $aside-animation-time  : 400ms;

assets/scss/uno.scss

@@ -30,7 +30,6 @@
 @import 'components/post.scss';
 @import 'components/forms.scss';
 @import 'components/search.scss';
-@import 'components/images.scss';
 @import 'components/effects.scss';
 @import 'components/loading.scss';
 @import 'components/media-queries.scss';

index.hbs

@@ -7,11 +7,8 @@
     </h2>
     <p>{{excerpt}}&hellip;</p>
     <div class="post meta">
-      <time datetime="{{date format="DD MMM YYYY"}}" class="post date">{{date format="DD MMM YYYY"}}
-      </time>
-      <span class="post tags">
-      {{tags prefix="on " separator=" "}}
-      </span>
+      <time datetime="{{date format="DD MMM YYYY"}}">{{date format="DD MMM YYYY"}}</time>
+      <span class="post tags">{{tags prefix="on " separator=" "}}</span>
     </div>
     <hr class="divider post" />
   </li>

post.hbs

@@ -2,22 +2,26 @@
 
 {{#post}}
 
-  <article class="{{post_class}} post-container post-container--single">
-
-    <header class="post-header">
-      <div class="post-meta">
-        <time datetime="{{date format="DD MMM YYYY"}}" class="post-meta__date date">{{date format="DD MMM YYYY"}}</time>
-        <a id="back-button" class="post-button btn square btn-small" href="javascript:history.back()">« Back</a>
-        <span class="post-meta__tags tags">{{tags prefix="in " separator=" "}}</span>
-        {{!-- <span class="post-meta__author author"><img src="{{author.image}}" alt="profile image for {{author.name}}" class="avatar post-meta__avatar" /> by {{author.name}} – 7 mins to read</span> --}}
-        <span class="post-meta__read"> – <span class="post-reading-time"></span> read.</span>
-
+  <article class="{{post_class}}">
+    <header>
+      <a id="back-button" class="btn small square" href="javascript:history.back()">« Back</a>
+      <div class="post meta">
+        <time datetime="{{date format="DD MMM YYYY"}}">{{date format="DD MMM YYYY"}}</time>
+        <span class="post tags">{{tags prefix="in " separator=" "}}</span>
+        {{!-- <span class="post author">
+          <img src="{{author.image}}" alt="profile image for {{author.name}}"/> by {{author.name}}
+        </span> --}}
+        <span class="post reading-time"> – <span></span> read.</span>
       </div>
 
       {{#if image}}
-      <a href={{url}}><center><img id="feature-image" src={{image}} alt="{{{title}}}"></center><h1 id="feature-title" class="post-title">{{{title}}}.</h1></a>
+      <a href={{url}}><img id="post-image" src={{image}} alt="{{{title}}}">
+        <h1 id="feature-title" class="post-title">{{{title}}}.</h1>
+      </a>
       {{else}}
-      <a href={{url}}><h1 id="feature-title" class="post-title">{{{title}}}.</h1></a>
+      <a href={{url}}>
+        <h1 id="feature-title" class="post-title">{{{title}}}.</h1>
+      </a>
       {{/if}}
 
     </header>