Media styling

signup-info-prompt
kibigo! 2017-11-18 11:05:23 -08:00
parent f51f7b0e06
commit 672ace5a20
5 changed files with 39 additions and 20 deletions

View File

@ -214,6 +214,7 @@ export default class MediaGallery extends React.PureComponent {
render () { render () {
const { media, intl, sensitive, letterbox, fullwidth } = this.props; const { media, intl, sensitive, letterbox, fullwidth } = this.props;
const { visible } = this.state; const { visible } = this.state;
const size = media.take(4).size;
let children; let children;
@ -233,8 +234,6 @@ export default class MediaGallery extends React.PureComponent {
</button> </button>
); );
} else { } else {
const size = media.take(4).size;
if (this.isStandaloneEligible()) { if (this.isStandaloneEligible()) {
children = <Item standalone onClick={this.handleClick} attachment={media.get(0)} />; children = <Item standalone onClick={this.handleClick} attachment={media.get(0)} />;
} else { } else {
@ -243,7 +242,7 @@ export default class MediaGallery extends React.PureComponent {
} }
return ( 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 })}> <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} /> <IconButton title={intl.formatMessage(messages.toggle_visible)} icon={visible ? 'eye' : 'eye-slash'} overlay onClick={this.handleOpen} />
</div> </div>

View File

@ -228,6 +228,10 @@ export default class Status extends ImmutablePureComponent {
this.props.onMoveDown(this.props.status.get('id')); this.props.onMoveDown(this.props.status.get('id'));
} }
handleRef = c => {
this.node = c;
}
renderLoadingMediaGallery () { renderLoadingMediaGallery () {
return <div className='media_gallery' style={{ height: '110px' }} />; return <div className='media_gallery' style={{ height: '110px' }} />;
} }
@ -238,6 +242,7 @@ export default class Status extends ImmutablePureComponent {
render () { render () {
const { const {
handleRef,
parseClick, parseClick,
setExpansion, setExpansion,
} = this; } = this;
@ -389,6 +394,7 @@ export default class Status extends ImmutablePureComponent {
), ),
}} }}
{...selectorAttribs} {...selectorAttribs}
ref={handleRef}
> >
{prepend && account ? ( {prepend && account ? (
<StatusPrepend <StatusPrepend

View File

@ -40,3 +40,12 @@
@content; @content;
} }
} }
@mixin fullwidth-gallery {
&.full-width {
margin-left: -22px;
margin-right: -22px;
width: inherit;
height: 250px;
}
}

View File

@ -1,13 +1,5 @@
@import 'variables'; @import 'variables';
@mixin fullwidth-gallery {
&.full-width {
margin-left: -22px;
margin-right: -22px;
width: inherit;
}
}
.app-body { .app-body {
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar; -ms-overflow-style: -ms-autohiding-scrollbar;
@ -2296,7 +2288,7 @@
.getting-started { .getting-started {
box-sizing: border-box; box-sizing: border-box;
padding-bottom: 235px; 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; flex: 1 0 auto;
p { p {
@ -2491,7 +2483,7 @@ button.icon-button.active i.fa-retweet {
justify-content: center; justify-content: center;
& > div { & > 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; padding-top: 210px;
width: 100%; width: 100%;
} }
@ -2828,6 +2820,7 @@ button.icon-button.active i.fa-retweet {
z-index: 100; z-index: 100;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: stretch;
.status__content > & { .status__content > & {
margin-top: 15px; // Add margin when used bare for NSFW video player margin-top: 15px; // Add margin when used bare for NSFW video player
@ -3539,7 +3532,7 @@ button.icon-button.active i.fa-retweet {
img, img,
canvas { canvas {
display: block; display: block;
background: url('../images/void.png') repeat; background: url('~images/void.png') repeat;
object-fit: contain; object-fit: contain;
} }
@ -3786,7 +3779,7 @@ button.icon-button.active i.fa-retweet {
} }
.onboarding-modal__page-one__elephant-friend { .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; width: 155px;
height: 193px; height: 193px;
margin-right: 15px; margin-right: 15px;
@ -4196,10 +4189,12 @@ button.icon-button.active i.fa-retweet {
position: relative; position: relative;
background: $base-shadow-color; background: $base-shadow-color;
width: 100%; width: 100%;
height: 110px;
.detailed-status & { .detailed-status & {
margin-left:-10px; margin-left: -12px;
width: calc(100% + 22px); width: calc(100% + 24px);
height: 250px;
} }
@include fullwidth-gallery; @include fullwidth-gallery;
@ -4331,7 +4326,17 @@ button.icon-button.active i.fa-retweet {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
background: $base-shadow-color; background: $base-shadow-color;
width: 100%;
max-width: 100%; max-width: 100%;
height: 110px;
.detailed-status & {
margin-left: -12px;
width: calc(100% + 24px);
height: 250px;
}
@include fullwidth-gallery;
video { video {
height: 100%; height: 100%;

View File

@ -1,8 +1,8 @@
@import 'mixins'; @import 'mixins';
@import 'variables'; @import 'variables';
@import 'fonts/roboto'; @import 'styles/fonts/roboto';
@import 'fonts/roboto-mono'; @import 'styles/fonts/roboto-mono';
@import 'fonts/montserrat'; @import 'styles/fonts/montserrat';
@import 'reset'; @import 'reset';
@import 'basics'; @import 'basics';