simpler

app/views/dashboard/index.html.haml

@@ -1,21 +1,4 @@
-%div.big_text
-  recent activity
-  %div.filters
-    = link_to "displaying all", "#"
 %ul#stream
   - for post in @messages
     = render "status_messages/pane", :post => post
-
+    = render "status_messages/pane", :post => post
-/.span-7.last
-/%div.info_pane
-/%div.big_text
-/%div.big_number= link_to "30", "#"
-/new requests!
-/%div.info_pane
-/%div.big_text
-/your profile
-/%img{:src => "/images/mocks/bp.jpeg", :width => '20%', :class => "profile_image"}
-/%div.info_pane
-/%div.big_text
-/your circle
-/%p= link_to "see all friends", "#"

app/views/layouts/application.html.haml

@@ -13,7 +13,7 @@
     = javascript_include_tag 'rails'
     = csrf_meta_tag
     = yield(:head)
-  
+
   %body
     %header
       %a#diaspora_text{:href => root_path}
@@ -26,6 +26,12 @@
           = link_to "login", new_user_session_path
           
     #header_below
+      %h1#user_name
+        = User.first.email
+        %span.description= StatusMessage.my_newest.message
+       
+      %img{:src => '/images/mocks/bp.jpeg'}
+
       %nav
         %ul.nav
           %li= link_to "home", root_path
@@ -35,8 +41,12 @@
           %li= link_to "blogs", blogs_path 
           %li= link_to "friends", friends_path
 
-    - if show_title?
-      %div.big_text= yield(:title)
     - flash.each do |name, msg|
       = content_tag :div, msg, :id => "flash_#{name}"
+    %br
+    %br
+    %br
+    %br
+    %br
+    %br
     = yield

public/stylesheets/application.css

@@ -7,12 +7,6 @@ a {
   color: #cc1e14;
   text-decoration: none; }
 
-h1,
-h2,
-h3,
-h4 {
-  text-shadow: 1px 1px 1px #eaeaea; }
-
 #flash_notice,
 #flash_error,
 #flash_alert {
@@ -53,6 +47,9 @@ h4 {
     margin: 0; }
 
 header {
+  z-index: 10;
+  position: absolute;
+  width: 100%;
   margin-top: -2em;
   margin-right: -2em;
   margin-left: -2em;
@@ -81,64 +78,57 @@ ul.nav {
   position: absolute;
   padding: 0;
   margin: 0;
-  font-size: 130%;
+  width: 200px; }
-  bottom: 2px; }
   ul.nav li {
-    display: inline;
+    display: block;
-    margin-right: 0.5em;
     padding: 5px 10px;
     background: #f2f8fc;
-    border: 1px solid white;
+    border: 1px solid white; }
-    border-bottom: none; }
+  ul.nav li:hover a {
-  ul.nav li:first-child {
+    color: #666666; }
-    background: white; }
-    ul.nav li:first-child a {
-      color: #1a1a21; }
-  ul.nav li:last-child {
-    margin: 0; }
   ul.nav a {
     border-bottom: none;
     color: #b1cfe3; }
     ul.nav a:hover {
-      color: #cccccc; }
+      color: black; }
+  ul.nav > li:first-child {
+    border-top-right-radius: 5px;
+    border-top-left-radius: 5px; }
+  ul.nav > li:last-child {
+    border-bottom-right-radius: 5px;
+    border-bottom-left-radius: 5px; }
 
 #header_below {
+  z-index: 5;
+  position: fixed;
+  height: 40px;
+  width: 100%;
   padding: 1em;
-  position: relative;
+    padding-top: 4em;
-  background-color: #e6eff7;
+    padding-bottom: 0;
-  margin-left: -2em;
+  top: 0;
-  margin-right: -2em;
+  background-color: rgba(255, 255, 255, 0.8);
-  margin-bottom: 40px;
+  margin-left: -2em; }
-  height: 20px; }
+  #header_below img {
-
+    width: 200px;
-#left_pane {
+    border-radius: 5px; }
-  background-color: #e6eff7;
-  border-radius: 5px; }
 
 ul#stream {
   margin: 0;
+  margin-left: 210px;
   padding: 0;
   text-shadow: 0 1px white;
-  color: #666666; }
+  color: #666666;
+  width: 60%;
+  min-width: 500px;
+  max-width: 700px; }
   ul#stream > li {
     list-style: none;
     padding: 1em;
     border-bottom: 1px solid #f1f1f1; }
