Media styling
This commit is contained in:
parent
f51f7b0e06
commit
672ace5a20
|
@ -214,6 +214,7 @@ export default class MediaGallery extends React.PureComponent {
|
|||
render () {
|
||||
const { media, intl, sensitive, letterbox, fullwidth } = this.props;
|
||||
const { visible } = this.state;
|
||||
const size = media.take(4).size;
|
||||
|
||||
let children;
|
||||
|
||||
|
@ -233,8 +234,6 @@ export default class MediaGallery extends React.PureComponent {
|
|||
</button>
|
||||
);
|
||||
} else {
|
||||
const size = media.take(4).size;
|
||||
|
||||
if (this.isStandaloneEligible()) {
|
||||
children = <Item standalone onClick={this.handleClick} attachment={media.get(0)} />;
|
||||
} else {
|
||||
|
@ -243,7 +242,7 @@ export default class MediaGallery extends React.PureComponent {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className={`media-gallery ${fullwidth ? 'full-width' : ''}`}>
|
||||
<div className={`media-gallery size-${size} ${fullwidth ? 'full-width' : ''}`}>
|
||||
<div className={classNames('spoiler-button', { 'spoiler-button--visible': visible })}>
|
||||
<IconButton title={intl.formatMessage(messages.toggle_visible)} icon={visible ? 'eye' : 'eye-slash'} overlay onClick={this.handleOpen} />
|
||||
</div>
|
||||
|
|
|
@ -228,6 +228,10 @@ export default class Status extends ImmutablePureComponent {
|
|||
this.props.onMoveDown(this.props.status.get('id'));
|
||||
}
|
||||
|
||||
handleRef = c => {
|
||||
this.node = c;
|
||||
}
|
||||
|
||||
renderLoadingMediaGallery () {
|
||||
return <div className='media_gallery' style={{ height: '110px' }} />;
|
||||
}
|
||||
|
@ -238,6 +242,7 @@ export default class Status extends ImmutablePureComponent {
|
|||
|
||||
render () {
|
||||
const {
|
||||
handleRef,
|
||||
parseClick,
|
||||
setExpansion,
|
||||
} = this;
|
||||
|
@ -389,6 +394,7 @@ export default class Status extends ImmutablePureComponent {
|
|||
),
|
||||
}}
|
||||
{...selectorAttribs}
|
||||
ref={handleRef}
|
||||
>
|
||||
{prepend && account ? (
|
||||
<StatusPrepend
|
||||
|
|
|
@ -40,3 +40,12 @@
|
|||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fullwidth-gallery {
|
||||
&.full-width {
|
||||
margin-left: -22px;
|
||||
margin-right: -22px;
|
||||
width: inherit;
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,13 +1,5 @@
|
|||
@import 'variables';
|
||||
|
||||
@mixin fullwidth-gallery {
|
||||
&.full-width {
|
||||
margin-left: -22px;
|
||||
margin-right: -22px;
|
||||
width: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.app-body {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
|
@ -2296,7 +2288,7 @@
|
|||
.getting-started {
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 235px;
|
||||
background: url('../images/mastodon-getting-started.png') no-repeat 0 100%;
|
||||
background: url('~images/mastodon-getting-started.png') no-repeat 0 100%;
|
||||
flex: 1 0 auto;
|
||||
|
||||
p {
|
||||
|
@ -2491,7 +2483,7 @@ button.icon-button.active i.fa-retweet {
|
|||
justify-content: center;
|
||||
|
||||
& > div {
|
||||
background: url('../images/mastodon-not-found.png') no-repeat center -50px;
|
||||
background: url('~images/mastodon-not-found.png') no-repeat center -50px;
|
||||
padding-top: 210px;
|
||||
width: 100%;
|
||||
}
|
||||
|
@ -2828,6 +2820,7 @@ button.icon-button.active i.fa-retweet {
|
|||
z-index: 100;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
|
||||
.status__content > & {
|
||||
margin-top: 15px; // Add margin when used bare for NSFW video player
|
||||
|
@ -3539,7 +3532,7 @@ button.icon-button.active i.fa-retweet {
|
|||
img,
|
||||
canvas {
|
||||
display: block;
|
||||
background: url('../images/void.png') repeat;
|
||||
background: url('~images/void.png') repeat;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
|
@ -3786,7 +3779,7 @@ button.icon-button.active i.fa-retweet {
|
|||
}
|
||||
|
||||
.onboarding-modal__page-one__elephant-friend {
|
||||
background: url('../images/elephant-friend-1.png') no-repeat center center / contain;
|
||||
background: url('~images/elephant-friend-1.png') no-repeat center center / contain;
|
||||
width: 155px;
|
||||
height: 193px;
|
||||
margin-right: 15px;
|
||||
|
@ -4196,10 +4189,12 @@ button.icon-button.active i.fa-retweet {
|
|||
position: relative;
|
||||
background: $base-shadow-color;
|
||||
width: 100%;
|
||||
height: 110px;
|
||||
|
||||
.detailed-status & {
|
||||
margin-left:-10px;
|
||||
width: calc(100% + 22px);
|
||||
margin-left: -12px;
|
||||
width: calc(100% + 24px);
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
@include fullwidth-gallery;
|
||||
|
@ -4331,7 +4326,17 @@ button.icon-button.active i.fa-retweet {
|
|||
overflow: hidden;
|
||||
position: relative;
|
||||
background: $base-shadow-color;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 110px;
|
||||
|
||||
.detailed-status & {
|
||||
margin-left: -12px;
|
||||
width: calc(100% + 24px);
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
@include fullwidth-gallery;
|
||||
|
||||
video {
|
||||
height: 100%;
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
@import 'mixins';
|
||||
@import 'variables';
|
||||
@import 'fonts/roboto';
|
||||
@import 'fonts/roboto-mono';
|
||||
@import 'fonts/montserrat';
|
||||
@import 'styles/fonts/roboto';
|
||||
@import 'styles/fonts/roboto-mono';
|
||||
@import 'styles/fonts/montserrat';
|
||||
|
||||
@import 'reset';
|
||||
@import 'basics';
|
||||
|
|
Loading…
Reference in a new issue