From a30a207fd2ea9ff9dabc9667a45b023e3bfa9cc3 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Mon, 19 Feb 2018 02:39:18 +0100 Subject: [PATCH] Fix media spoiler design (#6507) - 4px rounded corners on media attachments - Better colors/contrast for CW/media spoiler on public pages - Fix vertical alignment of "Show more" button - Fix layout jump when unhiding standalone media --- .../mastodon/components/media_gallery.js | 6 +----- .../styles/mastodon/components.scss | 20 ++++++++++++++++--- .../styles/mastodon/stream_entries.scss | 20 ++++++------------- 3 files changed, 24 insertions(+), 22 deletions(-) diff --git a/app/javascript/mastodon/components/media_gallery.js b/app/javascript/mastodon/components/media_gallery.js index 00943e205b..a3ffc45eae 100644 --- a/app/javascript/mastodon/components/media_gallery.js +++ b/app/javascript/mastodon/components/media_gallery.js @@ -227,12 +227,8 @@ export default class MediaGallery extends React.PureComponent { const style = {}; if (this.isStandaloneEligible()) { - if (!visible && width) { - // only need to forcibly set the height in "sensitive" mode + if (width) { style.height = width / this.props.media.getIn([0, 'meta', 'small', 'aspect']); - } else { - // layout automatically, using image's natural aspect ratio - style.height = ''; } } else { // crop the image diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index d1fbabfc54..6a256c466e 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -686,12 +686,13 @@ background: transparent; border: 0; color: lighten($ui-base-color, 8%); - font-weight: 500; + font-weight: 700; font-size: 11px; padding: 0 6px; text-transform: uppercase; - line-height: inherit; + line-height: 20px; cursor: pointer; + vertical-align: middle; } .status__prepend-icon-wrapper { @@ -899,6 +900,11 @@ height: 24px; margin: -1px 0 0; } + + .status__content__spoiler-link { + line-height: 24px; + margin: -1px 0 0; + } } .video-player { @@ -2667,12 +2673,16 @@ a.status-card { background: $base-overlay-background; color: $ui-primary-color; border: 0; + padding: 0; width: 100%; height: 100%; + border-radius: 4px; + appearance: none; &:hover, &:active, &:focus { + padding: 0; color: lighten($ui-primary-color, 8%); } } @@ -2685,7 +2695,7 @@ a.status-card { .media-spoiler__trigger { display: block; font-size: 11px; - font-weight: 500; + font-weight: 700; } .spoiler-button { @@ -4091,6 +4101,7 @@ a.status-card { box-sizing: border-box; margin-top: 8px; overflow: hidden; + border-radius: 4px; position: relative; width: 100%; } @@ -4101,6 +4112,8 @@ a.status-card { display: block; float: left; position: relative; + border-radius: 4px; + overflow: hidden; &.standalone { .media-gallery__item-gifv-thumbnail { @@ -4113,6 +4126,7 @@ a.status-card { cursor: zoom-in; display: block; text-decoration: none; + color: $ui-secondary-color; height: 100%; line-height: 0; diff --git a/app/javascript/styles/mastodon/stream_entries.scss b/app/javascript/styles/mastodon/stream_entries.scss index e11ca29d9e..442b143a04 100644 --- a/app/javascript/styles/mastodon/stream_entries.scss +++ b/app/javascript/styles/mastodon/stream_entries.scss @@ -146,10 +146,10 @@ a.status__content__spoiler-link { color: $primary-text-color; - background: $ui-primary-color; + background: $ui-base-color; &:hover { - background: lighten($ui-primary-color, 8%); + background: lighten($ui-base-color, 8%); } } } @@ -214,10 +214,10 @@ a.status__content__spoiler-link { color: $primary-text-color; - background: $ui-primary-color; + background: $ui-base-color; &:hover { - background: lighten($ui-primary-color, 8%); + background: lighten($ui-base-color, 8%); } } } @@ -260,16 +260,8 @@ } .media-spoiler { - background: $ui-primary-color; - color: $white; - transition: all 40ms linear; - - &:hover, - &:active, - &:focus { - background: darken($ui-primary-color, 2%); - color: unset; - } + background: $ui-base-color; + color: $ui-primary-color; } .pre-header {