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

ui fixup

Browse source
This commit is contained in:
danielvincent 2010-06-27 16:17:42 -07:00
parent 5be27f33ec
commit 462bd96189
3 changed files with 80 additions and 146 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -48,11 +48,11 @@
}); });
}); });
%body %body
- flash.each do |name, msg| - flash.each do |name, msg|
= content_tag :div, msg, :id => "flash_#{name}" = content_tag :div, msg, :id => "flash_#{name}"
%header %header
.container
%a#diaspora_text{:href => root_path} %a#diaspora_text{:href => root_path}
%img{:src => '/images/diaspora_white.png'} %img{:src => '/images/diaspora_white.png'}
@ -65,16 +65,16 @@
= link_to "login", new_user_session_path = link_to "login", new_user_session_path
#header_below #header_below
.container
- if user_signed_in? - if user_signed_in?
%h1#user_name %h1#user_name
= link_to User.first.real_name, root_url = link_to User.first.real_name, root_url
%span.description %span.description
= my_latest_message = my_latest_message
#content .container
#main #content.span-24.last
#show_filters .span-3.append-1.last
= link_to "show all", "#"
%ul#stream_filters %ul#stream_filters
%a{ :href => root_path, :title => "Your network stream."} %a{ :href => root_path, :title => "Your network stream."}
%li home %li home
@ -86,7 +86,8 @@
%li blogs %li blogs
%a{ :href => friends_path, :title => "Your list of connections with other seeds."} %a{ :href => friends_path, :title => "Your list of connections with other seeds."}
%li friends %li friends
.span-15.append-1.last
= yield = yield
= render "posts/debug" = render "posts/debug"
#friends_list .span-3.last
= render 'friends/sidebar' if user_signed_in? = render 'friends/sidebar' if user_signed_in?

80
public/stylesheets/application.css
View file

