From fa29ef3a41816ee915c52707bcd9db6cc9cdf7d6 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 26 Feb 2016 21:11:52 +0100 Subject: [PATCH] Improving design --- app/assets/stylesheets/home.scss | 13 ++++-- app/assets/stylesheets/profile.scss | 53 +++++++++++++++++----- app/views/layouts/application.html.haml | 2 + app/views/profile/_status.html.haml | 7 ++- app/views/profile/_status_footer.html.haml | 3 ++ 5 files changed, 63 insertions(+), 15 deletions(-) diff --git a/app/assets/stylesheets/home.scss b/app/assets/stylesheets/home.scss index 7131aac4df..7c3dbfc31f 100644 --- a/app/assets/stylesheets/home.scss +++ b/app/assets/stylesheets/home.scss @@ -1,3 +1,10 @@ -// Place all the styles related to the Home controller here. -// They will automatically be included in application.css. -// You can use Sass (SCSS) here: http://sass-lang.com/ +.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 2e5e0a6e39..3ef4888822 100644 --- a/app/assets/stylesheets/profile.scss +++ b/app/assets/stylesheets/profile.scss @@ -53,36 +53,56 @@ body { .activity-stream { clear: both; + box-shadow: 4px 3px 0 rgba(0, 0, 0, 0.1); .entry { - padding: 10px; border-bottom: 1px solid #E0E3DA; background: #FFFFF3; + border-left: 2px solid #A593E0; - &:first-child { - border-radius: 5px 5px 0 0; + &.entry-reblog { + border-left: 2px solid #566270; } &:last-child { border-bottom: 0; - border-radius: 0 0 5px 5px; } } .header { margin-bottom: 10px; + padding: 10px; + padding-bottom: 0; + padding-left: 8px; + + .name { + text-decoration: none; + color: #566270; + + strong { + color: #000; + } + + &:hover { + strong { + text-decoration: underline; + } + } + } } - .name { - text-decoration: none; + .pre-header { + border-bottom: 1px solid #E0E3DA; color: #566270; + padding: 5px 10px; + padding-left: 8px; - strong { - color: #000; - } + .name { + color: #566270; + font-weight: bold; + text-decoration: none; - &:hover { - strong { + &:hover { text-decoration: underline; } } @@ -90,6 +110,8 @@ body { .content { font-size: 16px; + padding: 0 10px; + padding-left: 8px; } .time { @@ -105,10 +127,19 @@ body { margin-top: 15px; color: #566270; cursor: default; + padding: 10px; + padding-top: 0; + padding-left: 8px; .counter { display: inline-block; margin-right: 10px; } + + .conversation-link { + color: #A593E0; + text-decoration: underline; + float: right; + } } } diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index c46fb0b33d..e8a9329c37 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -9,3 +9,5 @@ %body .container = yield + .footer + = 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 39e70b69c6..91c4fad263 100644 --- a/app/views/profile/_status.html.haml +++ b/app/views/profile/_status.html.haml @@ -1,4 +1,9 @@ -%div.entry +%div.entry{ class: status.reblog? ? 'entry-reblog' : 'entry-status' } + - if status.reblog? + .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' .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 0c47ade90d..f29abf27b0 100644 --- a/app/views/profile/_status_footer.html.haml +++ b/app/views/profile/_status_footer.html.haml @@ -5,3 +5,6 @@ .counter.counter-favourites %i.fa.fa-star %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'