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

intermediate misc ui polish

Browse source
This commit is contained in:
danielvincent 2010-10-07 22:51:08 -07:00
parent 14ae1e8e6d
commit b314ee22ec
10 changed files with 186 additions and 131 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/views/aspects/manage.html.haml
View file

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

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

@ -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')}"

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

@ -56,7 +56,7 @@
= render "shared/sub_header"
.container
.span-5.last
.span-4.append-1.last
= yield :left_pane
.span-19.last

28
app/views/shared/_aspect_friends.haml
View file

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

4
app/views/shared/_sub_header.haml
View file

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

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

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

2
app/views/users/edit.html.haml
View file

@ -14,7 +14,7 @@
- content_for :publish do
%h1="#{t('.editing_profile')}"
%h2="#{t('.editing_profile')}"
- content_for :left_pane do
%ul#settings_nav

2
public/javascripts/aspect-edit.js
View file

@ -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"),

116
public/stylesheets/application.css
View file

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

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

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