Small style fixes (#4206)

* fix(components/media_modal): Center horizontally in Firefox

* fix(components/status_list): Do not remove load more button

diff --git a/app/javascript/mastodon/components/load_more.js b/app/javascript/mastodon/components/load_more.js
index 2996d4dc8d8d8176c3c2b45d3bf6e525602ad1ba..e2fe1fed7ebb321b436fbf536f460063df12600b 100644 (file)
--- a/app/javascript/mastodon/components/load_more.js
+++ b/app/javascript/mastodon/components/load_more.js
@@ -6,11 +6,18 @@ export default class LoadMore extends React.PureComponent {
 
   static propTypes = {
     onClick: PropTypes.func,
+    visible: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    visible: true,
   }
 
   render() {
+    const { visible } = this.props;
+
     return (
-      <button className='load-more' onClick={this.props.onClick}>
+      <button className='load-more' disabled={!visible} style={{ opacity: visible ? 1 : 0 }} onClick={this.props.onClick}>
         <FormattedMessage id='status.load_more' defaultMessage='Load more' />
       </button>
     );

diff --git a/app/javascript/mastodon/components/status_list.js b/app/javascript/mastodon/components/status_list.js
index 5bc46e8eeb4e9974b3458cf95bbcbec0d4b896f6..86e8386bdadc9fba700ebd1e2612b2c3cd4f5e45 100644 (file)
--- a/app/javascript/mastodon/components/status_list.js
+++ b/app/javascript/mastodon/components/status_list.js
@@ -101,13 +101,9 @@ export default class StatusList extends ImmutablePureComponent {
   render () {
     const { statusIds, scrollKey, trackScroll, shouldUpdateScroll, isLoading, hasMore, prepend, emptyMessage } = this.props;
 
-    let loadMore       = null;
+    const loadMore     = <LoadMore visible={!isLoading && statusIds.size > 0 && hasMore} onClick={this.handleLoadMore} />;
     let scrollableArea = null;
 
-    if (!isLoading && statusIds.size > 0 && hasMore) {
-      loadMore = <LoadMore onClick={this.handleLoadMore} />;
-    }
-
     if (isLoading || statusIds.size > 0 || !emptyMessage) {
       scrollableArea = (
         <div className='scrollable' ref={this.setRef}>

diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 0420a2bedc6343c9e4e353e50dc253fe2a3c8d9f..fc797a508657cb5682b34a07106858a34e356ad3 100644 (file)
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -1314,6 +1314,7 @@
 .react-swipeable-view-container > * {
   display: flex;
   align-items: center;
+  justify-content: center;
   height: 100%;
 }