From c3c23209c312a0be0e6974ceffe741dd732d3847 Mon Sep 17 00:00:00 2001
From: danielgrippi <danielgrippi@gmail.com>
Date: Wed, 15 Feb 2012 22:33:45 -0800
Subject: [PATCH] more fiddling with box model; added arrows

---
 app/views/posts/show.html.haml                |  13 ++--
 public/images/arrow-left.png                  | Bin 0 -> 810 bytes
 public/images/arrow-right.png                 | Bin 0 -> 774 bytes
 public/javascripts/app/router.js              |   2 +-
 .../javascripts/app/templates/note.handlebars |  11 ++-
 .../app/templates/status.handlebars           |   2 +-
 public/stylesheets/sass/new-templates.scss    |  63 +++++++++++++-----
 7 files changed, 62 insertions(+), 29 deletions(-)
 create mode 100644 public/images/arrow-left.png
 create mode 100644 public/images/arrow-right.png

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 0000000000000000000000000000000000000000..cb9584ff6c74171a3f697efe1e8a0917c4caff63
GIT binary patch
literal 810
zcmV+_1J(SAP)<h;3K|Lk000e1NJLTq001`t003kN1^@s6BEhI10000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU!%t=H+RCwC#+`nrZF%$>zT<H`_rVRDi
zp-|k#OaFit&d{M`=oEveteu<9<S+1)*;DaQ9LUtcLpy{TiiZsD&~~Wl)MCgKJY>4+
z1qHJBen?O6eP#4Om^dQn<GaYGdry}YMX|H3@nC0*BjFM*;Sw(45-#B)jfcK}Aj>jU
zK-uMEI&vVfZyUvrZNWV@E$?(XZ`$qlBYI;z9{)BkUralzJZF7c;CN!%(PT3DUfhfI
zdVMn(3@*&?`lVw7#@)iE)9J5bLztuakxtdvaFsBM(P(sO`W?iCs|BN2EEa!F-}jrw
zhW1rJuvZ3loagz|s?PKI{GWOG8N-B9`-t65DzW^}HG)yt+43#=Z0QQ?SDks<xW=bq
zuh;u@2Sdg+hIPB$b2=64&KX)b78oLq4Tgqeg(2bCVJNsDFa%sMm^LmbOcNIzriBxM
zY2d_Q(l}9=Bu*SAg;Rk^;M8D2aoVt8I0RS_914sbhXiBAp~2X2h%go$D$E;)4D-UF
z!<=y@_RwKIxC6?6A;WxdC(GsX3K`~uJEehF;cRxZuUUuUf_pcc&Hgmay2OHeP8k)K
zv=Thd0{b**WT5YtI5d#s@(UKob>R#N<XrN=0l62eP{0tk8C-#T@HiKsy^=YyD-CR%
z3y@YA+`!N`WmSO^x6{>tQi%{1pkxY594MW96a{Lejm3ak34alwW~oMSpmvc>P#{8i
zR4^b)VOtO&Qb{5^5UrS$6^K{{%mzd);AR0Lm)?5=(Kk(a0b|%d=M0QxbD$G2rk#(C
zfOhN4vzRsq)&|mER@475wr!oYfRsO^JYtL+aw~zu;qaU3m&b@J1+G@B>sG7v!SvaU
z6?Y4yiGw!Z-k&Kg>~-1LGT#9TJ$T}UX)kGJv_F3}?Xzjivhl})D_zfRiu6<s*H2D6
o(qnoOF5wa`;Sz3}asLGv0RLv%R<Kz--~a#s07*qoM6N<$f((Ckx&QzG

literal 0
HcmV?d00001

diff --git a/public/images/arrow-right.png b/public/images/arrow-right.png
new file mode 100644
index 0000000000000000000000000000000000000000..29e1259d08f3036db35bbc215dd67e27d9ed2cd0
GIT binary patch
literal 774
zcmV+h1Nr=kP)<h;3K|Lk000e1NJLTq001`t003kN1^@s6BEhI10000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU!s7XXYRCwC#+%ZcdK@<mYSF9|q5DT{v
z><&zkCY6OmFqRf}fmB{;+AD(}!a9|eM6|M4#1wLAugDeQns8@fb#@W1THnA5LCBiy
zoA=&-!#r4q?Cym5?JSu|=4GQaO;?sRR#%od0xsYJF5m(#-~z6svBrIaD2hx0dDF+x
zbJRQQRBUH2|I*cZEj^A<TT~pzaeP#-*Eih0e!u@h`)>$%4X<<e?5vHV)$8?srBgAP
zO#XK|okw>J;p<Xv`*UD>4w24?cVJm@--pBDbD9$fz@oTrI!9Oo#d;0_SQJ-lx7+vW
zoM8nlgv)@ZNs|0V26Ava=)l6bG5}e)Y2e2J9RbM3Wk5F-Yvm2>7C<k!=_wf!&?^oN
z=pBay6v3eY#c&8fX`Crg17`-*!kGXyaq2*AoGQ=)rv|jbsQ@i;;y`PhC=dZB21LP$
z0FiLsfoM3dKt!B3AS%ua5E;h?qT^V=GT;gW%Ys`N*lafMsLt22;1&XQyWO93{&AUb
zJM*p$4hDlibne-#wxQ*rIM_jwB;P8P%GPHmk4B>xDxM0>&6Im?q17apRZ*>0uc*!@
z`fa%|tkG!PQk@g@Ps_qE^l^>_L&mXTs5mb$M4UGm8g8Gqb6+qd+<qL#m*esHpD!2+
zP6UR46N6dfL}8XVahMfO1!jR$gK6VbVVXE~m=?|irhzkqNvB7d!Xy*h%wbX~i4ZV}
zWKtNIR~#D5XO1%*%nJ?`#>OGTSU7Z8VI0L5bQlMB?AE`KVI17~JiTTK<KQk_!;xVe
z+?iXsM22y2yRPxbFz!&$a){~mY4=ljwxW50{y*{Pvj#>{RHLHqQX;ZlKWKZPdgJW4
zIc{d#xmQ0tRl_LOB(I!xgvay*T)+ifzy;hg<K6@q00jmqL{63RlK=n!07*qoM6N<$
Ef|8(CjQ{`u

literal 0
HcmV?d00001

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 @@
-<div class="note">
-  {{text}}
+<div class="note offset5">
+  <h1>
+    A HEADING
+  </h1>
+  <br/>
+  <br/>
+  <p>
+    {{text}}
+  </p>
 </div>
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 @@
-<div class="status">
+<div class="status backdrop">
   <h1>
     {{text}}
   </h1>
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;
   }
 }