commit: 2825991e09272d6e7227da9d9b8dc387614a83df
parent: 5ae54f9e364880e1350ddcc8251a23cf79ae55fc
Author: Eugen Rochko <eugen@zeonfederated.com>
Date: Sun, 28 Feb 2016 14:02:53 +0100
Improving status display design, including replies and threads
Diffstat:
9 files changed, 58 insertions(+), 37 deletions(-)
diff --git a/app/assets/images/avatars/missing.png b/app/assets/images/avatars/missing.png
Binary files differ.
diff --git a/app/assets/images/background-pattern.png b/app/assets/images/background-pattern.png
Binary files differ.
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -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;
diff --git a/app/assets/stylesheets/profile.scss b/app/assets/stylesheets/profile.scss
@@ -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 {
diff --git a/app/helpers/profile_helper.rb b/app/helpers/profile_helper.rb
@@ -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
diff --git a/app/views/profile/_status.html.haml b/app/views/profile/_status.html.haml
@@ -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 }
diff --git a/app/views/profile/_status_header.html.haml b/app/views/profile/_status_header.html.haml
@@ -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)
diff --git a/app/views/profile/entry.html.haml b/app/views/profile/entry.html.haml
@@ -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 }
diff --git a/app/views/profile/show.html.haml b/app/views/profile/show.html.haml
@@ -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 }
