From b314ee22ecbbbbc861c71e94f4d32d1036edbd28 Mon Sep 17 00:00:00 2001
From: danielvincent <danielgrippi@gmail.com>
Date: Thu, 7 Oct 2010 22:51:08 -0700
Subject: [PATCH 1/4] intermediate misc ui polish

---
 app/views/aspects/manage.html.haml            |   6 +-
 app/views/comments/_comment.html.haml         |   2 +-
 app/views/layouts/application.html.haml       |   2 +-
 app/views/shared/_aspect_friends.haml         |  28 ++++
 app/views/shared/_sub_header.haml             |   4 +-
 .../status_messages/_status_message.html.haml |  25 ++--
 app/views/users/edit.html.haml                |   2 +-
 public/javascripts/aspect-edit.js             |   2 +-
 public/stylesheets/application.css            | 116 +++++++++-------
 public/stylesheets/sass/application.sass      | 130 ++++++++++--------
 10 files changed, 186 insertions(+), 131 deletions(-)

diff --git a/app/views/aspects/manage.html.haml b/app/views/aspects/manage.html.haml
index e818657e8..5573fe020 100644
--- a/app/views/aspects/manage.html.haml
+++ b/app/views/aspects/manage.html.haml
@@ -7,7 +7,7 @@
   = javascript_include_tag 'aspect-edit.js'
 
 - content_for :left_pane do
-  %h1=t('.requests')
+  %h3=t('.requests')
 
   .requests
     %ul.dropzone
@@ -19,7 +19,7 @@
             = person_image_tag(request.person)
             .name
               = request.person.real_name
-  %h1=t('.ignore_remove')
+  %h3=t('.ignore_remove')
 
   %li.remove
     %ul.dropzone
@@ -34,7 +34,7 @@
 
       .aspect_name
         %span.edit_name_field
-          %h1{:contenteditable => true}= aspect.name
+          %h3{:contenteditable => true}= aspect.name
           %span.tip click to edit
 
         %ul.tools
diff --git a/app/views/comments/_comment.html.haml b/app/views/comments/_comment.html.haml
index 3e927f723..3d8c551ca 100644
--- a/app/views/comments/_comment.html.haml
+++ b/app/views/comments/_comment.html.haml
@@ -6,6 +6,6 @@
   = person_image_tag(post.person)
   %span.from
     = link_to post.person.real_name, post.person
-    = post.text
+  = post.text
   %div.time
     = "#{time_ago_in_words(post.updated_at)} #{t('.ago')}"
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 99dec9e35..b8de1dd24 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -56,7 +56,7 @@
       = render "shared/sub_header"
 
     .container
-      .span-5.last
+      .span-4.append-1.last
         = yield :left_pane
 
       .span-19.last
diff --git a/app/views/shared/_aspect_friends.haml b/app/views/shared/_aspect_friends.haml
index 03da4ee9b..78dd65a3a 100644
--- a/app/views/shared/_aspect_friends.haml
+++ b/app/views/shared/_aspect_friends.haml
@@ -3,6 +3,34 @@
 -#   the COPYRIGHT file.
 
 #friend_pictures
+  = owner_image_link
+  = owner_image_link
+  = owner_image_link
+  = owner_image_link
+  = owner_image_link
+  = owner_image_link
+  = owner_image_link
+  = owner_image_link
+  = owner_image_link
+  = owner_image_link
+  = owner_image_link
+  = owner_image_link
+  = owner_image_link
+  = owner_image_link
+  = owner_image_link
+  = owner_image_link
+  = owner_image_link
+  = owner_image_link
+  = owner_image_link
+  = owner_image_link
+  = owner_image_link
+  = owner_image_link
+  = owner_image_link
+  = owner_image_link
+  = owner_image_link
+  = owner_image_link
+  = owner_image_link
+  = owner_image_link
   = owner_image_link
   - for friend in @friends
     = person_image_link(friend)
diff --git a/app/views/shared/_sub_header.haml b/app/views/shared/_sub_header.haml
index 227b63d4e..e7dc4e79d 100644
--- a/app/views/shared/_sub_header.haml
+++ b/app/views/shared/_sub_header.haml
@@ -2,10 +2,10 @@
   .container
     .span-5.last
       - if @person
-        %h1
+        %h2
           = @person.real_name
       - else
-        %h1
+        %h2
           - if @aspect == :all
             = link_to t('.all_aspects'), root_path
           - elsif @aspect == :public
diff --git a/app/views/status_messages/_status_message.html.haml b/app/views/status_messages/_status_message.html.haml
index d8c56ff2f..2b2dd1bd0 100644
--- a/app/views/status_messages/_status_message.html.haml
+++ b/app/views/status_messages/_status_message.html.haml
@@ -7,28 +7,27 @@
   = person_image_link(post.person)
 
   .content
-    %span.from
+    .from
       = link_to post.person.real_name, post.person
