From 462bd961894e5be04e559b054fd85832c8d90d18 Mon Sep 17 00:00:00 2001
From: danielvincent <danielgrippi@gmail.com>
Date: Sun, 27 Jun 2010 16:17:42 -0700
Subject: [PATCH] ui fixup

---
 app/views/layouts/application.html.haml  | 49 ++++++------
 public/stylesheets/application.css       | 80 +++++++------------
 public/stylesheets/sass/application.sass | 97 +++++++-----------------
 3 files changed, 80 insertions(+), 146 deletions(-)

diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 1afb41e7b..0a5ad669c 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -48,33 +48,33 @@
           });
         });
   %body
-  
     - flash.each do |name, msg|
       = content_tag :div, msg, :id => "flash_#{name}"
     
     %header
-      %a#diaspora_text{:href => root_path}
-        %img{:src => '/images/diaspora_white.png'}
+      .container
+        %a#diaspora_text{:href => root_path}
+          %img{:src => '/images/diaspora_white.png'}
+
+          #session_action
+            - if user_signed_in?
+              =User.first.email
+              |
+              = link_to "logout", destroy_user_session_path
+            - else
+              = link_to "login", new_user_session_path
 
-      #session_action
-        - if user_signed_in?
-          =User.first.email
-          |
-          = link_to "logout", destroy_user_session_path
-        - else
-          = link_to "login", new_user_session_path
-          
     #header_below
-      - if user_signed_in?
-        %h1#user_name
-          = link_to User.first.real_name, root_url
-          %span.description
-            = my_latest_message
+      .container
+        - if user_signed_in?
+          %h1#user_name
+            = link_to User.first.real_name, root_url
+            %span.description
+              = my_latest_message
 
-    #content
-      #main
-        #show_filters
-          = link_to "show all", "#"
+    .container
+      #content.span-24.last
+        .span-3.append-1.last
           %ul#stream_filters
             %a{ :href => root_path, :title => "Your network stream."}
               %li home
@@ -86,7 +86,8 @@
               %li blogs
             %a{ :href => friends_path, :title => "Your list of connections with other seeds."}
               %li friends
-        = yield
-        = render "posts/debug"
-      #friends_list
-        = render 'friends/sidebar' if user_signed_in?
+        .span-15.append-1.last
+          = yield
+          = render "posts/debug"
+        .span-3.last
+          = render 'friends/sidebar' if user_signed_in?
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index c62f3f1b4..42a32ad8f 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -1,5 +1,4 @@
 body {
-  font-family: "helvetica", "arial", "sans-serif";
   padding: 2em;
   margin: 0; }
 
@@ -46,34 +45,29 @@ a {
     margin: 0;
     font-weight: bold;
     font-size: 12px;
-    background-color: #cc0000;
-    color: white; }
+    background-color: #cc0000; }
   .error_messages p {
     margin: 8px 10px; }
   .error_messages ul {
     margin: 0; }
 
 header {
-  z-index: 10;
-  position: fixed;
-  width: 100%;
-  margin-top: -2em;
-  margin-right: -2em;
-  margin-left: -2em;
+  position: relative;
+  margin: -2em;
+    margin-bottom: 0;
   height: 30px;
   color: white;
   background-color: #1a1a21;
-  border-bottom: 2px solid #f2f8fc;
+  border-bottom: 2px solid white;
   padding-top: 5px; }
   header #diaspora_text {
-    position: fixed;
+    position: absolute;
     border: none;
-    top: 8px;
-    left: 1em; }
+    top: 10px; }
   header #session_action {
-    position: fixed;
-    right: 1em;
-    font-size: 120%;
+    position: absolute;
+    right: 300px;
+    font-size: 110%;
     top: 7px; }
     header #session_action a {
       color: #cccccc;
@@ -90,10 +84,8 @@ header {
   padding: 5px; }
 
 ul#stream_filters {
-  display: none;
   padding: 0;
-  margin: 0;
-  background: white; }
+  margin: 0; }
   ul#stream_filters li {
     display: block;
     padding: 5px 0; }
@@ -109,25 +101,16 @@ ul#stream_filters {
     color: black; }
 
 #header_below {
-  z-index: 5;
-  position: fixed;
-  height: 40px;
-  width: 100%;
-  padding: 1em;
-    padding-top: 40px;
-  top: 0;
-  background-color: rgba(255, 255, 255, 0.9);
-  margin-left: -2em; }
-  #header_below img {
-    position: absolute;
-    width: 200px;
-    border-radius: 5px; }
+  margin: 0 -2em;
+  -webkit-box-shadow: 0 2px 2px -1px #999999;
+  background-color: #f2f8fc;
+  border-bottom: 1px solid #7e96a6;
+  padding-top: 0.8em;
+  padding-bottom: 0.4em; }
 
 #content {
   position: absolute;
-  top: 94px;
-  width: 60%;
-  min-width: 700px; }
+  top: 94px; }
 
 #main {
   width: 100%; }
