Browse files

ui sclaing refactoring

  • Loading branch information...
1 parent cb46ef6 commit 85dc62602381f4e94f22a2a96007f11e64ae6d06 vagrant committed Mar 30, 2012
View
6 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>
'''
View
46 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
+
+
View
23 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
View
15 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
View
39 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%)
View
8 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
View
7 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>
+
+
View
18 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>
+
+
View
14 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>
+
View
30 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>
+

0 comments on commit 85dc626

Please sign in to comment.