ui sclaing refactoring

kandanapp · Mar 31, 2012 · 85dc626 · 85dc626
1 parent cb46ef6
commit 85dc626
Show file tree

Hide file tree

Showing 10 changed files with 108 additions and 98 deletions.
diff --git a/app/assets/javascripts/backbone/plugins/user_list.js.coffee b/app/assets/javascripts/backbone/plugins/user_list.js.coffee
@@ -5,9 +5,9 @@ class Kandan.Plugins.UserList
   @plugin_namespace: "Kandan.Plugins.UserList"
 
   @template: _.template '''
-    <div class="user">
-      <div class="avatar"><img src="http://gravatar.com/avatar/<%= gravatar_hash %>?s=25&d=https://bushi.do/images/profile.png"/></div>
-      <div class="name"><%= name %></div>
+    <div class="user clearfix">
+      <img class="avatar" src="http://gravatar.com/avatar/<%= gravatar_hash %>?s=25&d=https://bushi.do/images/profile.png"/>
+      <span class="name"><%= name %></span>
     </div>
   '''
 

diff --git a/app/assets/stylesheets/_activity.sass b/app/assets/stylesheets/_activity.sass
@@ -2,19 +2,13 @@
   float: left
   width: 100%
   padding-top: 10px
-  padding-bottom: 10px
+  pandding-bottom: 10px
   border-bottom: 1px solid #DEE6E8
   background: #FFF
-  .avatar
-    margin-right: 10px
-    display: block
-    float: left
-    width: 5%
-    width: 30px
-    height: 30px
+  position: relative
   .readable
     float: left
-    width: 95%
+    width: 85%
     .user
       color: #AEB9BD
       font-weight: bold
@@ -24,9 +18,9 @@
       font-size: 14px
     .content
       float: left
-      width: 80%
       color: #797D7F
       font-size: 14px
+      padding-bottom: 15px
       .image-preview, .youtube-preview
         a
           width: 100%
@@ -39,13 +33,25 @@
           color: #878D8F
           font-weight: bold
           margin-top: 5px
-    .posted_at
-      float: left
-      width: 20%
-      text-align: right
-      font-size: 11px
-      span
-        +border-radius(4px)
-        padding: 4px
-        background: #F3F8F9
-        color: #BDC6CA
+
+.posted_at
+  float: right
+  text-align: right
+  font-size: 11px
+  position: absolute
+  right: 0px
+  +border-radius(4px)
+  padding: 4px
+  background: #F3F8F9
+  color: #BDC6CA
+
+
+.avatar
+  margin-right: 10px
+  display: block
+  float: left
+  width: 5%
+  width: 30px
+  height: 30px
+
+
diff --git a/app/assets/stylesheets/_base.sass b/app/assets/stylesheets/_base.sass
@@ -5,12 +5,20 @@
 *
   +box-sizing(border-box)
 
-.logo
+.header
+  display: block
+  height: $header-height
+  width: 100%
   position: fixed
-  top: 0px
-  left: 0px
-  z-index: 1
-  margin: 5px
+  top: 0
+  background-color: $header-bg-1
+  +background-image(linear-gradient($header-bg-1, $header-bg-2))
+  z-index: 10
+  padding: 5px
+
+#app_body
+  height: 100%
+  padding-top: $header-height
 
 html
   +full-height
@@ -27,3 +35,8 @@ body
   +full-height
   width: $main-area-width
   float: left
+  border-right: 1px solid #CDD1D4
+
+
+.main-area, .sidebar
+  padding-top: 15px
diff --git a/app/assets/stylesheets/_chat_area.sass b/app/assets/stylesheets/_chat_area.sass
@@ -17,13 +17,10 @@
   margin-top: 0px
   border: none
   .ui-tabs-nav
-    border-right: 1px solid #404A4D
     position: fixed
-    width: 100%
-    padding-top: 6px
-    top: 0px
-    li:first-child
-      margin-left: 90px
+    top: 2px
+    left: 90px
+    z-index: 20
     li a
       font-size: 14px
     .ui-tab-selected
@@ -34,11 +31,11 @@
     li a
       padding: 3px
   .ui-tabs-panel
+    padding: 0px
     padding-right: 20px
     padding-left: 20px
-    border-right: 1px solid #CDD1D4
   .ui-widget-content
-    height: 95%
+    height: 100%
 
 .ui-corner-all .ui-corner-bottom, .ui-corner-bottom, .ui-corner-left, .ui-corner-right, .ui-corner-bl, .ui-corner-br
   +border-radius(none)
@@ -49,6 +46,7 @@
 .ui-widget-content
   +full-height
   background: $panel-bg
+  background-image: url("/assets/page_bg.png")
   font-size: 13px
 
 .paginated-activities
@@ -61,7 +59,6 @@
   height: 88%
   background: #FFF
   padding: 10px
-  margin-top: 37px
   .pagination
     text-decoration: underline
     cursor: pointer

diff --git a/app/assets/stylesheets/_sidebar.sass b/app/assets/stylesheets/_sidebar.sass
@@ -2,35 +2,15 @@
   min-height: 100%
   height: 100%
   width: $sidebar-width
