From 85dc62602381f4e94f22a2a96007f11e64ae6d06 Mon Sep 17 00:00:00 2001 From: vagrant Date: Fri, 30 Mar 2012 17:16:02 -0700 Subject: [PATCH] ui sclaing refactoring --- .../backbone/plugins/user_list.js.coffee | 6 +-- app/assets/stylesheets/_activity.sass | 46 +++++++++++-------- app/assets/stylesheets/_base.sass | 23 ++++++++-- app/assets/stylesheets/_chat_area.sass | 15 +++--- app/assets/stylesheets/_sidebar.sass | 39 +++++++--------- app/assets/stylesheets/_variables.sass | 8 ++-- app/assets/templates/activity_base.jst.eco | 7 ++- app/assets/templates/message.jst.eco | 18 ++++---- .../templates/user_notification.jst.eco | 14 ++---- app/views/main/index.html.erb | 30 +++++++----- 10 files changed, 108 insertions(+), 98 deletions(-) diff --git a/app/assets/javascripts/backbone/plugins/user_list.js.coffee b/app/assets/javascripts/backbone/plugins/user_list.js.coffee index 34be08bf..93e78953 100644 --- 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 ''' -
-
-
<%= name %>
+
+ + <%= name %>
''' diff --git a/app/assets/stylesheets/_activity.sass b/app/assets/stylesheets/_activity.sass index 542ab5de..ff7f2058 100644 --- 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 index bdd1b880..79acae3b 100644 --- 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 index 121d88ca..30a4efa5 100644 --- 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 index 683f3e33..c4f753c2 100644 --- 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 index 042fb907..cc938f47 100644 --- 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 index f4e039bf..24c59ba1 100644 --- a/app/assets/templates/activity_base.jst.eco +++ b/app/assets/templates/activity_base.jst.eco @@ -1,11 +1,10 @@ +<%= @activity.created_at %>
<%- @activity.content %>
- -
- <%= @activity.created_at %> -
+ + diff --git a/app/assets/templates/message.jst.eco b/app/assets/templates/message.jst.eco index 32cb1ae4..90afff46 100644 --- a/app/assets/templates/message.jst.eco +++ b/app/assets/templates/message.jst.eco @@ -1,17 +1,15 @@ -
- -
+<%= @activity.created_at %> +
-
+ <%= @activity.user.first_name %> -
+ -
+ <%- @activity.content %> -
+ -
- <%= @activity.created_at %> -
+ + diff --git a/app/assets/templates/user_notification.jst.eco b/app/assets/templates/user_notification.jst.eco index 86de4211..55d3fbc4 100644 --- a/app/assets/templates/user_notification.jst.eco +++ b/app/assets/templates/user_notification.jst.eco @@ -1,15 +1,11 @@ +<%= @activity.created_at %>
-
- Kandan bot -
+ Kandan bot -
+ <%= @activity.user.first_name %> <%= @activity.action %>ed -
- -
- <%= @activity.created_at %> -
+
+ diff --git a/app/views/main/index.html.erb b/app/views/main/index.html.erb index 2bc7e88e..a5437465 100644 --- a/app/views/main/index.html.erb +++ b/app/views/main/index.html.erb @@ -6,17 +6,23 @@ -<%= image_tag "logo.png", :class=>"logo" %> - -
-
-
-
-
- -
-
-
+ +
+ <%= image_tag "logo.png", :class=>"logo" %> + +
+
+ +
-
+
+ +
+
+ +
+
+
+
+