nocebo/diaspora
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

nav should be collapsed into a filter list. comments are more clear.

Browse source
This commit is contained in:
danielvincent 2010-06-26 00:07:21 -07:00
parent a6c33b3e7b
commit 39e85754d8
5 changed files with 126 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/views/comments/_comment.html.haml
View file

@ -1,4 +1,6 @@
%li.comment
= comment.text
\---
= comment.person.real_name
%span.from
= link_to_person comment.person
= comment.text
%div.time
= "#{time_ago_in_words(comment.updated_at)} ago"

24
app/views/layouts/application.html.haml
View file

@ -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

2
app/views/status_messages/_status_message.html.haml
View file

@ -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

74
public/stylesheets/application.css
View file

@ -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; }

84
public/stylesheets/sass/application.sass
View file

@ -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