@@ -144,7 +127,6 @@ ul#stream {
 
 li.message {
   line-height: 140%;
-  font-size: 120%;
   font-family: "Lucida Grande";
   color: #999999; }
   li.message span.from {
@@ -155,9 +137,13 @@ li.message {
     color: #bababa;
     font-size: 70%; }
 
+#user_name {
+  font-size: 15px;
+  line-height: 100%; }
+
 h1 {
   position: relative;
-  font-size: 24px;
+  font-size: 18px;
   font-weight: bold;
   line-height: 36px; }
   h1 p.description, h1 span.description {
@@ -166,11 +152,6 @@ h1 {
     color: #999999;
     padding: 0.1em; }
 
-.big_number {
-  font-weight: bold;
-  font-size: 500%;
-  line-height: 100%; }
-
 h3 {
   position: relative;
   font-size: 18px;
@@ -183,30 +164,22 @@ h3 {
   width: 100%;
   margin-bottom: 1em; }
 
-#friends_list {
-  position: absolute;
-  right: 0;
-  width: 20%;
-  min-width: 130px; }
-
 form {
-  font-size: 130%;
+  font-size: 120%;
   margin: 1em;
   margin-left: 0em; }
   form input {
-    font-size: 150%;
     padding: 0.2em;
     max-width: 100%; }
 
 #user_name {
-  background-color: rgba(255, 255, 255, 0.5); }
+  text-shadow: 0 1px 0 white; }
   #user_name a {
     color: black; }
     #user_name a:hover {
       color: #cc1e14; }
 
 #comment_text {
-  font-size: 75%;
   padding: 3px; }
 
 ul.comment_set {
@@ -215,11 +188,10 @@ ul.comment_set {
   padding: 0;
     padding-left: 1em;
   list-style: none;
-  font-size: 80%;
   width: 90%; }
   ul.comment_set li.comment {
     margin-bottom: 0.5em;
-    background-color: rgba(230, 239, 247, 0.4);
+    background-color: #f2f8fc;
     padding: 0.6em;
     border-radius: 5px; }
     ul.comment_set li.comment .from {
diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass
index f93d35e4a..7f53a466b 100644
--- a/public/stylesheets/sass/application.sass
+++ b/public/stylesheets/sass/application.sass
@@ -1,6 +1,4 @@
 body
-  :font
-    :family 'helvetica', 'arial', 'sans-serif'
   :padding 2em
   :margin 0
 a
@@ -10,8 +8,6 @@ a
   &:hover
     :color #CC1E14
 
-
-
 #flash_notice,
 #flash_error,
 #flash_alert
@@ -52,43 +48,34 @@ a
       :weight bold
       :size 12px
     :background-color #c00
-    :color #fff
   p
     :margin 8px 10px
   ul
     :margin 0
 
 header
-  :z-index 10
-
-  :position fixed
-  :width 100%
-
-  :margin
-    :top -2em
-    :right -2em
-    :left -2em
-
+  :position relative
+  :margin -2em
+    :bottom 0
   :height 30px
   :color #fff
   :background
     :color #1A1A21
   :border
-    :bottom 2px solid #F2F8FC
+    :bottom 2px solid #fff
   :padding
     :top 5px
 
   #diaspora_text
-    :position fixed
+    :position absolute
     :border none
-    :top 8px
-    :left 1em
+    :top 10px
 
   #session_action
-    :position fixed
-    :right 1em
+    :position absolute
+    :right 300px
     :font
-      :size 120%
+      :size 110%
     :top 7px
     a
       :color #ccc
@@ -105,7 +92,6 @@ header
   :padding 5px
 
 ul#stream_filters
-  :display none
   :padding 0
   :margin 0
   li
@@ -121,30 +107,20 @@ ul#stream_filters
     :color #B1CFE3
   a:hover
     :color #000
-  :background #fff
 
 #header_below
-  :z-index 5 
-  :position fixed
-  :height 40px
-  :width 100%
-  :padding 1em
-    :top 40px
-  :top 0
-  :background
-    :color rgba( 255, 255, 255, 0.9)
-  :margin
-    :left -2em
-  img
-    :position absolute
-    :width 200px
-    :border-radius 5px
+  :margin 0 -2em
+  :-webkit-box-shadow 0 2px 2px -1px #999
+  :background-color #F2F8FC
+  :border
+    :bottom 1px solid #7E96A6
+  :padding
+    :top 0.8em
+    :bottom 0.4em
 
 #content  
   :position absolute
   :top 94px
-  :width 60%
-  :min-width 700px
 
 #main
   :width 100%
@@ -164,7 +140,6 @@ ul#stream
 li.message
   :line-height 140%
   :font
-    :size 120%
     :family 'Lucida Grande'
   :color #999
   
@@ -182,10 +157,15 @@ li.message
 .mine
   //:background-color rgba(202, 237, 204, 0.5)
 
+#user_name
+  :font
+    :size 15px
+  :line-height 100%
+
 h1
   :position relative
   :font
-    :size 24px
+    :size 18px
     :weight bold
   :line-height 36px
 
@@ -196,12 +176,6 @@ h1
     :color #999
     :padding 0.1em
 
-.big_number
-  :font
-    :weight bold
-    :size 500%
-  :line-height 100%
-
 h3
   :position relative
   :font
@@ -217,22 +191,14 @@ h3
     :width 100%
     :margin
       :bottom 1em
-      
-#friends_list
-  :position absolute
-  :right 0
-  :width 20%
-  :min-width 130px
-  
+
 form
   :font
-    :size 130%
+    :size 120%
   :margin 1em
   :margin-left 0em
 
   input
-    :font
-      :size 150%
     :padding 0.2em
     :max-width 100%
   
@@ -241,12 +207,10 @@ form
     :color #000
     &:hover
       :color #CC1E14
-  :background
-    :color rgba( 255, 255, 255, 0.5)
-    
+  :text
+    :shadow 0 1px 0 #fff
+
 #comment_text
-  :font
-    :size 75%
   :padding 3px
 
 ul.comment_set
@@ -255,15 +219,12 @@ ul.comment_set
   :padding 0
     :left 1em
   :list-style none
-  :font
-    :size 80%
   :width 90%
 
   li.comment
     :margin
       :bottom 0.5em
-    :background
-      :color rgba( 230, 239, 247, 0.4)
+    :background-color #F2F8FC
     :padding 0.6em
     :border-radius 5px