From ab80ebdeecf9410c5b43dde333b2e036e1198e24 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 5 Mar 2016 23:42:40 +0100 Subject: [PATCH] Adjusting design of profile and entry pages, linkify mentions in statuses --- app/assets/stylesheets/accounts.scss | 35 +++++++++--------- app/assets/stylesheets/application.scss | 16 +++++++-- app/assets/stylesheets/stream_entries.scss | 38 ++++++++++---------- app/controllers/accounts_controller.rb | 2 ++ app/controllers/stream_entries_controller.rb | 2 ++ app/helpers/stream_entries_helper.rb | 13 +++++++ app/views/accounts/show.html.haml | 2 +- app/views/layouts/public.html.haml | 6 ++++ app/views/stream_entries/_status.html.haml | 2 +- 9 files changed, 75 insertions(+), 41 deletions(-) create mode 100644 app/views/layouts/public.html.haml diff --git a/app/assets/stylesheets/accounts.scss b/app/assets/stylesheets/accounts.scss index a777633f1a..89fa8f5bcb 100644 --- a/app/assets/stylesheets/accounts.scss +++ b/app/assets/stylesheets/accounts.scss @@ -1,39 +1,40 @@ .card { - display: flex; - background: $primary-color; - box-shadow: 4px 3px 0 rgba(0, 0, 0, 0.1); + background: $primary-color image-url('background-photo.jpeg'); + background-size: cover; + padding: 80px 0; + padding-bottom: 30px; + border-radius: 4px 4px 0 0; .bio { - flex-grow: 1; + } .name { + display: block; font-size: 20px; line-height: 18px * 1.5; - color: $quaternary-color; + color: #fff; + font-weight: 500; + text-align: center; small { display: block; font-size: 14px; - color: $quaternary-color; + color: #2b90d9; + font-weight: 400; } } .avatar { - width: 96px; - float: left; - margin-right: 10px; - padding: 10px; - padding-right: 0; - padding-left: 9px; - margin-top: -30px; + width: 120px; + margin: 0 auto; + margin-bottom: 15px; img { - width: 94px; - height: 94px; + width: 120px; + height: 120px; display: block; - border-radius: 5px; - box-shadow: 4px 3px 0 rgba(0, 0, 0, 0.1); + border-radius: 120px; } } } diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index c7b8814f5a..42fae02e1e 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -69,12 +69,13 @@ table { body { font-family: 'Roboto', sans-serif; - background: $background-color image-url('background-photo.jpeg'); + background: #282c37 image-url('background-photo.jpeg'); background-size: cover; font-size: 13px; line-height: 18px; font-weight: 400; - color: $text-color; + color: #fff; + padding-bottom: 140px; } .container { @@ -221,6 +222,17 @@ body { } } +.footer { + text-align: center; + margin-top: 30px; + + .domain { + font-size: 12px; + font-weight: 400; + font-family: 'Roboto Mono', monospace; + } +} + @import 'home'; @import 'accounts'; @import 'stream_entries'; diff --git a/app/assets/stylesheets/stream_entries.scss b/app/assets/stylesheets/stream_entries.scss index 5689880cae..5fc6e66cd2 100644 --- a/app/assets/stylesheets/stream_entries.scss +++ b/app/assets/stylesheets/stream_entries.scss @@ -4,9 +4,9 @@ box-shadow: 4px 3px 0 rgba(0, 0, 0, 0.1); .entry { - border-bottom: 1px solid $darker-background-color; - background: $background-color; - border-left: 2px solid $primary-color; + border-bottom: 1px solid #d9e1e8; + background: #fff; + border-left: 2px solid #fff; &.entry-reblog { border-left: 2px solid $tertiary-color; @@ -19,12 +19,10 @@ } &.entry-predecessor, &.entry-successor { - border-left: 2px solid $lighter-text-color; - background: darken($background-color, 5%); .content { a { - color: $lighter-text-color; + } } } @@ -38,6 +36,7 @@ &:last-child { border-bottom: 0; + border-radius: 0 0 4px 0; } } @@ -47,16 +46,13 @@ .avatar { width: 48px; - padding: 10px; - padding-left: 8px; - padding-right: 0; - padding-top: 12px; + padding: 15px; img { width: 48px; height: 48px; display: block; - border-radius: 5px; + border-radius: 48px; } } @@ -66,16 +62,17 @@ .header { margin-bottom: 5px; - padding: 10px; + padding: 15px; padding-bottom: 0; padding-left: 8px; .name { text-decoration: none; - color: $lighter-text-color; + color: #9baec8; strong { - color: $text-color; + color: #282c37; + font-weight: 500; } &:hover { @@ -87,15 +84,15 @@ } .pre-header { - border-bottom: 1px solid darken($background-color, 5%); - color: $tertiary-color; + border-bottom: 1px solid #d9e1e8; + color: #2b90d9; padding: 5px 10px; padding-left: 8px; clear: both; .name { - color: $tertiary-color; - font-weight: bold; + color: #2b90d9; + font-weight: 500; text-decoration: none; &:hover { @@ -109,9 +106,10 @@ padding: 0 10px; padding-left: 8px; padding-bottom: 25px; + color: #282c37; a { - color: $primary-color; + color: #2b90d9; text-decoration: none; &:hover { @@ -122,7 +120,7 @@ .time { text-decoration: none; - color: $lighter-text-color; + color: #9baec8; &:hover { text-decoration: underline; diff --git a/app/controllers/accounts_controller.rb b/app/controllers/accounts_controller.rb index 2848ea62e1..6fbbf97e39 100644 --- a/app/controllers/accounts_controller.rb +++ b/app/controllers/accounts_controller.rb @@ -1,4 +1,6 @@ class AccountsController < ApplicationController + layout 'public' + before_action :set_account before_action :set_webfinger_header diff --git a/app/controllers/stream_entries_controller.rb b/app/controllers/stream_entries_controller.rb index c5aebb9da7..cbf7bfdff5 100644 --- a/app/controllers/stream_entries_controller.rb +++ b/app/controllers/stream_entries_controller.rb @@ -1,4 +1,6 @@ class StreamEntriesController < ApplicationController + layout 'public' + before_action :set_account before_action :set_stream_entry diff --git a/app/helpers/stream_entries_helper.rb b/app/helpers/stream_entries_helper.rb index c588f5ce75..529ba98da2 100644 --- a/app/helpers/stream_entries_helper.rb +++ b/app/helpers/stream_entries_helper.rb @@ -19,4 +19,17 @@ module StreamEntriesHelper def relative_time(date) date < 5.days.ago ? date.strftime("%d.%m.%Y") : "#{time_ago_in_words(date)} ago" end + + def linkify(status) + mention_hash = {} + status.mentions.each { |m| mention_hash[m.acct] = m } + + status.text.gsub(Account::MENTION_RE) do |m| + full_match = Account::MENTION_RE.match(m) + acct = full_match[1] + account = mention_hash[acct] + + "#{m.split('@').first}@#{acct}" + end.html_safe + end end diff --git a/app/views/accounts/show.html.haml b/app/views/accounts/show.html.haml index 113db12f6a..ea55b655bd 100644 --- a/app/views/accounts/show.html.haml +++ b/app/views/accounts/show.html.haml @@ -3,7 +3,7 @@ %link{ rel: 'alternate', type: 'application/atom+xml', href: account_url(@account, format: 'atom') }/ .card - .avatar= image_tag @account.avatar.url(:medium) + .avatar= image_tag @account.avatar.url(:large) .bio %h1.name = @account.display_name.blank? ? @account.username : @account.display_name diff --git a/app/views/layouts/public.html.haml b/app/views/layouts/public.html.haml new file mode 100644 index 0000000000..eb3c54f9dc --- /dev/null +++ b/app/views/layouts/public.html.haml @@ -0,0 +1,6 @@ +- content_for :content do + = yield + .footer + .domain= Rails.configuration.x.local_domain + += render template: "layouts/application" diff --git a/app/views/stream_entries/_status.html.haml b/app/views/stream_entries/_status.html.haml index 89dd53613c..a11da83a63 100644 --- a/app/views/stream_entries/_status.html.haml +++ b/app/views/stream_entries/_status.html.haml @@ -22,7 +22,7 @@ = relative_time(status.reblog? ? status.reblog.created_at : status.created_at) .content - = status.content.html_safe + = status.reblog? ? (status.reblog.local? ? linkify(status.reblog) : status.reblog.content.html_safe) : (status.local? ? linkify(status) : status.content.html_safe) - if include_threads - status.replies.each do |status|