@ -1,5 +1,4 @@
body { body {
font-family: "helvetica", "arial", "sans-serif";
padding: 2em; padding: 2em;
margin: 0; } margin: 0; }
@ -46,34 +45,29 @@ a {
margin: 0; margin: 0;
font-weight: bold; font-weight: bold;
font-size: 12px; font-size: 12px;
background-color: #cc0000; background-color: #cc0000; }
color: white; }
.error_messages p { .error_messages p {
margin: 8px 10px; } margin: 8px 10px; }
.error_messages ul { .error_messages ul {
margin: 0; } margin: 0; }
header { header {
z-index: 10; position: relative;
position: fixed; margin: -2em;
width: 100%; margin-bottom: 0;
margin-top: -2em;
margin-right: -2em;
margin-left: -2em;
height: 30px; height: 30px;
color: white; color: white;
background-color: #1a1a21; background-color: #1a1a21;
border-bottom: 2px solid #f2f8fc; border-bottom: 2px solid white;
padding-top: 5px; } padding-top: 5px; }
header #diaspora_text { header #diaspora_text {
position: fixed; position: absolute;
border: none; border: none;
top: 8px; top: 10px; }
left: 1em; }
header #session_action { header #session_action {
position: fixed; position: absolute;
right: 1em; right: 300px;
font-size: 120%; font-size: 110%;
top: 7px; } top: 7px; }
header #session_action a { header #session_action a {
color: #cccccc; color: #cccccc;
@ -90,10 +84,8 @@ header {
padding: 5px; } padding: 5px; }
ul#stream_filters { ul#stream_filters {
display: none;
padding: 0; padding: 0;
margin: 0; margin: 0; }
background: white; }
ul#stream_filters li { ul#stream_filters li {
display: block; display: block;
padding: 5px 0; } padding: 5px 0; }
@ -109,25 +101,16 @@ ul#stream_filters {
color: black; } color: black; }
#header_below { #header_below {
z-index: 5; margin: 0 -2em;
position: fixed; -webkit-box-shadow: 0 2px 2px -1px #999999;
height: 40px; background-color: #f2f8fc;
width: 100%; border-bottom: 1px solid #7e96a6;
padding: 1em; padding-top: 0.8em;
padding-top: 40px; padding-bottom: 0.4em; }
top: 0;
background-color: rgba(255, 255, 255, 0.9);
margin-left: -2em; }
#header_below img {
position: absolute;
width: 200px;
border-radius: 5px; }
#content { #content {
position: absolute; position: absolute;
top: 94px; top: 94px; }
width: 60%;
min-width: 700px; }
#main { #main {
width: 100%; } width: 100%; }
@ -144,7 +127,6 @@ ul#stream {
li.message { li.message {
line-height: 140%; line-height: 140%;
font-size: 120%;
font-family: "Lucida Grande"; font-family: "Lucida Grande";
color: #999999; } color: #999999; }
li.message span.from { li.message span.from {
@ -155,9 +137,13 @@ li.message {
color: #bababa; color: #bababa;
font-size: 70%; } font-size: 70%; }
#user_name {
font-size: 15px;
line-height: 100%; }
h1 { h1 {
position: relative; position: relative;
font-size: 24px; font-size: 18px;
font-weight: bold; font-weight: bold;
line-height: 36px; } line-height: 36px; }
h1 p.description, h1 span.description { h1 p.description, h1 span.description {
@ -166,11 +152,6 @@ h1 {
color: #999999; color: #999999;
padding: 0.1em; } padding: 0.1em; }
.big_number {
font-weight: bold;
font-size: 500%;
line-height: 100%; }
h3 { h3 {
position: relative; position: relative;
font-size: 18px; font-size: 18px;
@ -183,30 +164,22 @@ h3 {
width: 100%; width: 100%;
margin-bottom: 1em; } margin-bottom: 1em; }
#friends_list {
position: absolute;
right: 0;
width: 20%;
min-width: 130px; }
form { form {
font-size: 130%; font-size: 120%;
margin: 1em; margin: 1em;
margin-left: 0em; } margin-left: 0em; }
form input { form input {
font-size: 150%;
padding: 0.2em; padding: 0.2em;
max-width: 100%; } max-width: 100%; }
#user_name { #user_name {
background-color: rgba(255, 255, 255, 0.5); } text-shadow: 0 1px 0 white; }
#user_name a { #user_name a {
color: black; } color: black; }
#user_name a:hover { #user_name a:hover {
color: #cc1e14; } color: #cc1e14; }
#comment_text { #comment_text {
font-size: 75%;
padding: 3px; } padding: 3px; }
ul.comment_set { ul.comment_set {
@ -215,11 +188,10 @@ ul.comment_set {
padding: 0; padding: 0;
padding-left: 1em; padding-left: 1em;
list-style: none; list-style: none;
font-size: 80%;
width: 90%; } width: 90%; }
ul.comment_set li.comment { ul.comment_set li.comment {
margin-bottom: 0.5em; margin-bottom: 0.5em;
background-color: rgba(230, 239, 247, 0.4); background-color: #f2f8fc;
padding: 0.6em; padding: 0.6em;
border-radius: 5px; } border-radius: 5px; }
ul.comment_set li.comment .from { ul.comment_set li.comment .from {

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

@ -1,6 +1,4 @@
body body
:font
:family 'helvetica', 'arial', 'sans-serif'
:padding 2em :padding 2em
:margin 0 :margin 0
a a
@ -10,8 +8,6 @@ a
&:hover &:hover
:color #CC1E14 :color #CC1E14
#flash_notice, #flash_notice,
#flash_error, #flash_error,
#flash_alert #flash_alert
@ -52,43 +48,34 @@ a
:weight bold :weight bold
:size 12px :size 12px
:background-color #c00 :background-color #c00
:color #fff
p p
:margin 8px 10px :margin 8px 10px
ul ul
:margin 0 :margin 0
header header
:z-index 10 :position relative
:margin -2em
:position fixed :bottom 0
:width 100%
:margin
:top -2em
:right -2em
:left -2em
:height 30px :height 30px
:color #fff :color #fff
:background :background
:color #1A1A21 :color #1A1A21
:border :border
:bottom 2px solid #F2F8FC :bottom 2px solid #fff
:padding :padding
:top 5px :top 5px
#diaspora_text #diaspora_text
:position fixed :position absolute
:border none :border none
:top 8px :top 10px
:left 1em
#session_action #session_action
:position fixed :position absolute
:right 1em :right 300px
:font :font
:size 120% :size 110%
:top 7px :top 7px
a a
:color #ccc :color #ccc
@ -105,7 +92,6 @@ header
:padding 5px :padding 5px
ul#stream_filters ul#stream_filters
:display none
:padding 0 :padding 0
:margin 0 :margin 0
li li
@ -121,30 +107,20 @@ ul#stream_filters
:color #B1CFE3 :color #B1CFE3
a:hover a:hover
:color #000 :color #000
:background #fff
#header_below #header_below
:z-index 5 :margin 0 -2em
:position fixed :-webkit-box-shadow 0 2px 2px -1px #999
:height 40px :background-color #F2F8FC
:width 100% :border
:padding 1em :bottom 1px solid #7E96A6
:top 40px :padding
:top 0 :top 0.8em
:background :bottom 0.4em
:color rgba( 255, 255, 255, 0.9)
:margin
:left -2em
img
:position absolute
:width 200px
:border-radius 5px
#content #content
:position absolute :position absolute
:top 94px :top 94px
:width 60%
:min-width 700px
#main #main
:width 100% :width 100%
@ -164,7 +140,6 @@ ul#stream
li.message li.message
:line-height 140% :line-height 140%
:font :font
:size 120%
:family 'Lucida Grande' :family 'Lucida Grande'
:color #999 :color #999
@ -182,10 +157,15 @@ li.message
.mine .mine
//:background-color rgba(202, 237, 204, 0.5) //:background-color rgba(202, 237, 204, 0.5)
#user_name
:font
:size 15px
:line-height 100%
h1 h1
:position relative :position relative
:font :font
:size 24px :size 18px
:weight bold :weight bold
:line-height 36px :line-height 36px
@ -196,12 +176,6 @@ h1
:color #999 :color #999
:padding 0.1em :padding 0.1em
.big_number
:font
:weight bold
:size 500%
:line-height 100%
h3 h3
:position relative :position relative
:font :font
@ -218,21 +192,13 @@ h3
:margin :margin
:bottom 1em :bottom 1em
#friends_list
:position absolute
:right 0
:width 20%
:min-width 130px
form form
:font :font
:size 130% :size 120%
:margin 1em :margin 1em
:margin-left 0em :margin-left 0em
input input
:font
:size 150%
:padding 0.2em :padding 0.2em
:max-width 100% :max-width 100%
@ -241,12 +207,10 @@ form
:color #000 :color #000
&:hover &:hover
:color #CC1E14 :color #CC1E14
:background :text
:color rgba( 255, 255, 255, 0.5) :shadow 0 1px 0 #fff
#comment_text #comment_text
:font
:size 75%
:padding 3px :padding 3px
ul.comment_set ul.comment_set
@ -255,15 +219,12 @@ ul.comment_set
:padding 0 :padding 0
:left 1em :left 1em
:list-style none :list-style none
:font
:size 80%
:width 90% :width 90%
li.comment li.comment
:margin :margin
:bottom 0.5em :bottom 0.5em
:background :background-color #F2F8FC
:color rgba( 230, 239, 247, 0.4)
:padding 0.6em :padding 0.6em
:border-radius 5px :border-radius 5px