From 39e85754d86f83e76f8571088b3455df0c598df9 Mon Sep 17 00:00:00 2001
From: danielvincent <danielgrippi@gmail.com>
Date: Sat, 26 Jun 2010 00:07:21 -0700
Subject: [PATCH] nav should be collapsed into a filter list. comments are
more clear.
---
app/views/comments/_comment.html.haml | 8 +-
app/views/layouts/application.html.haml | 24 +++---
.../status_messages/_status_message.html.haml | 2 +-
public/stylesheets/application.css | 74 ++++++++++------
public/stylesheets/sass/application.sass | 84 +++++++++++++------
5 files changed, 126 insertions(+), 66 deletions(-)
diff --git a/app/views/comments/_comment.html.haml b/app/views/comments/_comment.html.haml
index 9914fcb7ac..74c1f3c6ba 100644
--- a/app/views/comments/_comment.html.haml
+++ b/app/views/comments/_comment.html.haml
@@ -1,4 +1,6 @@
%li.comment
- = comment.text
- \---
- = comment.person.real_name
\ No newline at end of file
+ %span.from
+ = link_to_person comment.person
+ = comment.text
+ %div.time
+ = "#{time_ago_in_words(comment.updated_at)} ago"
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 8377906d27..cc03cceaeb 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -24,9 +24,7 @@
- if user_signed_in?
:javascript
- $(document).ready(function(){
-
-
+ $(document).ready(function(){
function debug(str){ $("#debug").append("<p>" + str); };
@@ -41,7 +39,15 @@
ws.onopen = function() {
debug("connected...");
};
+
+
+ $('#show_filters').hover( function() {
+ $("#stream_filters").fadeIn(80);
+ },
+ function() {
+ $("#stream_filters").fadeOut(100);
});
+ });
%body
- flash.each do |name, msg|
@@ -60,15 +66,17 @@
= 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
- %nav
- %ul.nav
+ #content
+ #main
+ #show_filters
+ = link_to "show all", "#"
+ %ul#stream_filters
%a{ :href => root_path, :title => "Your network stream."}
%li home
%a{ :href => status_messages_path, :title => "Recent status messages."}
@@ -79,10 +87,6 @@
%li blogs
%a{ :href => friends_path, :title => "Your list of connections with other seeds."}
%li friends
-
-
- #content
- #main
= yield
= render "posts/debug"
#friends_list
diff --git a/app/views/status_messages/_status_message.html.haml b/app/views/status_messages/_status_message.html.haml
index 0eb914fafa..83e86f72e8 100644
--- a/app/views/status_messages/_status_message.html.haml
+++ b/app/views/status_messages/_status_message.html.haml
@@ -5,10 +5,10 @@
%div.time
= link_to "#{time_ago_in_words(post.updated_at)} ago", status_message_path(post)
%div.comments
- = render "comments/new_comment", :post => post
%ul.comment_set
- for comment in post.comments
= render "comments/comment", :comment => comment
+ = render "comments/new_comment", :post => post
- if mine?(post)
= link_to 'Destroy', status_message_path(post), :confirm => 'Are you sure?', :method => :delete
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index 599de669cf..e422bbfaff 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -79,26 +79,34 @@ header {
color: #cccccc;
border: none; }
-ul.nav {
+#show_filters {
+ z-index: 100;
position: absolute;
+ left: 630px;
+ text-align: right; }
+
+#show_filters > a {
+ border: 1px solid #666666;
+ padding: 5px; }
+
+ul#stream_filters {
+ display: none;
padding: 0;
margin: 0;
- width: 200px;
- top: 100px;
- font-size: 130%; }
- ul.nav li {
+ background: white; }
+ ul#stream_filters li {
display: block;
- padding: 5px 10px;
- background-color: #f2f8fc;
- border: 1px solid white; }
- ul.nav li:first-child {
+ padding: 5px 0; }
+ ul#stream_filters li:first-child {
border-top-right-radius: 5px;
border-top-left-radius: 5px; }
- ul.nav li:last-child {
+ ul#stream_filters li:last-child {
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px; }
- ul.nav a {
+ ul#stream_filters a {
color: #b1cfe3; }
+ ul#stream_filters a:hover {
+ color: black; }
#header_below {
z-index: 5;
@@ -117,11 +125,11 @@ ul.nav {
#content {
position: absolute;
- left: 250px;
top: 94px;
- width: 60%;
- min-width: 500px;
- max-width: 700px; }
+ width: 1000px; }
+
+#main {
+ width: 700px; }
ul#stream {
margin: 0;
@@ -146,9 +154,6 @@ li.message {
color: #bababa;
font-size: 70%; }
-.mine {
- background-color: rgba(202, 237, 204, 0.5); }
-
h1 {
position: relative;
font-size: 24px;
@@ -177,14 +182,9 @@ h3 {
width: 100%;
margin-bottom: 1em; }
-#main {
- width: 70%;
- min-width: 400px;
- max-width: 700px;
- float: left; }
-
#friends_list {
- float: right;
+ position: absolute;
+ left: 600px;
width: 20%;
min-width: 130px;
padding-left: 10%; }
@@ -204,3 +204,27 @@ form {
color: black; }
#user_name a:hover {
color: #cc1e14; }
+
+#comment_text {
+ font-size: 75%;
+ padding: 3px; }
+
+ul.comment_set {
+ margin: 0;
+ margin-top: 1em;
+ 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);
+ padding: 0.6em;
+ border-radius: 5px; }
+ ul.comment_set li.comment .from {
+ color: #666666;
+ font-weight: normal; }
+ ul.comment_set li.comment .from a {
+ color: #333333;
+ font-weight: bold; }
diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass
index 9e13e0657a..afb2097451 100644
--- a/public/stylesheets/sass/application.sass
+++ b/public/stylesheets/sass/application.sass
@@ -10,6 +10,8 @@ a
&:hover
:color #CC1E14
+
+
#flash_notice,
#flash_error,
#flash_alert
@@ -92,34 +94,34 @@ header
:color #ccc
:border none
-
-ul.nav
+#show_filters
+ :z-index 100
:position absolute
+ :left 630px
+ :text-align right
+
+#show_filters > a
+ :border 1px solid #666
+ :padding 5px
+
+ul#stream_filters
+ :display none
:padding 0
:margin 0
- :width 200px
- :top 100px
- :font
- :size 130%
-
li
:display block
- :padding 5px 10px
- :background
- :color #F2F8FC
- :border 1px solid #fff
-
-
+ :padding 5px 0
&:first-child
:border-top-right-radius 5px
:border-top-left-radius 5px
-
&:last-child
:border-bottom-right-radius 5px
:border-bottom-left-radius 5px
-
a
:color #B1CFE3
+ a:hover
+ :color #000
+ :background #fff
#header_below
:z-index 5
@@ -140,11 +142,11 @@ ul.nav
#content
:position absolute
- :left 250px
:top 94px
- :width 60%
- :min-width 500px
- :max-width 700px
+ :width 1000px
+
+#main
+ :width 700px
ul#stream
:margin 0
@@ -177,7 +179,7 @@ li.message
:color #bababa
:font-size 70%
.mine
- :background-color rgba(202, 237, 204, 0.5)
+ //:background-color rgba(202, 237, 204, 0.5)
h1
:position relative
@@ -215,14 +217,9 @@ h3
:margin
:bottom 1em
-#main
- :width 70%
- :min-width 400px
- :max-width 700px
- :float left
-
#friends_list
- :float right
+ :position absolute
+ :left 600px
:width 20%
:min-width 130px
:padding-left 10%
@@ -247,3 +244,36 @@ form
:background
:color rgba( 255, 255, 255, 0.5)
+#comment_text
+ :font
+ :size 75%
+ :padding 3px
+
+ul.comment_set
+ :margin 0
+ :top 1em
+ :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)
+ :padding 0.6em
+ :border-radius 5px
+
+ .from
+ :color #666
+ :font
+ :weight normal
+ a
+ :color #333
+ :font
+ :weight bold
+
+
--
GitLab