diff --git a/app/assets/images/avatars/missing.png b/app/assets/images/avatars/missing.png index 40353039f..223b4ed2c 100644 Binary files a/app/assets/images/avatars/missing.png and b/app/assets/images/avatars/missing.png differ diff --git a/app/assets/images/background-pattern.png b/app/assets/images/background-pattern.png new file mode 100644 index 000000000..9afda79fe Binary files /dev/null and b/app/assets/images/background-pattern.png differ diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 068480994..9787c6be1 100644 --- 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 index e2b59268a..71466527e 100644 --- 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 index 2abe67635..cb19638d3 100644 --- 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 index c2033b4f7..1edd8df77 100644 --- 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 index e1c810088..225a89d71 100644 --- 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 index 8d0b23607..33eaa5f1d 100644 --- 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 index b93791734..b7f4bdeaf 100644 --- 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 }