From 2c70f0ecaa507427d2592434cb4a516bcedd5039 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sun, 28 Feb 2016 00:02:59 +0100 Subject: Adding paperclip for avatars, fixing design of the public pages --- app/assets/stylesheets/application.css | 15 ---------- app/assets/stylesheets/application.scss | 39 ++++++++++++++++++++++++++ app/assets/stylesheets/home.scss | 10 ------- app/assets/stylesheets/profile.scss | 44 ++++++++++-------------------- app/helpers/profile_helper.rb | 11 ++++++++ app/models/account.rb | 4 +++ app/views/layouts/application.html.haml | 1 + app/views/profile/_status.html.haml | 2 +- app/views/profile/_status_footer.html.haml | 4 +-- app/views/profile/_status_header.html.haml | 6 ++-- 10 files changed, 75 insertions(+), 61 deletions(-) delete mode 100644 app/assets/stylesheets/application.css create mode 100644 app/assets/stylesheets/application.scss (limited to 'app') diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css deleted file mode 100644 index f9cd5b348..000000000 --- a/app/assets/stylesheets/application.css +++ /dev/null @@ -1,15 +0,0 @@ -/* - * This is a manifest file that'll be compiled into application.css, which will include all the files - * listed below. - * - * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, - * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path. - * - * You're free to add application-wide styles to this file and they'll appear at the bottom of the - * compiled file so the styles you add here take precedence over styles defined in any styles - * defined in the other CSS/SCSS files in this directory. It is generally better to create a new - * file per style scope. - * - *= require_tree . - *= require_self - */ diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss new file mode 100644 index 000000000..91b0d12fe --- /dev/null +++ b/app/assets/stylesheets/application.scss @@ -0,0 +1,39 @@ +$primary-color: #ff7473; +$secondary-color: #ffc952; +$tertiary-color: #47b8e0; +$quaternary-color: #34314c; +$background-color: #fff; + +@import url("https://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic"); +@import "font-awesome-sprockets"; +@import "font-awesome"; + +body { + font-family: 'Noto Sans', sans-serif; + background: $secondary-color; + font-size: 13px; + line-height: 18px; + color: $quaternary-color; +} + +.container { + width: 800px; + margin: 0 auto; +} + +.footer { + text-align: center; + padding: 100px 0; + font-size: 12px; + color: lighten($quaternary-color, 15%); + + .mastodon-link { + color: $quaternary-color; + text-decoration: none; + font-weight: bold; + } +} + + +@import 'home'; +@import 'profile'; diff --git a/app/assets/stylesheets/home.scss b/app/assets/stylesheets/home.scss index 7c3dbfc31..e69de29bb 100644 --- a/app/assets/stylesheets/home.scss +++ b/app/assets/stylesheets/home.scss @@ -1,10 +0,0 @@ -.footer { - text-align: center; - padding: 100px 0; - - .mastodon-link { - color: #566270; - text-decoration: none; - font-size: 16px; - } -} diff --git a/app/assets/stylesheets/profile.scss b/app/assets/stylesheets/profile.scss index 3ef488882..5508b8424 100644 --- a/app/assets/stylesheets/profile.scss +++ b/app/assets/stylesheets/profile.scss @@ -1,20 +1,3 @@ -@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic); - -@import "font-awesome-sprockets"; -@import "font-awesome"; - -body { - font-family: 'Noto Sans', sans-serif; - background: #E0E3DA; - font-size: 13px; - line-height: 18px; -} - -.container { - width: 800px; - margin: 0 auto; -} - .card { padding-top: 20px; @@ -25,7 +8,7 @@ body { small { display: block; font-size: 14px; - color: #566270; + color: lighten($quaternary-color, 15%); } } @@ -56,12 +39,12 @@ body { box-shadow: 4px 3px 0 rgba(0, 0, 0, 0.1); .entry { - border-bottom: 1px solid #E0E3DA; - background: #FFFFF3; - border-left: 2px solid #A593E0; + border-bottom: 1px solid darken($background-color, 10%); + background: $background-color; + border-left: 2px solid $primary-color; &.entry-reblog { - border-left: 2px solid #566270; + border-left: 2px solid $tertiary-color; } &:last-child { @@ -77,10 +60,10 @@ body { .name { text-decoration: none; - color: #566270; + color: lighten($quaternary-color, 15%); strong { - color: #000; + color: $quaternary-color; } &:hover { @@ -92,13 +75,13 @@ body { } .pre-header { - border-bottom: 1px solid #E0E3DA; - color: #566270; + border-bottom: 1px solid darken($background-color, 10%); + color: $tertiary-color; padding: 5px 10px; padding-left: 8px; .name { - color: #566270; + color: $tertiary-color; font-weight: bold; text-decoration: none; @@ -116,7 +99,7 @@ body { .time { text-decoration: none; - color: #566270; + color: lighten($quaternary-color, 15%); &:hover { text-decoration: underline; @@ -125,7 +108,7 @@ body { .counters { margin-top: 15px; - color: #566270; + color: lighten($quaternary-color, 15%); cursor: default; padding: 10px; padding-top: 0; @@ -134,10 +117,11 @@ body { .counter { display: inline-block; margin-right: 10px; + color: lighten($quaternary-color, 50%); } .conversation-link { - color: #A593E0; + color: $primary-color; text-decoration: underline; float: right; } diff --git a/app/helpers/profile_helper.rb b/app/helpers/profile_helper.rb index 5a0d6b31f..2abe67635 100644 --- a/app/helpers/profile_helper.rb +++ b/app/helpers/profile_helper.rb @@ -1,2 +1,13 @@ module ProfileHelper + def display_name(account) + account.display_name.blank? ? account.username : account.display_name + end + + def profile_url(account) + account.local? ? super(name: account.username) : account.url + end + + def status_url(status) + status.local? ? super(name: status.account.username, id: status.stream_entry.id) : status.url + end end diff --git a/app/models/account.rb b/app/models/account.rb index 1b4f4ebdf..0940118dc 100644 --- a/app/models/account.rb +++ b/app/models/account.rb @@ -2,6 +2,10 @@ class Account < ActiveRecord::Base # Local users has_one :user, inverse_of: :account + # Avatar upload + has_attached_file :avatar, styles: { large: '300x300#', medium: '96x96#', small: '48x48#' } + validates_attachment_content_type :avatar, content_type: /\Aimage\/.*\Z/ + # Timelines has_many :stream_entries, inverse_of: :account has_many :statuses, inverse_of: :account diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index e8a9329c3..c654b5f19 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -10,4 +10,5 @@ .container = yield .footer + Powered by = link_to 'Mastodon', 'https://github.com/Gargron/mastodon', class: 'mastodon-link' diff --git a/app/views/profile/_status.html.haml b/app/views/profile/_status.html.haml index 91c4fad26..44c58b84e 100644 --- a/app/views/profile/_status.html.haml +++ b/app/views/profile/_status.html.haml @@ -3,7 +3,7 @@ .pre-header %i.fa.fa-retweet Shared by - = link_to status.account.display_name.blank? ? status.account.username : status.account.display_name, (status.account.local? ? profile_url(name: status.account.username) : status.account.url), class: 'name' + = link_to display_name(status.account), profile_url(status.account), class: 'name' .header = render partial: 'status_header', locals: { status: status.reblog? ? status.reblog : status } .content diff --git a/app/views/profile/_status_footer.html.haml b/app/views/profile/_status_footer.html.haml index f29abf27b..817d19a68 100644 --- a/app/views/profile/_status_footer.html.haml +++ b/app/views/profile/_status_footer.html.haml @@ -1,4 +1,4 @@ -.counter.counter-retweets +.counter.counter-reblogs %i.fa.fa-retweet %span.num= status.reblogs.count @@ -7,4 +7,4 @@ %span.num= status.favourites.count - if status.reply? - = link_to 'View conversation', status.thread.local? ? status_url(name: status.thread.account.username, id: status.thread.id) : status.thread.url, class: 'conversation-link' + = link_to 'View conversation', status_url(status.thread), class: 'conversation-link' diff --git a/app/views/profile/_status_header.html.haml b/app/views/profile/_status_header.html.haml index 6f0e8748e..e1c810088 100644 --- a/app/views/profile/_status_header.html.haml +++ b/app/views/profile/_status_header.html.haml @@ -1,8 +1,8 @@ -= link_to (status.account.local? ? profile_url(name: status.account.username) : status.account.url), class: 'name' do - %strong= status.account.display_name.blank? ? status.account.username : status.account.display_name += link_to profile_url(status.account), class: 'name' do + %strong= display_name(status.account) = "@#{status.account.acct}" -= link_to status.local? ? status_url(name: status.account.username, id: status.stream_entry.id) : status.url, class: 'time' do += link_to status_url(status), class: 'time' do %span{ title: status.created_at } = time_ago_in_words(status.created_at) ago -- cgit