Improving status display design, including replies and threads

This commit is contained in:
Eugen Rochko 2016-02-28 14:02:53 +01:00
parent 5ae54f9e36
commit 2825991e09
9 changed files with 58 additions and 37 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 909 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

View File

@ -3,6 +3,9 @@ $secondary-color: #ffc952;
$tertiary-color: #47b8e0; $tertiary-color: #47b8e0;
$quaternary-color: #34314c; $quaternary-color: #34314c;
$background-color: #fff; $background-color: #fff;
$darker-background-color: #e3dede;
$text-color: #333030;
$lighter-text-color: #8b8687;
@import url("https://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic"); @import url("https://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic");
@import "font-awesome-sprockets"; @import "font-awesome-sprockets";
@ -10,35 +13,23 @@ $background-color: #fff;
body { body {
font-family: 'Noto Sans', sans-serif; font-family: 'Noto Sans', sans-serif;
background: $secondary-color; background: $background-color image-url('background-pattern.png');
font-size: 13px; font-size: 13px;
line-height: 18px; line-height: 18px;
color: $quaternary-color; color: $text-color;
&::before {
display: block;
content: "";
position: absolute;
background: $secondary-color;
width: 100%;
height: 200px;
z-index: -1;
top: 0;
left: 0;
}
} }
.container { .container {
width: 800px; width: 800px;
margin: 0 auto; margin: 0 auto;
z-index: 2; margin-top: 40px;
} }
.footer { .footer {
text-align: center; text-align: center;
padding: 100px 0; padding: 100px 0;
font-size: 12px; font-size: 12px;
color: lighten($quaternary-color, 15%); color: $text-color;
.mastodon-link { .mastodon-link {
color: $quaternary-color; color: $quaternary-color;

View File

@ -1,8 +1,7 @@
.card { .card {
margin-top: 40px;
display: flex; display: flex;
background: darken($background-color, 10%); background: $darker-background-color;
border-bottom: 1px solid darken($background-color, 15%); border: 1px solid darken($darker-background-color, 15%);
box-shadow: 4px 3px 0 rgba(0, 0, 0, 0.1); box-shadow: 4px 3px 0 rgba(0, 0, 0, 0.1);
.bio { .bio {
@ -12,11 +11,12 @@
.name { .name {
font-size: 24px; font-size: 24px;
line-height: 18px * 1.5; line-height: 18px * 1.5;
color: $text-color;
small { small {
display: block; display: block;
font-size: 14px; font-size: 14px;
color: lighten($quaternary-color, 15%); color: $lighter-text-color;
} }
} }
@ -25,13 +25,15 @@
float: left; float: left;
margin-right: 10px; margin-right: 10px;
padding: 10px; padding: 10px;
padding-left: 9px;
margin-top: -30px; margin-top: -30px;
img { img {
width: 94px; width: 94px;
height: 94px; height: 94px;
display: block; display: block;
border: 2px solid $background-color; border: 2px solid $lighter-text-color;
border-radius: 5px;
} }
} }
} }
@ -49,12 +51,17 @@
border-left: 2px solid $tertiary-color; border-left: 2px solid $tertiary-color;
} }
&.entry-predecessor, &.entry-successor {
border-left: 2px solid $lighter-text-color;
background: darken($background-color, 5%);
}
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
} }
} }
.entry-container { .entry__container {
display: flex; display: flex;
} }
@ -69,11 +76,11 @@
width: 48px; width: 48px;
height: 48px; height: 48px;
display: block; display: block;
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1); border-radius: 5px;
} }
} }
.container { .entry__container__container {
flex-grow: 1; flex-grow: 1;
} }
@ -84,10 +91,10 @@
.name { .name {
text-decoration: none; text-decoration: none;
color: lighten($quaternary-color, 15%); color: $lighter-text-color;
strong { strong {
color: $quaternary-color; color: $text-color;
} }
&:hover { &:hover {
@ -124,7 +131,7 @@
.time { .time {
text-decoration: none; text-decoration: none;
color: lighten($quaternary-color, 15%); color: $lighter-text-color;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
@ -133,7 +140,7 @@
.counters { .counters {
margin-top: 15px; margin-top: 15px;
color: lighten($quaternary-color, 15%); color: $lighter-text-color;
cursor: default; cursor: default;
padding: 10px; padding: 10px;
padding-top: 0; padding-top: 0;
@ -141,7 +148,7 @@
.counter { .counter {
display: inline-block; display: inline-block;
margin-right: 10px; margin-right: 10px;
color: lighten($quaternary-color, 50%); color: $lighter-text-color;
} }
.conversation-link { .conversation-link {

View File

@ -10,4 +10,21 @@ module ProfileHelper
def status_url(status) def status_url(status)
status.local? ? super(name: status.account.username, id: status.stream_entry.id) : status.url status.local? ? super(name: status.account.username, id: status.stream_entry.id) : status.url
end end
def avatar_for_status_url(status)
status.reblog? ? status.reblog.account.avatar.url(:small) : status.account.avatar.url(:small)
end
def entry_classes(status, is_predecessor, is_successor, include_threads)
classes = ['entry']
classes << 'entry-reblog' if status.reblog?
classes << 'entry-predecessor' if is_predecessor
classes << 'entry-successor' if is_successor
classes << 'entry-center' if include_threads
classes.join(' ')
end
def relative_time(date)
date < 5.days.ago ? date.strftime("%d.%m.%Y") : "#{time_ago_in_words(date)} ago"
end
end end

View File

@ -1,16 +1,23 @@
%div.entry{ class: status.reblog? ? 'entry-reblog' : 'entry-status' } - if status.reply? && include_threads
= render partial: 'status', locals: { status: status.thread, include_threads: false, is_predecessor: true, is_successor: false }
.entry{ class: entry_classes(status, is_predecessor, is_successor, include_threads) }
- if status.reblog? - if status.reblog?
.pre-header .pre-header
%i.fa.fa-retweet %i.fa.fa-retweet
Shared by Shared by
= link_to display_name(status.account), profile_url(status.account), class: 'name' = link_to display_name(status.account), profile_url(status.account), class: 'name'
.entry-container .entry__container
.avatar .avatar
= image_tag status.reblog? ? status.reblog.account.avatar.url(:small) : status.account.avatar.url(:small) = image_tag avatar_for_status_url(status)
.container .entry__container__container
.header .header
= render partial: 'status_header', locals: { status: status.reblog? ? status.reblog : status } = render partial: 'status_header', locals: { status: status.reblog? ? status.reblog : status }
.content .content
= status.content = status.content
.counters .counters
= render partial: 'status_footer', locals: { status: status.reblog? ? status.reblog : status } = render partial: 'status_footer', locals: { status: status.reblog? ? status.reblog : status }
- if include_threads
- status.replies.each do |status|
= render partial: 'status', locals: { status: status, include_threads: false, is_successor: true, is_predecessor: false }

View File

@ -4,5 +4,4 @@
= link_to status_url(status), class: 'time' do = link_to status_url(status), class: 'time' do
%span{ title: status.created_at } %span{ title: status.created_at }
= time_ago_in_words(status.created_at) = relative_time(status.created_at)
ago

View File

@ -1,2 +1,2 @@
%div.activity-stream %div.activity-stream
= render partial: @type, locals: { @type.to_sym => @entry.activity } = render partial: @type, locals: { @type.to_sym => @entry.activity, include_threads: true, is_predecessor: false, is_successor: false }

View File

@ -7,4 +7,4 @@
.activity-stream .activity-stream
- @account.statuses.order('id desc').each do |status| - @account.statuses.order('id desc').each do |status|
= render partial: 'status', locals: { status: status } = render partial: 'status', locals: { status: status, include_threads: false, is_successor: false, is_predecessor: false }