-      = post.message
+      .aspect
+        → 
+        - for aspect in current_user.aspects_with_post( post.id )
+          = aspect.name
+
+      - if current_user.owns?(post)
+        .destroy_link
+          = link_to t('.delete'), status_message_path(post), :confirm => t('.are_you_sure'), :method => :delete, :remote => true, :class => "delete"
+          = render "shared/reshare", :post => post, :current_user => current_user
+
+    = post.message
 
     .info
       %span.time= link_to(how_long_ago(post), object_path(post))
-      \--
       = link_to "#{t('.show_comments')} (#{post.comments.count})", '#', :class => "show_post_comments"
 
     = render "comments/comments", :post => post
 
-  - if current_user.owns?(post)
-    .destroy_link
-      = link_to t('.delete'), status_message_path(post), :confirm => t('.are_you_sure'), :method => :delete, :remote => true, :class => "delete"
-      = render "shared/reshare", :post => post, :current_user => current_user
 
   - if post.public?
     .public_aspect_tag
       public
-  - else
-    .aspect_tag
-      %ul
-        - for aspect in current_user.aspects_with_post( post.id )
-          %li= aspect.name
-
diff --git a/app/views/users/edit.html.haml b/app/views/users/edit.html.haml
index 80d426202..397035a80 100644
--- a/app/views/users/edit.html.haml
+++ b/app/views/users/edit.html.haml
@@ -14,7 +14,7 @@
 
 
 - content_for :publish do
-  %h1="#{t('.editing_profile')}"
+  %h2="#{t('.editing_profile')}"
 
 - content_for :left_pane do
   %ul#settings_nav
diff --git a/public/javascripts/aspect-edit.js b/public/javascripts/aspect-edit.js
index 59ba6e331..2d6564e6b 100644
--- a/public/javascripts/aspect-edit.js
+++ b/public/javascripts/aspect-edit.js
@@ -94,7 +94,7 @@ $(function() {
   });
 
 
