Fix style regressions (#3062)

From #2327 - Elephant friend was overlapping with text, oversized in
single column layout

From #2021 - Centered layout goes against design principles, changes
UX for everybody who's already used to the current one

From #2271 - CPU/RAM overusage from keeping columns in DOM (fix #2648,
possibly also #2101)

diff --git a/app/javascript/mastodon/containers/mastodon.js b/app/javascript/mastodon/containers/mastodon.js
index c21e84d9cb05c6be5984f60476845cb03c0994b0..09ee0914271e7e4a08bb748d7221abe5047afbfe 100644 (file)
--- a/app/javascript/mastodon/containers/mastodon.js
+++ b/app/javascript/mastodon/containers/mastodon.js
@@ -104,125 +104,6 @@ addLocaleData([
   ...tr,
 ]);
 
-const getTopWhenReplacing = (previous, { location }) => location && location.action === 'REPLACE' && [0, 0];
-
-const hiddenColumnContainerStyle = {
-  position: 'absolute',
-  left: '0',
-  top:  '0',
-  visibility: 'hidden'
-};
-
-class Container extends React.PureComponent {
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      renderedPersistents: [],
-      unrenderedPersistents: [],
-    };
-  }
-
-  componentWillMount () {
-    this.unlistenHistory = null;
-
-    this.setState(() => {
-      return {
-        mountImpersistent: false,
-        renderedPersistents: [],
-        unrenderedPersistents: [
-          {pathname: '/timelines/home', component: HomeTimeline},
-          {pathname: '/timelines/public', component: PublicTimeline},
-          {pathname: '/timelines/public/local', component: CommunityTimeline},
-
-          {pathname: '/notifications', component: Notifications},
-          {pathname: '/favourites', component: FavouritedStatuses}
-        ],
-      };
-    }, () => {
-      if (this.unlistenHistory) {
-        return;
-      }
-
-      this.unlistenHistory = browserHistory.listen(location => {
-        const pathname = location.pathname.replace(/\/$/, '').toLowerCase();
-
-        this.setState(oldState => {
-          let persistentMatched = false;
-
-          const newState = {
-            renderedPersistents: oldState.renderedPersistents.map(persistent => {
-              const givenMatched = persistent.pathname === pathname;
-
-              if (givenMatched) {
-                persistentMatched = true;
-              }
-
-              return {
-                hidden: !givenMatched,
-                pathname: persistent.pathname,
-                component: persistent.component
-              };
-            }),
-          };
-
-          if (!persistentMatched) {
-            newState.unrenderedPersistents = [];
-
-            oldState.unrenderedPersistents.forEach(persistent => {
-              if (persistent.pathname === pathname) {
-                persistentMatched = true;
-
-                newState.renderedPersistents.push({
-                  hidden: false,
-                  pathname: persistent.pathname,
-                  component: persistent.component
-                });
-              } else {
-                newState.unrenderedPersistents.push(persistent);
-              }
-            });
-          }
-
-          newState.mountImpersistent = !persistentMatched;
-
-          return newState;
-        });
-      });
-    });
-  }
-
-  componentWillUnmount () {
-    if (this.unlistenHistory) {
-      this.unlistenHistory();
-    }
-
-    this.unlistenHistory = "done";
-  }
-
-  render () {
-    // Hide some components rather than unmounting them to allow to show again
-    // quickly and keep the view state such as the scrolled offset.
-    const persistentsView = this.state.renderedPersistents.map((persistent) =>
-      <div aria-hidden={persistent.hidden} key={persistent.pathname} className='mastodon-column-container' style={persistent.hidden ? hiddenColumnContainerStyle : null}>
-        <persistent.component shouldUpdateScroll={persistent.hidden ? Function.prototype : getTopWhenReplacing} />
-      </div>
-    );
-
-    return (
-      <UI>
-        {this.state.mountImpersistent && this.props.children}
-        {persistentsView}
-      </UI>
-    );
-  }
-}
-
-Container.propTypes = {
-  children: PropTypes.node,
-};
-
 class Mastodon extends React.PureComponent {
 
   componentDidMount() {
@@ -304,11 +185,17 @@ class Mastodon extends React.PureComponent {
       <IntlProvider locale={locale} messages={getMessagesForLocale(locale)}>
         <Provider store={store}>
           <Router history={browserHistory} render={applyRouterMiddleware(useScroll())}>
-            <Route path='/' component={Container}>
+            <Route path='/' component={UI}>
               <IndexRedirect to='/getting-started' />
               <Route path='getting-started' component={GettingStarted} />
+              <Route path='timelines/home' component={HomeTimeline} />
+              <Route path='timelines/public' component={PublicTimeline} />
+              <Route path='timelines/public/local' component={CommunityTimeline} />
               <Route path='timelines/tag/:id' component={HashtagTimeline} />
 
+              <Route path='notifications' component={Notifications} />
+              <Route path='favourites' component={FavouritedStatuses} />
+
               <Route path='statuses/new' component={Compose} />
               <Route path='statuses/:statusId' component={Status} />
               <Route path='statuses/:statusId/reblogs' component={Reblogs} />

diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 773ef0a5b74b86cc6310f34f02a072a87e931dd7..4de8b7969c05184d07b78f67c56314c2fd7ae108 100644 (file)
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -1312,23 +1312,6 @@
   }
 }
 
-@media screen and (min-width: 1397px) { /* Width of 4 columns with margins */
-  .columns-area {
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-@media screen and (min-width: 1900px) {
-  .column,
-  .drawer {
-    width: 400px;
-    border-radius: 4px;
-    height: 96vh;
-    margin-top: 2vh;
-  }
-}
-
 .drawer__pager {
   box-sizing: border-box;
   padding: 0;
@@ -1772,7 +1755,7 @@
 .getting-started {
   box-sizing: border-box;
   padding-bottom: 235px;
-  background: url('../images/mastodon-getting-started.png') no-repeat 0 100% / contain local;
+  background: url('../images/mastodon-getting-started.png') no-repeat 0 100%;
   flex: 1 0 auto;
 
   p {

diff --git a/app/javascript/styles/containers.scss b/app/javascript/styles/containers.scss
index 390b9596cb3b501d134d91aedc6fa889e5c262b4..68f73e0c05b6472198d868017c0fe021b0ce6bba 100644 (file)
--- a/app/javascript/styles/containers.scss
+++ b/app/javascript/styles/containers.scss
@@ -9,16 +9,6 @@
   }
 }
 
-.mastodon-column-container {
-  display: flex;
-  height: 100%;
-  width: 100%;
-
-  // 707568 - height 100% doesn't work on child of a flex item - chromium - Monorail
-  // https://bugs.chromium.org/p/chromium/issues/detail?id=707568
-  flex: 1 1 auto;
-}
-
 .logo-container {
   max-width: 400px;
   margin: 100px auto;