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;
$quaternary-color: #34314c;
$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 "font-awesome-sprockets";
@ -10,35 +13,23 @@ $background-color: #fff;
body {
font-family: 'Noto Sans', sans-serif;
background: $secondary-color;
background: $background-color image-url('background-pattern.png');
font-size: 13px;
line-height: 18px;
color: $quaternary-color;
&::before {
display: block;
content: "";
position: absolute;
background: $secondary-color;
width: 100%;
height: 200px;
z-index: -1;
top: 0;
left: 0;
}
color: $text-color;
}
.container {
width: 800px;
margin: 0 auto;
z-index: 2;
margin-top: 40px;
}
.footer {
text-align: center;
padding: 100px 0;
font-size: 12px;
color: lighten($quaternary-color, 15%);
color: $text-color;
.mastodon-link {
color: $quaternary-color;

View file

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

View file

@ -10,4 +10,21 @@ module ProfileHelper
def status_url(status)
status.local? ? super(name: status.account.username, id: status.stream_entry.id) : status.url
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

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?
.pre-header
%i.fa.fa-retweet
Shared by
= link_to display_name(status.account), profile_url(status.account), class: 'name'
.entry-container
.entry__container
.avatar
= image_tag status.reblog? ? status.reblog.account.avatar.url(:small) : status.account.avatar.url(:small)
.container
= image_tag avatar_for_status_url(status)
.entry__container__container
.header
= render partial: 'status_header', locals: { status: status.reblog? ? status.reblog : status }
.content
= status.content
.counters
= 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
%span{ title: status.created_at }
= time_ago_in_words(status.created_at)
ago
= relative_time(status.created_at)

View file

@ -1,2 +1,2 @@
%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
- @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 }