-  $(".aspect h1").live( 'focus', function() {
+  $(".aspect h3").live( 'focus', function() {
 
     var $this = $(this),
         id    = $this.closest("li").children("ul").attr("id"),
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index 80d0dfe39..a97c3706c 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -11,23 +11,16 @@ body {
   margin: 0; }
 
 a {
-  color: #556270;
   color: #107fc9;
-  color: #019dbe;
   text-decoration: none; }
   a:hover {
-    color: white;
-    background-color: #556270;
-    background-color: #019dbe; }
+    color: #22aae0; }
 
-h1 {
-  font-size: 21px;
-  font-weight: bold;
-  line-height: 36px; }
+h1, h2, h3, h4 {
+  color: #444444; }
 
 h3 {
-  font-size: 18px;
-  font-weight: bold; }
+  font-size: 18px; }
 
 .avatar {
   width: 50px;
@@ -125,17 +118,15 @@ header {
     border-top: 1px solid white;
     padding: 20px 0; }
     header #aspect_header h1 {
-      margin-bottom: 0;
-      text-shadow: 0 2px 0 white; }
+      text-shadow: 0 1px 0 white; }
     header #aspect_header a {
-      color: #111111; }
+      color: #444444; }
       header #aspect_header a:hover {
         background: none;
         color: #999999; }
     header #aspect_header .page_title {
       text-transform: uppercase;
-      text-shadow: 0 2px 0 white;
-      margin-top: -5px; }
+      text-shadow: 0 1px 0 white; }
 
 ul#stream {
   margin: 0;
@@ -146,7 +137,6 @@ ul#stream {
     padding: 12px 0;
     border-bottom: 1px solid #eeeeee; }
     ul#stream > li:hover {
-      background: -webkit-gradient(linear, 0% 0%, 0% 50%, from(#fafafa), to(#fcfcfc));
       background-color: #fafafa;
       border-bottom: 1px solid #dddddd; }
       ul#stream > li:hover .destroy_link {
@@ -156,26 +146,41 @@ ul#stream {
 
 li.message {
   position: relative;
-  line-height: 140%;
-  font-family: "Lucida Grande", sans-serif;
-  color: #999999; }
+  line-height: 19px;
+  font-family: "Arial", "Helvetica", sans-serif;
+  color: #777777; }
   li.message .avatar {
     float: left;
     margin-right: 15px; }
   li.message .delete:hover {
     background: #eeeeee; }
   li.message .content {
+    margin-top: -4px;
     padding-left: 65px;
-    width: 600px; }
-    li.message .content span.from {
-      color: black;
-      font-weight: normal;
-      font-size: 110%; }
+    color: #444444;
+    font-weight: normal;
+    font-size: 14px; }
+    li.message .content .from {
+      font-family: "Helvetica neue", Arial, Helvetica, sans-serif;
+      text-shadow: 0 1px white; }
+      li.message .content .from .aspect {
+        display: inline;
+        color: #bbbbbb;
+        font-size: 12px; }
+      li.message .content .from a {
+        font-weight: bold; }
     li.message .content div.info {
-      color: #bababa;
-      font-size: 70%; }
-      li.message .content div.info .time a {
-        color: #666666; }
+      color: #eeeeee;
+      font-size: 11px; }
+      li.message .content div.info a {
+        color: #cccccc; }
+      li.message .content div.info .time {
+        font-weight: bold;
+        margin-right: 5px; }
+        li.message .content div.info .time a {
+          color: #bbbbbb; }
+  li.message:hover div.info a, li.message:hover .time a {
+    color: #107fc9; }
 
 .reshare_pane {
   margin-left: 5px;
@@ -261,19 +266,21 @@ ul.comment_set {
     margin-top: 1em;
   padding: 0;
   list-style: none;
-  width: 495px; }
+  width: 610px; }
   ul.comment_set textarea {
     width: 100%; }
   ul.comment_set li.comment {
     margin-bottom: 0.5em;
     background-color: rgba(10, 81, 109, 0.05);
     padding: 0.6em;
-    border-bottom: 1px solid #dddddd; }
-    ul.comment_set li.comment .from {
-      font-size: 1em; }
+    border-bottom: 1px solid #dddddd;
+    font-size: 12px;
+    line-height: 17px; }
+    ul.comment_set li.comment .from a {
+      color: #444444; }
     ul.comment_set li.comment div.time {
       color: #666666;
-      font-size: 70%; }
+      font-size: 10px; }
     ul.comment_set li.comment form {
       margin-top: -5px;
       margin-bottom: 0;
@@ -306,18 +313,15 @@ ul.comment_set {
 
 .destroy_link, .request_button {
   position: absolute;
-  right: 2em;
-  bottom: 15px; }
+  right: 0; }
   .destroy_link a, .request_button a {
     color: #999999;
     font-weight: normal; }
     .destroy_link a:hover, .request_button a:hover {
-      text-decoration: underline;
-      background: none; }
+      text-decoration: underline; }
 
 .destroy_link {
-  display: none;
-  font-size: smaller; }
+  display: none; }
 
 .request_buttons {
   position: absolute;
@@ -350,7 +354,7 @@ ul.comment_set {
 input[type='text'],
 input[type='password'],
 textarea {
-  font-family: "lucida grande", "lucida sans", "sans-serif";
+  font-family: "Arial", "Helvetica", sans-serif;
   font-size: 14px;
   padding: 0.3em;
   display: block;
@@ -374,11 +378,13 @@ form p {
   margin: 0; }
 
 label {
+  font-family: "Arial", "Helvetica", sans-serif;
+  font-weight: normal;
   color: #999999;
   position: absolute;
   top: 3px;
   left: 0.48em;
-  font-weight: normal; }
+  text-shadow: 0 1px 1px #eeeeee; }
 
 #publisher {
   color: #999999;
@@ -506,7 +512,8 @@ h1.big_text {
 #aspect_nav {
   color: black;
   margin-top: 8px;
-  margin-bottom: 1px; }
+  margin-bottom: 1px;
+  font-family: "Arial", "Helvetica", sans-serif; }
   #aspect_nav #aspect_manage_button {
     display: inline; }
     #aspect_nav #aspect_manage_button a {
@@ -520,7 +527,7 @@ h1.big_text {
       display: inline;
       margin-right: 2px; }
       #aspect_nav ul > li a {
-        text-shadow: 0 2px 0 #444444;
+        text-shadow: 0 1px 0 #444444;
         -webkit-border-radius: 3px 3px 0 0;
         -moz-border-radius: 3px 3px 0 0;
         line-height: 22px;
@@ -535,7 +542,7 @@ h1.big_text {
       #aspect_nav ul > li.selected a {
         -webkit-box-shadow: 0px -4px 6px -2px #777777;
         -moz-box-shadow: 0px -4px 6px -2px #777777;
-        text-shadow: 0 2px 0 white;
+        text-shadow: 0 1px 0 white;
         padding-top: 4px;
         padding-bottom: 5px;
         line-height: 18px;
@@ -545,7 +552,7 @@ h1.big_text {
         background: -moz-linear-gradient(19% 75% 90deg, #f7f7f7, white);
         border: 1px solid white;
           border-bottom: 1px solid #f7f7f7;
-        color: black; }
+        color: #444444; }
         #aspect_nav ul > li.selected a:hover {
           background-color: #efefef; }
         #aspect_nav ul > li.selected a a {
@@ -574,9 +581,9 @@ h1.big_text {
 .requests,
 .remove {
   list-style: none; }
-  .aspect h1,
-  .requests h1,
-  .remove h1 {
+  .aspect h3,
+  .requests h3,
+  .remove h3 {
     display: inline-block; }
   .aspect .tip,
   .requests .tip,
@@ -596,7 +603,7 @@ h1.big_text {
     .requests .aspect_name ul.tools,
     .remove .aspect_name ul.tools {
       position: absolute;
-      top: 10px;
+      top: 5px;
       right: 0;
       display: inline;
       padding: 0;
@@ -616,7 +623,7 @@ h1.big_text {
   .remove .grey {
     color: #999999;
     cursor: default;
-    text-shadow: 0 2px white; }
+    text-shadow: 0 1px white; }
   .aspect ul.dropzone,
   .requests ul.dropzone,
   .remove ul.dropzone {
@@ -678,10 +685,11 @@ ul#settings_nav {
   marign: 0;
   font-size: larger; }
   ul#settings_nav > li a {
+    font-size: smaller;
     display: block;
     height: 100%;
     border-bottom: 1px solid #eeeeee;
-    padding: 5px 0; }
+    padding: 2px; }
 
 .settings_pane {
   display: none; }
@@ -735,7 +743,9 @@ ul#settings_nav {
 #friend_pictures {
   line-height: 1em; }
   #friend_pictures img {
-    margin-right: -1px; }
+    margin-right: -1px;
+    width: 35px;
+    height: 35px; }
 
 #thumbnails {
   line-height: 14px; }
diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass
index e50888c9d..139e723a8 100644
--- a/public/stylesheets/sass/application.sass
+++ b/public/stylesheets/sass/application.sass
@@ -15,28 +15,18 @@ body
   :padding 2em
   :margin 0
 a
-  :color #556270
   :color #107FC9
-  :color #019DBE
   :text
     :decoration none
   &:hover
-    :color #fff
-    :background
-      :color #556270
-      :color #019DBE
+    :color #22AAE0
 
-h1
-  :font
-    :size 21px
-    :weight bold
-  :line
-    :height 36px
+h1, h2, h3, h4
+  :color #444
 
 h3
   :font
     :size 18px
-    :weight bold
 
 .avatar
   :width 50px
@@ -158,12 +148,10 @@ header
     :padding 20px 0
 
     h1
-      :margin
-        :bottom 0
-      :text-shadow 0 2px 0 #fff
+      :text-shadow 0 1px 0 #fff
 
     a
-      :color #111
+      :color #444
       &:hover
         :background none
         :color #999
@@ -171,9 +159,7 @@ header
     .page_title
       :text
         :transform uppercase
-        :shadow 0 2px 0 #fff
-      :margin
-        :top -5px
+        :shadow 0 1px 0 #fff
 
 
 ul#stream
@@ -187,14 +173,10 @@ ul#stream
       :bottom 1px solid #eee
 
     &:hover
-      :background -webkit-gradient(linear, 0% 0%, 0% 50%, from(#FAFAFA), to(#FCFCFC))
-
       :background
         :color #fafafa
-
       :border
         :bottom 1px solid #ddd
-
       .destroy_link
         :display inline
 
@@ -203,10 +185,10 @@ ul#stream
 
 li.message
   :position relative
-  :line-height 140%
+  :line-height 19px
   :font
-    :family 'Lucida Grande', sans-serif
-  :color #999
+    :family 'Arial', 'Helvetica', sans-serif
+  :color #777
 
   .avatar
     :float left
@@ -217,24 +199,49 @@ li.message
     :background #eee
 
   .content
+    :margin
+      :top -4px
     :padding
       :left 65px
-    :width 600px
 
-    span.from
-      :color #000
+    .from
       :font
-        :weight normal
-      :font
-        :size 110%
+        :family 'Helvetica neue', Arial, Helvetica, sans-serif
+      :text
+        :shadow 0 1px #fff
+
+      .aspect
+        :display inline
+        :color #bbb
+        :font
+          :size 12px
+
+      a
+        :font
+          :weight bold
+
+    :color #444
+    :font
+      :weight normal
+      :size 14px
 
     div.info
-      :color #bababa
-      :font-size 70%
-
+      :color #eee
+      :font-size 11px
+      a
+        :color #ccc
       .time
         a
-          :color #666
+          :color #bbb
+        :font
+          :weight bold
+        :margin
+          :right 5px
+      
+  &:hover
+    div.info, .time
+      a
+        :color #107FC9
 
 .reshare_pane
   :margin
@@ -354,7 +361,7 @@ ul.comment_set
     :top 1em
   :padding 0
   :list-style none
-  :width 495px
+  :width 610px
 
   textarea
     :width 100%
@@ -369,12 +376,17 @@ ul.comment_set
       :bottom 1px solid #ddd
 
     .from
-      :font
-        :size 1em
+      a
+        :color #444
+    :font
+      :size 12px
+
+    :line
+      :height 17px
 
     div.time
       :color #666
-      :font-size 70%
+      :font-size 10px
 
     form
       :margin
@@ -418,8 +430,7 @@ ul.comment_set
 
 .destroy_link, .request_button
   :position absolute
-  :right 2em
-  :bottom 15px
+  :right 0
   a
     :color #999
     :font
@@ -427,11 +438,9 @@ ul.comment_set
     &:hover
       :text
         :decoration underline
-      :background none
 
 .destroy_link
   :display none
-  :font-size smaller
 
 .request_buttons
   :position absolute
@@ -471,7 +480,7 @@ input[type='text'],
 input[type='password'],
 textarea
   :font
-    :family 'lucida grande', 'lucida sans', 'sans-serif'
+    :family 'Arial', 'Helvetica', sans-serif
     :size 14px
   :padding 0.3em
   :display block
@@ -499,12 +508,15 @@ form p
   :margin 0
 
 label
+  :font
+    :family 'Arial', 'Helvetica', sans-serif
+    :weight normal
   :color #999
   :position absolute
   :top 3px
   :left 0.48em
-  :font
-    :weight normal
+  :text
+    :shadow 0 1px 1px #eee
 
 #publisher
   :color #999
@@ -676,6 +688,9 @@ h1.big_text
     :top 8px
     :bottom 1px
 
+  :font
+    :family 'Arial', 'Helvetica', sans-serif
+
 
   #aspect_manage_button
     :display inline
@@ -697,7 +712,7 @@ h1.big_text
         :right 2px
 
       a
-        :text-shadow 0 2px 0 #444
+        :text-shadow 0 1px 0 #444
         :-webkit-border-radius 3px 3px 0 0
         :-moz-border-radius 3px 3px 0 0
         :line
@@ -720,7 +735,7 @@ h1.big_text
         :-webkit-box-shadow 0px -4px 6px -2px #777
         :-moz-box-shadow 0px -4px 6px -2px #777
 
-        :text-shadow 0 2px 0 #fff
+        :text-shadow 0 1px 0 #fff
         :padding
           :top 4px
           :bottom 5px
@@ -736,7 +751,7 @@ h1.big_text
 
         :border 1px solid #fff
           :bottom 1px solid #F7F7F7
-        :color #000
+        :color #444
         &:hover
           :background
             :color #efefef
@@ -776,7 +791,7 @@ h1.big_text
   :list
     :style none
 
-  h1
+  h3
     :display inline-block
 
   .tip
@@ -795,7 +810,7 @@ h1.big_text
 
     ul.tools
       :position absolute
-      :top 10px
+      :top 5px
       :right 0
       :display inline
       :padding 0
@@ -814,7 +829,7 @@ h1.big_text
   .grey
     :color #999
     :cursor default
-    :text-shadow 0 2px #fff
+    :text-shadow 0 1px #fff
 
   ul.dropzone
     :min-height 20px
@@ -868,13 +883,14 @@ ul#settings_nav
     :size larger
 
   > li
-
     a
+      :font
+        :size smaller
       :display block
       :height 100%
       :border
         :bottom 1px solid #eee
-      :padding 5px 0
+      :padding 2px
 
 
 .settings_pane
@@ -954,6 +970,8 @@ ul#settings_nav
   :line-height 1em
   img
     :margin-right -1px
+    :width 35px
+    :height 35px
 
 #thumbnails
   :line-height 14px

From 5b66a191cd120f6767bc7aef1042fd599d9345c5 Mon Sep 17 00:00:00 2001
From: danielvincent <danielgrippi@gmail.com>
Date: Thu, 7 Oct 2010 23:25:49 -0700
Subject: [PATCH 2/4] more stream tweaks

---
 app/views/comments/_comment.html.haml         |  11 +-
 app/views/photos/_photo.haml                  |  35 +++---
 app/views/shared/_aspect_friends.haml         |  28 -----
 .../status_messages/_status_message.html.haml |  13 +-
 public/stylesheets/application.css            |  89 +++++---------
 public/stylesheets/sass/application.sass      | 115 ++++++------------
 6 files changed, 91 insertions(+), 200 deletions(-)

diff --git a/app/views/comments/_comment.html.haml b/app/views/comments/_comment.html.haml
index 3d8c551ca..7e22a3cd2 100644
--- a/app/views/comments/_comment.html.haml
+++ b/app/views/comments/_comment.html.haml
@@ -4,8 +4,9 @@
 
 %li.comment{:id => post.id}
   = person_image_tag(post.person)
-  %span.from
-    = link_to post.person.real_name, post.person
-  = post.text
-  %div.time
-    = "#{time_ago_in_words(post.updated_at)} #{t('.ago')}"
+  .content
+    .from
+      = link_to post.person.real_name, post.person
+    = post.text
+    %div.time
+      = "#{time_ago_in_words(post.updated_at)} #{t('.ago')}"
diff --git a/app/views/photos/_photo.haml b/app/views/photos/_photo.haml
index 71049ac72..85a2cd80a 100644
--- a/app/views/photos/_photo.haml
+++ b/app/views/photos/_photo.haml
@@ -7,28 +7,27 @@
   = person_image_tag(post.person)
 
   .content
-    %span.from
+    .from
       = link_to post.person.real_name, post.person
-      %b
-        =t('.posted_a_new_photo_to')
-        = link_to post.album.name, object_path(post.album)
+      .aspect
+        → 
+        - if post.public?
+          the world
+        - else
+          - for aspect in current_user.aspects_with_post( post.id )
+            = aspect.name
 
-      %br
-      = render "albums/album", :post => post.album, :current_user => current_user
-      = link_to (image_tag post.url(:thumb_medium)), object_path(post)
+    =t('.posted_a_new_photo_to')
+    = link_to post.album.name, object_path(post.album)
+
+    %br
+    %br
+    = render "albums/album", :post => post.album, :current_user => current_user
+    = link_to (image_tag post.url(:thumb_medium)), object_path(post)
 
     .info
-      = link_to(how_long_ago(post), photo_path(post))
-      \--
+      %span.time= link_to(how_long_ago(post), photo_path(post))
       = link_to "#{t('.show_comments')} (#{post.comments.count})", '#', :class => "show_post_comments"
+
     = render   "comments/comments", :post => post
 
-  - if post.public?
-    .public_aspect_tag
-      public
-  - else
-    .aspect_tag
-      %ul
-        - for aspect in current_user.aspects_with_post( post.id )
-          %li= aspect.name
-
diff --git a/app/views/shared/_aspect_friends.haml b/app/views/shared/_aspect_friends.haml
index 78dd65a3a..03da4ee9b 100644
--- a/app/views/shared/_aspect_friends.haml
+++ b/app/views/shared/_aspect_friends.haml
@@ -3,34 +3,6 @@
 -#   the COPYRIGHT file.
 
 #friend_pictures
-  = owner_image_link
-  = owner_image_link
-  = owner_image_link
-  = owner_image_link
-  = owner_image_link
-  = owner_image_link
-  = owner_image_link
-  = owner_image_link
-  = owner_image_link
-  = owner_image_link
-  = owner_image_link
-  = owner_image_link
-  = owner_image_link
-  = owner_image_link
-  = owner_image_link
-  = owner_image_link
-  = owner_image_link
-  = owner_image_link
-  = owner_image_link
-  = owner_image_link
-  = owner_image_link
-  = owner_image_link
-  = owner_image_link
-  = owner_image_link
-  = owner_image_link
-  = owner_image_link
-  = owner_image_link
-  = owner_image_link
   = owner_image_link
   - for friend in @friends
     = person_image_link(friend)
diff --git a/app/views/status_messages/_status_message.html.haml b/app/views/status_messages/_status_message.html.haml
index 2b2dd1bd0..391251358 100644
--- a/app/views/status_messages/_status_message.html.haml
+++ b/app/views/status_messages/_status_message.html.haml
@@ -11,13 +11,16 @@
       = link_to post.person.real_name, post.person
       .aspect
         → 
-        - for aspect in current_user.aspects_with_post( post.id )
-          = aspect.name
+        - if post.public?
+          the world
+        - else
+          - for aspect in current_user.aspects_with_post( post.id )
+            = link_to aspect.name, aspect
 
       - if current_user.owns?(post)
         .destroy_link
-          = link_to t('.delete'), status_message_path(post), :confirm => t('.are_you_sure'), :method => :delete, :remote => true, :class => "delete"
           = render "shared/reshare", :post => post, :current_user => current_user
+          = link_to t('.delete'), status_message_path(post), :confirm => t('.are_you_sure'), :method => :delete, :remote => true, :class => "delete"
 
     = post.message
 
@@ -27,7 +30,3 @@
 
     = render "comments/comments", :post => post
 
-
-  - if post.public?
-    .public_aspect_tag
-      public
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index a97c3706c..3588ae0b0 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -155,6 +155,7 @@ li.message {
   li.message .delete:hover {
     background: #eeeeee; }
   li.message .content {
+    max-width: 610px;
     margin-top: -4px;
     padding-left: 65px;
     color: #444444;
@@ -167,6 +168,11 @@ li.message {
         display: inline;
         color: #bbbbbb;
         font-size: 12px; }
+        li.message .content .from .aspect a {
+          font-weight: normal;
+          color: #bbbbbb; }
+          li.message .content .from .aspect a:hover {
+            text-decoration: underline; }
       li.message .content .from a {
         font-weight: bold; }
     li.message .content div.info {
@@ -253,8 +259,8 @@ form {
 #stream div.comments {
   display: none; }
   #stream div.comments .avatar {
-    width: 30px;
-    height: 30px;
+    width: 35px;
+    height: 35px;
     margin-right: 10px; }
 
 input.comment_submit {
@@ -266,21 +272,26 @@ ul.comment_set {
     margin-top: 1em;
   padding: 0;
   list-style: none;
-  width: 610px; }
+  max-width: 610px; }
   ul.comment_set textarea {
     width: 100%; }
   ul.comment_set li.comment {
     margin-bottom: 0.5em;
     background-color: rgba(10, 81, 109, 0.05);
     padding: 0.6em;
-    border-bottom: 1px solid #dddddd;
-    font-size: 12px;
-    line-height: 17px; }
-    ul.comment_set li.comment .from a {
-      color: #444444; }
-    ul.comment_set li.comment div.time {
-      color: #666666;
-      font-size: 10px; }
+    border-bottom: 1px solid #dddddd; }
+    ul.comment_set li.comment .content {
+      color: #777777;
+      margin-top: -2px;
+      padding-left: 45px;
+      font-size: 12px;
+      line-height: 18px; }
+      ul.comment_set li.comment .content .from a {
+        color: #444444; }
+      ul.comment_set li.comment .content div.time {
+        color: #bbbbbb;
+        font-size: 11px;
+        font-weight: bold; }
     ul.comment_set li.comment form {
       margin-top: -5px;
       margin-bottom: 0;
@@ -311,18 +322,17 @@ ul.comment_set {
 .pagination a {
   padding: 3px; }
 
-.destroy_link, .request_button {
+li.message .from .destroy_link {
+  display: none;
   position: absolute;
-  right: 0; }
-  .destroy_link a, .request_button a {
+  right: 0;
+  font-size: 12px; }
+  li.message .from .destroy_link a {
     color: #999999;
     font-weight: normal; }
-    .destroy_link a:hover, .request_button a:hover {
+    li.message .from .destroy_link a:hover {
       text-decoration: underline; }
 
-.destroy_link {
-  display: none; }
-
 .request_buttons {
   position: absolute;
   right: 0;
@@ -697,49 +707,6 @@ ul#settings_nav {
 #fancybox-close:hover {
   background-color: transparent; }
 
-.aspect_tag,
-.public_aspect_tag {
-  position: absolute;
-  top: 15px;
-  right: 2em;
-  border-radius: 5px;
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  font-size: smaller;
-  padding: 0 6px;
-  color: #999999;
-  text-shadow: 0 1px white;
-  border-bottom: 1px solid #eeeeee;
-  cursor: default; }
-
-.public_aspect_tag {
-  background: -moz-linear-gradient(19% 75% 90deg, #fffa75, #fff8ba);
-  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff8ba), to(#fffa75));
-    background-color: #fffc7f;
-  border-top: 1px solid #ebe66c; }
-
-.aspect_tag {
-  background: -moz-linear-gradient(19% 75% 90deg, #e0e0e0, #f0f0f0);
-  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f0f0f0), to(#e0e0e0));
-    background-color: #eeeeee;
-  color: #999999;
-  text-shadow: 0 1px white;
-  border-top: 1px solid #dddddd; }
-  .aspect_tag ul {
-    display: inline;
-    margin: 0;
-    padding: 0;
-    list-style: none; }
-    .aspect_tag ul li {
-      display: inline-block;
-      margin-right: 2px;
-      padding-right: 4px;
-      border-right: 1px solid #cccccc; }
-      .aspect_tag ul li:last-child {
-        margin-right: 0;
-        padding-right: 0;
-        border-right: none; }
-
 #friend_pictures {
   line-height: 1em; }
   #friend_pictures img {
diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass
index 139e723a8..735cba95c 100644
--- a/public/stylesheets/sass/application.sass
+++ b/public/stylesheets/sass/application.sass
@@ -199,6 +199,7 @@ li.message
     :background #eee
 
   .content
+    :max-width 610px
     :margin
       :top -4px
     :padding
@@ -215,6 +216,14 @@ li.message
         :color #bbb
         :font
           :size 12px
+        a
+          :font
+            :weight normal
+          :color #bbb
+
+          &:hover
+            :text
+              :decoration underline
 
       a
         :font
@@ -345,8 +354,8 @@ form
   :display none
 
   .avatar
-    :width 30px
-    :height 30px
+    :width 35px
+    :height 35px
     :margin
       :right 10px
 
@@ -361,7 +370,7 @@ ul.comment_set
     :top 1em
   :padding 0
   :list-style none
-  :width 610px
+  :max-width 610px
 
   textarea
     :width 100%
@@ -375,18 +384,26 @@ ul.comment_set
     :border
       :bottom 1px solid #ddd
 
-    .from
-      a
-        :color #444
-    :font
-      :size 12px
+    .content
+      :color #777
+      :margin
+        :top -2px
+      :padding
+        :left 45px
+      .from
+        a
+          :color #444
+      :font
+        :size 12px
 
-    :line
-      :height 17px
+      :line
+        :height 18px
 
-    div.time
-      :color #666
-      :font-size 10px
+      div.time
+        :color #bbb
+        :font
+          :size 11px
+          :weight bold
 
     form
       :margin
@@ -428,9 +445,12 @@ ul.comment_set
   a
     :padding 3px
 
-.destroy_link, .request_button
+li.message .from .destroy_link
+  :display none
   :position absolute
   :right 0
+  :font
+    :size 12px
   a
     :color #999
     :font
@@ -439,9 +459,6 @@ ul.comment_set
       :text
         :decoration underline
 
-.destroy_link
-  :display none
-
 .request_buttons
   :position absolute
   :right 0
@@ -901,70 +918,6 @@ ul#settings_nav
   :background
     :color transparent
 
-.aspect_tag,
-.public_aspect_tag
-  :position absolute
-  :top 15px
-  :right 2em
-
-  :border-radius 5px
-  :-webkit-border-radius 5px
-  :-moz-border-radius 5px
-
-  :font
-    :size smaller
-  :padding 0 6px
-
-  :color #999
-  :text
-    :shadow 0 1px #fff
-
-  :border
-    :bottom 1px solid #eee
-
-  :cursor default
-
-.public_aspect_tag
-  :background -moz-linear-gradient(19% 75% 90deg,#FFFA75, #FFF8BA)
-  :background -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF8BA), to(#FFFA75))
-    :color #FFFC7F
-  :border
-    :top 1px solid #EBE66C
-
-.aspect_tag
-  :background -moz-linear-gradient(19% 75% 90deg,#E0E0E0, #F0F0F0)
-  :background -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F0F0F0), to(#E0E0E0))
-    :color #eee
-  :color #999
-  :text
-    :shadow 0 1px #fff
-  :border
-    :top 1px solid #ddd
-
-  ul
-    :display inline
-    :margin 0
-    :padding 0
-    :list
-      :style none
-
-    li
-      :display inline-block
-      :margin
-        :right 2px
-      :padding
-        :right 4px
-      :border
-        :right 1px solid #ccc
-
-      &:last-child
-        :margin
-          :right 0
-        :padding
-          :right 0
-        :border
-          :right none
-
 
 #friend_pictures
   :line-height 1em

From 8f741795fb643afc583c12098c0a076302f2c01a Mon Sep 17 00:00:00 2001
From: danielvincent <danielgrippi@gmail.com>
Date: Thu, 7 Oct 2010 23:27:31 -0700
Subject: [PATCH 3/4] aspect manage margin fix

---
 public/stylesheets/application.css       | 4 ++++
 public/stylesheets/sass/application.sass | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index 3588ae0b0..17e898e9c 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -716,3 +716,7 @@ ul#settings_nav {
 
 #thumbnails {
   line-height: 14px; }
+
+#aspect_list {
+  margin: 0;
+  padding: 0; }
diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass
index 735cba95c..0a7ee123f 100644
--- a/public/stylesheets/sass/application.sass
+++ b/public/stylesheets/sass/application.sass
@@ -928,3 +928,7 @@ ul#settings_nav
 
 #thumbnails
   :line-height 14px
+
+#aspect_list
+  :margin 0
+  :padding 0

From 894d6654b20b26689d027cb9eb2fc941d2ed4dad Mon Sep 17 00:00:00 2001
From: danielvincent <danielgrippi@gmail.com>
Date: Thu, 7 Oct 2010 23:35:55 -0700
Subject: [PATCH 4/4] only selected nav element should be a tab on aspect_nav,
 preventing tab overload.

---
 public/stylesheets/application.css       |  6 ++----
 public/stylesheets/sass/application.sass | 10 +++-------
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index 17e898e9c..fa7be11c8 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -538,11 +538,7 @@ h1.big_text {
       margin-right: 2px; }
       #aspect_nav ul > li a {
         text-shadow: 0 1px 0 #444444;
-        -webkit-border-radius: 3px 3px 0 0;
-        -moz-border-radius: 3px 3px 0 0;
         line-height: 22px;
-        background-color: #444444;
-        border: 1px solid #555555;
         padding: 3px 8px;
           padding-bottom: 3px;
         color: #999999; }
@@ -550,6 +546,8 @@ h1.big_text {
           background-color: #4e4e4e;
           color: #cccccc; }
       #aspect_nav ul > li.selected a {
+        -webkit-border-radius: 5px 5px 0 0;
+        -moz-border-radius: 5px 5px 0 0;
         -webkit-box-shadow: 0px -4px 6px -2px #777777;
         -moz-box-shadow: 0px -4px 6px -2px #777777;
         text-shadow: 0 1px 0 white;
diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass
index 0a7ee123f..a35c9dfd3 100644
--- a/public/stylesheets/sass/application.sass
+++ b/public/stylesheets/sass/application.sass
@@ -708,7 +708,6 @@ h1.big_text
   :font
     :family 'Arial', 'Helvetica', sans-serif
 
-
   #aspect_manage_button
     :display inline
 
@@ -730,14 +729,8 @@ h1.big_text
 
       a
         :text-shadow 0 1px 0 #444
-        :-webkit-border-radius 3px 3px 0 0
-        :-moz-border-radius 3px 3px 0 0
         :line
           :height 22px
-        :background
-          :color #444
-
-        :border 1px solid #555
 
         :padding 3px 8px
           :bottom 3px
@@ -749,6 +742,9 @@ h1.big_text
           :color #ccc
 
       &.selected a
+        :-webkit-border-radius 5px 5px 0 0 
+        :-moz-border-radius 5px 5px 0 0 
+
         :-webkit-box-shadow 0px -4px 6px -2px #777
         :-moz-box-shadow 0px -4px 6px -2px #777