commit: a588358f41f36b2df1dcc4bb2c3df6c54ed52f88
parent: 0a110d07b68b68fbb4b15f1e99b62d6fc696c4a7
Author: Eugen Rochko <eugen@zeonfederated.com>
Date: Mon, 15 May 2017 01:23:58 +0200
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)
Diffstat:
3 files changed, 8 insertions(+), 148 deletions(-)
diff --git 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
@@ -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
@@ -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;
