Permalink
Browse files

WIP – Refactored post views

  • Loading branch information...
Kikobeats committed Feb 21, 2015
1 parent 44801e1 commit db930bbbb7cbb3e43aa1453acabe26f8e1383432
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

Large diffs are not rendered by default.

Oops, something went wrong.
View
No changes.
View
No changes.
View
No changes.
View
No changes.
View
No changes.
View
No changes.
View
No changes.
View
No changes.
View
No changes.
View
No changes.
View
No changes.
View
No changes.
View
No changes.
View
No changes.
View
No changes.
View
No changes.
View
0 assets/img/apple-touch-icon.png 100644 → 100755
No changes.
View
0 assets/img/astronaut.png 100644 → 100755
No changes.
View
0 assets/img/browserconfig.xml 100644 → 100755
No changes.
View
0 assets/img/cover.jpg 100644 → 100755
No changes.
View
0 assets/img/favicon-160x160.png 100644 → 100755
No changes.
View
0 assets/img/favicon-16x16.png 100644 → 100755
No changes.
View
0 assets/img/favicon-192x192.png 100644 → 100755
No changes.
View
0 assets/img/favicon-32x32.png 100644 → 100755
No changes.
View
0 assets/img/favicon-96x96.png 100644 → 100755
No changes.
View
0 assets/img/favicon.ico 100644 → 100755
No changes.
View
0 assets/img/glitch.png 100644 → 100755
No changes.
View
0 assets/img/mstile-144x144.png 100644 → 100755
No changes.
View
0 assets/img/mstile-150x150.png 100644 → 100755
No changes.
View
0 assets/img/mstile-310x150.png 100644 → 100755
No changes.
View
0 assets/img/mstile-310x310.png 100644 → 100755
No changes.
View
0 assets/img/mstile-70x70.png 100644 → 100755
No changes.
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

Large diffs are not rendered by default.

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
134 assets/scss/components/_post.scss 100644 → 100755
@@ -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
2 assets/scss/modules/_helpers.scss 100644 → 100755
@@ -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
0 assets/scss/modules/_mixins.scss 100644 → 100755
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;
View
@@ -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
0 partials/google-analytics.hbs 100644 → 100755
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.