diff --git a/app/views/posts/show.html.haml b/app/views/posts/show.html.haml index a376bc2d5..d32cc8768 100644 --- a/app/views/posts/show.html.haml +++ b/app/views/posts/show.html.haml @@ -5,12 +5,11 @@ - content_for :page_title do = post_page_title @post +#post-author-header + = person_image_tag @post.author + = @post.author.name -#main_stream -%br -%br -%br +#post-content -#post-nav - = link_to 'prev', post_path(@post.id-1) - = link_to 'next', post_path(@post.id+1) += link_to image_tag('arrow-left.png'), post_path(@post.id-1), :class => 'nav-arrow left' += link_to image_tag('arrow-right.png'), post_path(@post.id+1), :class => 'nav-arrow right' diff --git a/public/images/arrow-left.png b/public/images/arrow-left.png new file mode 100644 index 000000000..cb9584ff6 Binary files /dev/null and b/public/images/arrow-left.png differ diff --git a/public/images/arrow-right.png b/public/images/arrow-right.png new file mode 100644 index 000000000..29e1259d0 Binary files /dev/null and b/public/images/arrow-right.png differ diff --git a/public/javascripts/app/router.js b/public/javascripts/app/router.js index 450d4d9bc..4ce547950 100644 --- a/public/javascripts/app/router.js +++ b/public/javascripts/app/router.js @@ -47,7 +47,7 @@ app.Router = Backbone.Router.extend({ templateName : templateName }).render(); - $("#main_stream").html(view.el); + $("#post-content").html(view.el); }}) } }); diff --git a/public/javascripts/app/templates/note.handlebars b/public/javascripts/app/templates/note.handlebars index 584e4c0cc..68442023a 100644 --- a/public/javascripts/app/templates/note.handlebars +++ b/public/javascripts/app/templates/note.handlebars @@ -1,3 +1,10 @@ -
- {{text}} +
+

+ A HEADING +

+
+
+

+ {{text}} +

diff --git a/public/javascripts/app/templates/status.handlebars b/public/javascripts/app/templates/status.handlebars index fe764ec26..59db29d2f 100644 --- a/public/javascripts/app/templates/status.handlebars +++ b/public/javascripts/app/templates/status.handlebars @@ -1,4 +1,4 @@ -
+

{{text}}

diff --git a/public/stylesheets/sass/new-templates.scss b/public/stylesheets/sass/new-templates.scss index 52fb54ae7..5764d429a 100644 --- a/public/stylesheets/sass/new-templates.scss +++ b/public/stylesheets/sass/new-templates.scss @@ -2,19 +2,19 @@ /* mixins */ -@mixin center() { +@mixin center($orient:vertical) { display: -webkit-box; - -webkit-box-orient: horizontal; + -webkit-box-orient: $orient; -webkit-box-pack: center; -webkit-box-align: center; display: -moz-box; - -moz-box-orient: horizontal; + -moz-box-orient: $orient; -moz-box-pack: center; -moz-box-align: center; display: box; - box-orient: horizontal; + box-orient: $orient; box-pack: center; box-align: center; } @@ -37,9 +37,9 @@ .multi-photo { .img-bounding-box { - @include center(); + @include center(horizontal); - margin-left: 10px; + margin: 20px; height: 500px; width: 400px; } @@ -53,7 +53,12 @@ } .note { - width: 500px; + width: 550px; + + p { + font-size: 20px; + line-height: 28px; + } } .status { @@ -77,7 +82,7 @@ left: 0; height: 100%; width: 100%; - background-color: rgba(0,0,0,0.3); + background-color: rgba(0,0,0,0.5); } .backdrop, @@ -85,7 +90,7 @@ @include center(); @include background-cover(); - position: fixed; + position: absolute; top: 0; left: 0; @@ -97,7 +102,7 @@ .photo-backdrop { h1 { color: #fff; - z-index: 100; + z-index: 2; } } @@ -118,16 +123,38 @@ } } -/* temp */ -#post-nav { +.nav-arrow { + -o-transition: opacity 0.3s; + -moz-transition: opacity 0.3s; + -webkit-transition: opacity 0.3s; + transition: opacity 0.3s; + position: fixed; - bottom: 10px; - height: 50px; + z-index: 3; + opacity: 0.2; - z-index: 100; - background: rgba(255,255,255,0.8); + top: 45%; - a { - padding: 30px; + &.left { left: 0; } + &.right { right: 0; } + + &:hover { + opacity: 0.6; + } +} + +#post-author-header { + top: 20px; + left: 20px; + position: fixed; + z-index: 10; + font-size: 18px; + font-weight: bold; + + img { + height: 50px; + width: 50px; + float: left; + margin-right: 10px; } }