-  float: left
-  position: fixed
-  right: 0px
-  .header
-    +background-image(linear-gradient($header-bg-1, $header-bg-2))
-    border-left: 1px solid #616D70
-    padding-top: 3px
-    padding-bottom: 3px
-    width: 100%
-    float: left
-    height: $header-height
-    .search
-      width: 50%
-      float: left
-      text-align: right
-      input
-        +border-radius(20px)
-        width: 100%
-        background: $search-bg
-        color: $search-color
-        border: 2px solid darken($search-bg, 10%)
+  float: right
+  border-left: 1px solid #F2F4F6
   .widgets
-    border-left: 1px solid #F2F4F6
     float: left
     width: 100%
     padding-left: 15px
     padding-right: 15px
     .widget
-      margin-top: 20px
+      margin-bottom: 20px
       border: 1px solid #D0D5D8
       +border-top-radius(4px)
       +border-bottom-radius(7px)
@@ -72,3 +52,16 @@
         min-height: 40px
         border-top: 2px solid #D2D8D8
         background: #E9EFF0
+
+
+
+.search
+  width: 200px
+  float: right
+  text-align: right
+  input
+    +border-radius(20px)
+    width: 100%
+    background: $search-bg 
+    color: $search-color
+    border: 2px solid darken($search-bg, 10%)
diff --git a/app/assets/stylesheets/_variables.sass b/app/assets/stylesheets/_variables.sass
@@ -1,7 +1,9 @@
-$page-bg: #e6ebee
+$neutral-color: #E6EBEE
+
+$page-bg: $neutral-color
 $main-area-width: 80%
 
-$panel-bg: #e6ebee
+$panel-bg: $neutral-color
 $chatbox-bg-1: #f3f8f9
 $chatbox-bg-2: #dbdfe0
 
@@ -14,7 +16,7 @@ $widget-title-bg-1: #f3f8f9
 $widget-title-bg-2: #dbdfe0
 
 $sidebar-width: 20%
-$sidebar-bg: #e6ebee
+$sidebar-bg: $neutral-color
 
 $search-bg: #5d676b
 $search-color: #cccccc

diff --git a/app/assets/templates/activity_base.jst.eco b/app/assets/templates/activity_base.jst.eco
@@ -1,11 +1,10 @@
+<span class="posted_at"><%= @activity.created_at %></span>
 <img class="avatar" src="http://gravatar.com/avatar/<%= @activity.user.gravatar_hash %>?s=30&d=https://bushi.do/images/profile.png"/>
 
 <div class="readable">
   <div class="content">
     <%- @activity.content %>
   </div>
-
-  <div class="posted_at">
-    <span><%= @activity.created_at %></span>
-  </div>
 </div>
+
+
diff --git a/app/assets/templates/message.jst.eco b/app/assets/templates/message.jst.eco
@@ -1,17 +1,15 @@
-<div class="avatar">
-  <img src="http://gravatar.com/avatar/<%= @activity.user.gravatar_hash %>?s=30&d=https://bushi.do/images/profile.png"/>
-</div>
+<span class="posted_at"><%= @activity.created_at %></span>
+<img class="avatar" src="http://gravatar.com/avatar/<%= @activity.user.gravatar_hash %>?s=30&d=https://bushi.do/images/profile.png"/>
 
 <div class="readable">
-  <div class="user">
+  <span class="user">
     <%= @activity.user.first_name %>
-  </div>
+  </span>
 
-  <div class="content">
+  <span class="content">
     <%- @activity.content %>
-  </div>
+  </span>
 
-  <div class="posted_at">
-    <span><%= @activity.created_at %></span>
-  </div>
 </div>
+
+
diff --git a/app/assets/templates/user_notification.jst.eco b/app/assets/templates/user_notification.jst.eco
@@ -1,15 +1,11 @@
+<span class="posted_at"><%= @activity.created_at %></span>
 <img class="avatar" src="http://gravatar.com/avatar/<%= @activity.user.gravatar_hash %>?s=30&d=https://bushi.do/images/profile.png"/>
 
 <div class="readable">
-  <div class="user">
-    Kandan bot
-  </div>
+  <span class="user">Kandan bot</span>
 
-  <div class="content">
+  <span class="content">
     <%= @activity.user.first_name %> <%= @activity.action %>ed
-  </div>
-
-  <div class="posted_at">
-    <span><%= @activity.created_at %></span>
-  </div>
+  </span>
 </div>
+
diff --git a/app/views/main/index.html.erb b/app/views/main/index.html.erb
@@ -6,17 +6,23 @@
 
 
 
-<%= image_tag "logo.png", :class=>"logo" %>
-
-<div class="main-area"></div>
-<div class="sidebar">
-  <div class="header">
-    <div class="search">
-      <form method="get" action="/search" target="_blank">
-        <input type="text" class="query" name="query"/>
-      </form>
-    </div>
-    <div class="user"></div>
+
+<div class="header">
+  <%= image_tag "logo.png", :class=>"logo" %>
+
+  <div class="search">
+    <form method="get" action="/search" target="_blank">
+      <input type="text" class="query" name="query"/>
+    </form>
   </div>
-  <div class="widgets"></div>
+  <div class="user"></div>
 </div>
+
+<div id="app_body">
+  <div class="main-area"></div>
+
+  <div class="sidebar">
+    <div class="widgets"></div>
+  </div>
+</div>
+