Permalink
Browse files

WIP – Refactored post views

  • Loading branch information...
1 parent 44801e1 commit db930bbbb7cbb3e43aa1453acabe26f8e1383432 @Kikobeats committed Feb 21, 2015
Showing with 130 additions and 144 deletions.
  1. 0 .bowerrc
  2. 0 .editorconfig
  3. 0 .gitignore
  4. 0 LICENSE.md
  5. 0 README.md
  6. 0 RODAMAP.md
  7. +1 −1 assets/css/uno.css
  8. 0 assets/fonts/foundation-icons/.fontcustom-data
  9. 0 assets/fonts/foundation-icons/foundation-icons.css
  10. BIN assets/fonts/foundation-icons/foundation-icons.eot
  11. 0 assets/fonts/foundation-icons/foundation-icons.svg
  12. BIN assets/fonts/foundation-icons/foundation-icons.ttf
  13. BIN assets/fonts/foundation-icons/foundation-icons.woff
  14. BIN assets/img/apple-touch-icon-114x114.png
  15. BIN assets/img/apple-touch-icon-120x120.png
  16. BIN assets/img/apple-touch-icon-144x144.png
  17. BIN assets/img/apple-touch-icon-152x152.png
  18. BIN assets/img/apple-touch-icon-180x180.png
  19. BIN assets/img/apple-touch-icon-57x57.png
  20. BIN assets/img/apple-touch-icon-60x60.png
  21. BIN assets/img/apple-touch-icon-72x72.png
  22. BIN assets/img/apple-touch-icon-76x76.png
  23. BIN assets/img/apple-touch-icon-precomposed.png
  24. BIN assets/img/apple-touch-icon.png
  25. BIN assets/img/astronaut.png
  26. 0 assets/img/browserconfig.xml
  27. BIN assets/img/cover.jpg
  28. BIN assets/img/favicon-160x160.png
  29. BIN assets/img/favicon-16x16.png
  30. BIN assets/img/favicon-192x192.png
  31. BIN assets/img/favicon-32x32.png
  32. BIN assets/img/favicon-96x96.png
  33. BIN assets/img/favicon.ico
  34. BIN assets/img/glitch.png
  35. BIN assets/img/mstile-144x144.png
  36. BIN assets/img/mstile-150x150.png
  37. BIN assets/img/mstile-310x150.png
  38. BIN assets/img/mstile-310x310.png
  39. BIN assets/img/mstile-70x70.png
  40. +14 −14 assets/js/src/__init.coffee
  41. +2 −6 assets/js/src/cover.coffee
  42. 0 assets/js/src/search.coffee
  43. 0 assets/js/tdfw.js
  44. +2 −2 assets/js/uno.js
  45. +0 −3 assets/scss/components/_buttons.scss
  46. 0 assets/scss/components/_effects.scss
  47. +0 −9 assets/scss/components/_images.scss
  48. 0 assets/scss/components/_loading.scss
  49. 0 assets/scss/components/_page-error.scss
  50. +1 −1 assets/scss/components/_pagination.scss
  51. +70 −64 assets/scss/components/_post.scss
  52. 0 assets/scss/components/_search.scss
  53. +20 −24 assets/scss/modules/_global.scss
  54. +1 −1 assets/scss/modules/_helpers.scss
  55. 0 assets/scss/modules/_mixins.scss
  56. +1 −1 assets/scss/modules/_variables.scss
  57. +0 −1 assets/scss/uno.scss
  58. 0 bower.json
  59. 0 gulpfile.coffee
  60. +2 −5 index.hbs
  61. 0 package.json
  62. 0 partials/footer.hbs
  63. 0 partials/google-analytics.hbs
  64. 0 partials/links.hbs
  65. 0 partials/meta.hbs
  66. 0 partials/search.hbs
  67. 0 partials/social.hbs
  68. +16 −12 post.hbs
  69. 0 tag.hbs
View
0 .bowerrc 100644 → 100755
No changes.
View
0 .editorconfig 100644 → 100755
No changes.
View
0 .gitignore 100644 → 100755
No changes.
View
0 LICENSE.md 100644 → 100755
No changes.
View
0 README.md 100644 → 100755
No changes.
View
0 RODAMAP.md 100644 → 100755
No changes.
View
Oops, something went wrong.
View
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
0 assets/img/astronaut.png 100644 → 100755
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
0 assets/img/browserconfig.xml 100644 → 100755
No changes.
View
0 assets/img/cover.jpg 100644 → 100755
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
0 assets/img/favicon-16x16.png 100644 → 100755
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
0 assets/img/favicon-32x32.png 100644 → 100755
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
0 assets/img/favicon-96x96.png 100644 → 100755
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
0 assets/img/favicon.ico 100644 → 100755
No changes.
View
0 assets/img/glitch.png 100644 → 100755
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
0 assets/img/mstile-70x70.png 100644 → 100755
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
28 assets/js/src/__init.coffee 100644 → 100755
@@ -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')
View
8 assets/js/src/cover.coffee 100644 → 100755
@@ -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'
View
0 assets/js/src/search.coffee 100644 → 100755
No changes.
View
0 assets/js/tdfw.js 100644 → 100755
No changes.
View
4 assets/js/uno.js 100644 → 100755
Oops, something went wrong.
@@ -37,9 +37,6 @@
}
}
-#back-button {
- margin-left: 3.5%;
-}
// ------------------------------
// MOBILE MENU BUTTON
// ------------------------------
View
No changes.
@@ -1,9 +0,0 @@
-#feature-image {
- max-width: 100%;
- margin-top: 1rem;
- margin-bottom: 6%;
-}
-#feature-title {
- margin-bottom: 4rem;
- text-align: center;
-}
View
No changes.
View
No changes.
View
@@ -1,5 +1,5 @@
.pagination {
- margin: 0 0 2.5em 0;
+ margin: 0 0 2.5em;
}
.posts.index {
View
@@ -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;
}
View
No changes.
@@ -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;
View
@@ -17,7 +17,7 @@
}
&.post {
width: 30%;
- margin: 2.2em 0 2.1em 0;
+ margin: 1.7rem 0;
border-top: 1px solid $gray-light;
}
}
View
No changes.
@@ -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;
@@ -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';
View
0 bower.json 100644 → 100755
No changes.
View
0 gulpfile.coffee 100644 → 100755
No changes.
View
@@ -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>
View
0 package.json 100644 → 100755
No changes.
View
0 partials/footer.hbs 100644 → 100755
No changes.
View
No changes.
View
0 partials/links.hbs 100644 → 100755
No changes.
View
0 partials/meta.hbs 100644 → 100755
No changes.
View
0 partials/search.hbs 100644 → 100755
No changes.
View
0 partials/social.hbs 100644 → 100755
No changes.
View
@@ -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>
View
0 tag.hbs 100644 → 100755
No changes.

0 comments on commit db930bb

Please sign in to comment.