diff options
Diffstat (limited to 'app/javascript/themes')
5 files changed, 39 insertions, 20 deletions
diff --git a/app/javascript/themes/glitch/components/media_gallery.js b/app/javascript/themes/glitch/components/media_gallery.js index 05390c82f..b6b40c585 100644 --- a/app/javascript/themes/glitch/components/media_gallery.js +++ b/app/javascript/themes/glitch/components/media_gallery.js @@ -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> diff --git a/app/javascript/themes/glitch/components/status.js b/app/javascript/themes/glitch/components/status.js index cf2fbe21e..e2ef47f5f 100644 --- a/app/javascript/themes/glitch/components/status.js +++ b/app/javascript/themes/glitch/components/status.js @@ -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 diff --git a/app/javascript/themes/glitch/styles/_mixins.scss b/app/javascript/themes/glitch/styles/_mixins.scss index 7412991b8..79a8149fd 100644 --- a/app/javascript/themes/glitch/styles/_mixins.scss +++ b/app/javascript/themes/glitch/styles/_mixins.scss @@ -40,3 +40,12 @@ @content; } } + +@mixin fullwidth-gallery { + &.full-width { + margin-left: -22px; + margin-right: -22px; + width: inherit; + height: 250px; + } +} diff --git a/app/javascript/themes/glitch/styles/components.scss b/app/javascript/themes/glitch/styles/components.scss index fbee5610a..3be8db4b4 100644 --- a/app/javascript/themes/glitch/styles/components.scss +++ b/app/javascript/themes/glitch/styles/components.scss @@ -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%; diff --git a/app/javascript/themes/glitch/styles/index.scss b/app/javascript/themes/glitch/styles/index.scss index 0eb6ac6d8..c962a1f62 100644 --- a/app/javascript/themes/glitch/styles/index.scss +++ b/app/javascript/themes/glitch/styles/index.scss @@ -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'; |