From 30e1da7668c6c42aa5f15bdc9caab1929235f78f Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 7 Jul 2018 22:20:14 +0200 Subject: [PATCH] Add follow button to detailed status, add gradient to mask bio cut-off (#7979) * Add follow button to detailed status, add gradient to mask bio cut-off * In landing strip, show sign up link even if closed (different href) Point to joinmastodon.org --- app/javascript/styles/mastodon/accounts.scss | 14 +++ app/javascript/styles/mastodon/modal.scss | 6 ++ .../styles/mastodon/stream_entries.scss | 85 +++++++++---------- app/views/remote_follow/new.html.haml | 2 +- app/views/shared/_landing_strip.html.haml | 4 +- .../stream_entries/_detailed_status.html.haml | 2 +- 6 files changed, 65 insertions(+), 48 deletions(-) diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss index 8033e641870..b4612b063cd 100644 --- a/app/javascript/styles/mastodon/accounts.scss +++ b/app/javascript/styles/mastodon/accounts.scss @@ -440,6 +440,20 @@ overflow: hidden; text-overflow: ellipsis; height: 5.5em; + position: relative; + + &::after { + display: block; + content: ""; + width: 100%; + height: 100px; + position: absolute; + bottom: 0; + background: linear-gradient(to bottom, rgba($simple-background-color, 0.01) 0%, rgba($simple-background-color, 1) 100%); + left: 0; + border-radius: 0 0 4px 4px; + pointer-events: none; + } } } } diff --git a/app/javascript/styles/mastodon/modal.scss b/app/javascript/styles/mastodon/modal.scss index f9fad732e8d..962ed1ef57b 100644 --- a/app/javascript/styles/mastodon/modal.scss +++ b/app/javascript/styles/mastodon/modal.scss @@ -18,3 +18,9 @@ background: url('../images/elephant_ui_plane.svg') no-repeat left bottom / contain; } } + +@media screen and (max-width: 600px) { + .account-header { + margin-top: 0; + } +} diff --git a/app/javascript/styles/mastodon/stream_entries.scss b/app/javascript/styles/mastodon/stream_entries.scss index 369bb4479ce..9188c22064e 100644 --- a/app/javascript/styles/mastodon/stream_entries.scss +++ b/app/javascript/styles/mastodon/stream_entries.scss @@ -307,58 +307,57 @@ .embed { .activity-stream { box-shadow: none; + } +} - .entry { +.entry { + .detailed-status.light { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: flex-start; - .detailed-status.light { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - align-items: flex-start; + .detailed-status__display-name { + flex: 1; + margin: 0 5px 15px 0; + } - .detailed-status__display-name { - flex: 1; - margin: 0 5px 15px 0; + .button.button-secondary.logo-button { + flex: 0 auto; + font-size: 14px; + background: $ui-highlight-color; + color: $primary-text-color; + border: 0; + + svg { + width: 20px; + height: auto; + vertical-align: middle; + margin-right: 5px; + + path:first-child { + fill: $primary-text-color; } - .button.button-secondary.logo-button { - flex: 0 auto; - font-size: 14px; - background: $ui-highlight-color; - color: $primary-text-color; - border: 0; - - svg { - width: 20px; - height: auto; - vertical-align: middle; - margin-right: 5px; - - path:first-child { - fill: $primary-text-color; - } - - path:last-child { - fill: $ui-highlight-color; - } - } - - &:active, - &:focus, - &:hover { - background: lighten($ui-highlight-color, 10%); - - svg path:last-child { - fill: lighten($ui-highlight-color, 10%); - } - } + path:last-child { + fill: $ui-highlight-color; } + } - .status__content, - .detailed-status__meta { - flex: 100%; + &:active, + &:focus, + &:hover { + background: lighten($ui-highlight-color, 10%); + + svg path:last-child { + fill: lighten($ui-highlight-color, 10%); } } } + + .status__content, + .detailed-status__meta { + flex: 100%; + } } } diff --git a/app/views/remote_follow/new.html.haml b/app/views/remote_follow/new.html.haml index 361bb53e44c..9b22fda5f38 100644 --- a/app/views/remote_follow/new.html.haml +++ b/app/views/remote_follow/new.html.haml @@ -16,4 +16,4 @@ .actions = f.button :button, t('remote_follow.proceed'), type: :submit - %p.hint.subtle-hint= t('remote_follow.no_account_html', sign_up_path: open_registrations? ? new_user_registration_path : 'https://joinmastodon.org') + %p.hint.subtle-hint= t('remote_follow.no_account_html', sign_up_path: open_registrations? ? new_user_registration_path : 'https://joinmastodon.org/#getting-started') diff --git a/app/views/shared/_landing_strip.html.haml b/app/views/shared/_landing_strip.html.haml index 78f5ed4bcc3..9a4144723f9 100644 --- a/app/views/shared/_landing_strip.html.haml +++ b/app/views/shared/_landing_strip.html.haml @@ -3,6 +3,4 @@ %div = t('landing_strip_html', name: content_tag(:span, display_name(account, custom_emojify: true), class: :emojify), link_to_root_path: link_to(content_tag(:strong, site_hostname), root_path)) - - - if open_registrations? - = t('landing_strip_signup_html', sign_up_path: new_user_registration_path) + = t('landing_strip_signup_html', sign_up_path: open_registrations? ? new_user_registration_path : 'https://joinmastodon.org/#getting-started') diff --git a/app/views/stream_entries/_detailed_status.html.haml b/app/views/stream_entries/_detailed_status.html.haml index 3fc715c4e42..85e90a237ca 100644 --- a/app/views/stream_entries/_detailed_status.html.haml +++ b/app/views/stream_entries/_detailed_status.html.haml @@ -7,7 +7,7 @@ %strong.p-name.emojify= display_name(status.account, custom_emojify: true) %span= acct(status.account) - - if embedded_view? + - if !user_signed_in? || embedded_view? = link_to account_remote_follow_path(status.account), class: 'button button-secondary logo-button', target: '_new' do = render file: Rails.root.join('app', 'javascript', 'images', 'logo.svg') = t('accounts.follow')