Media styling

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>

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

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;
+  }
+}

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;
+    margin-left: -12px;
-    width: calc(100% + 22px);
+    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%;

app/javascript/themes/glitch/styles/index.scss

@@ -1,8 +1,8 @@
 @import 'mixins';
 @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 'basics';