specter/mastodon
1
0
Fork 1
forked from fedi/mastodon
Code Pull requests Activity

Fix media spoiler design (#6507)

Browse source 
- 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
This commit is contained in:
Eugen Rochko 2018-02-19 02:39:18 +01:00 committed by GitHub
parent bb26cdda24
commit cbb69d41f6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/javascript/mastodon/components/media_gallery.js
View file

@ -227,12 +227,8 @@ export default class MediaGallery extends React.PureComponent {
const style = {}; const style = {};
if (this.isStandaloneEligible()) { if (this.isStandaloneEligible()) {
if (!visible && width) { if (width) {
// only need to forcibly set the height in "sensitive" mode
style.height = width / this.props.media.getIn([0, 'meta', 'small', 'aspect']); style.height = width / this.props.media.getIn([0, 'meta', 'small', 'aspect']);
} else {
// layout automatically, using image's natural aspect ratio
style.height = '';
} }
} else { } else {
// crop the image // crop the image

20
app/javascript/styles/mastodon/components.scss
View file

@ -686,12 +686,13 @@
background: transparent; background: transparent;
border: 0; border: 0;
color: lighten($ui-base-color, 8%); color: lighten($ui-base-color, 8%);
font-weight: 500; font-weight: 700;
font-size: 11px; font-size: 11px;
padding: 0 6px; padding: 0 6px;
text-transform: uppercase; text-transform: uppercase;
line-height: inherit; line-height: 20px;
cursor: pointer; cursor: pointer;
vertical-align: middle;
} }
.status__prepend-icon-wrapper { .status__prepend-icon-wrapper {
@ -899,6 +900,11 @@
height: 24px; height: 24px;
margin: -1px 0 0; margin: -1px 0 0;
} }
.status__content__spoiler-link {
line-height: 24px;
margin: -1px 0 0;
}
} }
.video-player { .video-player {
@ -2667,12 +2673,16 @@ a.status-card {
background: $base-overlay-background; background: $base-overlay-background;
color: $ui-primary-color; color: $ui-primary-color;
border: 0; border: 0;
padding: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 4px;
appearance: none;
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
padding: 0;
color: lighten($ui-primary-color, 8%); color: lighten($ui-primary-color, 8%);
} }
} }
@ -2685,7 +2695,7 @@ a.status-card {
.media-spoiler__trigger { .media-spoiler__trigger {
display: block; display: block;
font-size: 11px; font-size: 11px;
font-weight: 500; font-weight: 700;
} }
.spoiler-button { .spoiler-button {
@ -4091,6 +4101,7 @@ a.status-card {
box-sizing: border-box; box-sizing: border-box;
margin-top: 8px; margin-top: 8px;
overflow: hidden; overflow: hidden;
border-radius: 4px;
position: relative; position: relative;
width: 100%; width: 100%;
} }
@ -4101,6 +4112,8 @@ a.status-card {
display: block; display: block;
float: left; float: left;
position: relative; position: relative;
border-radius: 4px;
overflow: hidden;
&.standalone { &.standalone {
.media-gallery__item-gifv-thumbnail { .media-gallery__item-gifv-thumbnail {
@ -4113,6 +4126,7 @@ a.status-card {
cursor: zoom-in; cursor: zoom-in;
display: block; display: block;
text-decoration: none; text-decoration: none;
color: $ui-secondary-color;
height: 100%; height: 100%;
line-height: 0; line-height: 0;

20
app/javascript/styles/mastodon/stream_entries.scss
View file

@ -146,10 +146,10 @@
a.status__content__spoiler-link { a.status__content__spoiler-link {
color: $primary-text-color; color: $primary-text-color;
background: $ui-primary-color; background: $ui-base-color;
&:hover { &:hover {
background: lighten($ui-primary-color, 8%); background: lighten($ui-base-color, 8%);
} }
} }
} }
@ -214,10 +214,10 @@
a.status__content__spoiler-link { a.status__content__spoiler-link {
color: $primary-text-color; color: $primary-text-color;
background: $ui-primary-color; background: $ui-base-color;
&:hover { &:hover {
background: lighten($ui-primary-color, 8%); background: lighten($ui-base-color, 8%);
} }
} }
} }
@ -260,16 +260,8 @@
} }
.media-spoiler { .media-spoiler {
background: $ui-primary-color; background: $ui-base-color;
color: $white; color: $ui-primary-color;
transition: all 40ms linear;
&:hover,
&:active,
&:focus {
background: darken($ui-primary-color, 2%);
color: unset;
}
} }
.pre-header { .pre-header {