tweak profile top layout [ci skip]

app/assets/javascripts/app/views/profile_info_view.js

@@ -2,6 +2,7 @@ app.views.ProfileInfo = app.views.Base.extend({
   templateName : "profile-info",
 
   initialize : function(){
+    console.log(this.model)
     this.model.bind("change", this.render, this) //this should go on profile info view when it gets Extracted
   }
 })

app/assets/stylesheets/new_styles/_canvas.scss

@@ -38,10 +38,6 @@ body {
   background-image : image_url('pattern.jpg')
 }
 
-#canvas {
-  margin-top : 100px;
-}
-
 .canvas-frame {
   float : left;
   margin : 10px;
@@ -182,7 +178,7 @@ body {
         line-height : 1.1em;
         text-align : center;
       }
-  }
+    }
   }
 
 

app/assets/stylesheets/new_styles/_profile.scss

@@ -33,4 +33,41 @@
   .canvas-frame .fav {
     @include opacity(1)
   }
+}
+
+#profile-header {
+ text-align : center;
+ padding : 50px;
+}
+
+.profile-image-container {
+  border-radius: 140px;
+  border : 3px solid #fff;
+  box-shadow : 0 0 2px rgba(0,0,0,0.5), 0 0 10px rgba(0,0,0,0.6), inset 0 0 15px rgba(0,0,0,0.5), inset 0 -2px 4px rgba(255,255,255,0.3);
+
+  height : 140px;
+  width : 140px;
+  background-position : center;
+
+  display : inline-block;
+}
+
+#profile-controls {
+  text-align : right;
+  padding : 10px 18px;
+
+  .control {
+    @include transition(opacity);
+    @include opacity(0.4);
+
+    &:hover {
+      @include opacity(1);
+      text-decoration : none;
+    }
+
+    &:active {
+      @include opacity(0.8);
+    }
+  }
+
 }

app/assets/templates/profile-info.jst.hbs

@@ -1,7 +1,13 @@
-<h1>{{full_name}}</h1>
-<dl>
-    <dt>Location:</dt><dd>{{location}}</dd>
-    <dt>Bio:</dt><dd>{{bio}}</dd>
-    <dt>Birthday:</dt><dd>{{birthday}}</dd>
-    <dt>Gender:</dt><dd>{{gender}}</dd>
-</dl>
+<div id="profile-header">
+    <div class="profile-image-container" style="background-image : url('{{image_url}}')"></div>
+    <h3>
+        {{full_name}}
+    </h3>
+</div>
+
+<!--<dl>-->
+    <!--<dt>Location:</dt><dd>{{location}}</dd>-->
+    <!--<dt>Bio:</dt><dd>{{bio}}</dd>-->
+    <!--<dt>Birthday:</dt><dd>{{birthday}}</dd>-->
+    <!--<dt>Gender:</dt><dd>{{gender}}</dd>-->
+<!--</dl>-->

app/assets/templates/profile.jst.hbs

@@ -4,8 +4,14 @@
 
 <section id="profile-info"/>
 
-<a href="/posts/new">COMPOSE</a> |
-<a href="#" id="edit-mode-toggle">EDIT</a>
+<section id="profile-controls">
+    <a href="/posts/new"  class="control">
+        <img src='{{imageUrl "buttons/add_post.jpg"}}' />
+    </a>
+    <a href="#" id="edit-mode-toggle" class="control">
+        <img src='{{imageUrl "buttons/edit_canvas.png"}}' />
+    </a>
+</section>
 
 <section id="canvas">