mirror of https://github.com/Siphonay/mastodon
Improving status display design, including replies and threads
This commit is contained in:
parent
5ae54f9e36
commit
2825991e09
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 |
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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 }
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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 }
|
||||
|
|
|
@ -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 }
|
||||
|
|
Loading…
Reference in New Issue