From 30e1da7668c6c42aa5f15bdc9caab1929235f78f Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 7 Jul 2018 22:20:14 +0200 Subject: 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 ++ app/javascript/styles/mastodon/stream_entries.scss | 85 +++++++++++----------- 3 files changed, 62 insertions(+), 43 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss index 8033e6418..b4612b063 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 f9fad732e..962ed1ef5 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 369bb4479..9188c2206 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%; + } } } -- cgit