-    ul#stream > li img.avatar {
-      width: 45px;
-      background: white; }
-  ul#stream > li:hover {
-    background-color: #eeeeee;
-    border-bottom: 1px solid #cccccc; }
-  ul#stream > li:hover .message {
-    color: black; }
-  ul#stream > li:hover .time {
-    color: #666666; }
 
 li.message {
-  margin-left: 10px;
+  line-height: 110%;
-  margin-top: -2px;
-  line-height: 17px;
   font-size: 120%;
   font-family: "Lucida Grande";
   color: #999999;
@@ -151,18 +141,18 @@ li.message {
     color: #bababa;
     font-size: 70%; }
 
-div.big_text {
+h1 {
   position: relative;
   font-size: 24px;
   font-weight: bold;
   line-height: 36px; }
-  div.big_text p.description {
+  h1 p.description, h1 span.description {
     font-weight: normal;
     color: #999999; }
-  div.big_text .big_number {
+  h1 .big_number {
     font-size: 300%;
     line-height: 100%; }
-  div.big_text .filters {
+  h1 .filters {
     position: absolute;
     right: 0;
     display: inline;

public/stylesheets/sass/application.sass

@@ -3,20 +3,11 @@ body
     :family 'helvetica', 'arial', 'sans-serif'
   :padding 2em
   :margin 0
-
-
 a
   :color #CC1E14
   :text
     :decoration none
 
-h1,
-h2,
-h3,
-h4
-  :text-shadow 1px 1px 1px #eaeaea
-
-
 #flash_notice,
 #flash_error,
 #flash_alert
@@ -59,6 +50,11 @@ h4
     :margin 0
 
 header
+  :z-index 10
+
+  :position absolute
+  :width 100%
+
   :margin
     :top -2em
     :right -2em
@@ -97,55 +93,63 @@ ul.nav
   :position absolute
   :padding 0
   :margin 0
-  :font
+  :width 200px
-    :size 130%
-  :bottom 2px
 
   li
-    :display inline
+    :display block
-    :margin
-      :right 0.5em
     :padding 5px 10px
     :background #F2F8FC
     :border 1px solid #fff
-    :border-bottom none
+  
-
+  li:hover
-  li:first-child
-    :background #fff
     a
-      :color #1A1A21
+      :color #666
 
-  li:last-child
-    :margin 0
   a
     :border
       :bottom none
     :color #B1CFE3
-
     &:hover
-      :color #ccc
+      :color #000
+
+  > li:first-child
+    :border-top-right-radius 5px
+    :border-top-left-radius 5px
+
+  > li:last-child
+    :border-bottom-right-radius 5px
+    :border-bottom-left-radius 5px
+
 
 
 #header_below
+  :z-index 5 
+  :position fixed
+  :height 40px
+  :width 100%
   :padding 1em
-  :position relative
+    :top 4em
+    :bottom 0
+  :top 0
+
   :background
-    :color #e6eff7
+    :color rgba( 255, 255, 255, 0.8)
+
+  //:background
+    //:color rgba(230, 239, 247, 0.5)
   :margin
     :left -2em
-    :right -2em
+  
-    :bottom 40px
+  img
-  :height 20px
+    :width 200px
-    
+    :border-radius 5px
 
-#left_pane
+    
-  :background
-    :color #E6EFF7
-  :border-radius 5px
 
 
 ul#stream
   :margin 0
+  :margin-left 210px
   :padding 0
   :text-shadow 0 1px #fff
   :color #666
@@ -154,31 +158,13 @@ ul#stream
     :padding 1em
     :border
       :bottom 1px solid #f1f1f1
-
+  :width 60%
-
+  :min-width 500px
-    img.avatar
+  :max-width 700px
-      :width 45px
-      background: #fff
-
-  > li:hover
-    :background
-      :color #eee
-    :border
-      :bottom 1px solid #ccc
-  > li:hover .message
-    :color #000
-  > li:hover .time
-    :color #666
-
-    
-
 
 
 li.message
-  :margin
+  :line-height 110%
-    :left 10px
-    :top -2px
-  :line-height 17px
   :font
     :size 120%
     :family 'Lucida Grande'
@@ -197,14 +183,14 @@ li.message
     :font-size 70%
 
 
-div.big_text
+h1
   :position relative
   :font
     :size 24px
     :weight bold
   :line-height 36px
 
-  p.description
+  p.description, span.description
     :font
       :weight normal
     :color #999