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)
This commit is contained in:
Eugen Rochko 2017-05-15 01:23:58 +02:00 committed by GitHub
parent 0a110d07b6
commit a588358f41
3 changed files with 8 additions and 148 deletions

View file

@ -104,125 +104,6 @@ addLocaleData([
...tr, ...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 { class Mastodon extends React.PureComponent {
componentDidMount() { componentDidMount() {
@ -304,11 +185,17 @@ class Mastodon extends React.PureComponent {
<IntlProvider locale={locale} messages={getMessagesForLocale(locale)}> <IntlProvider locale={locale} messages={getMessagesForLocale(locale)}>
<Provider store={store}> <Provider store={store}>
<Router history={browserHistory} render={applyRouterMiddleware(useScroll())}> <Router history={browserHistory} render={applyRouterMiddleware(useScroll())}>
<Route path='/' component={Container}> <Route path='/' component={UI}>
<IndexRedirect to='/getting-started' /> <IndexRedirect to='/getting-started' />
<Route path='getting-started' component={GettingStarted} /> <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='timelines/tag/:id' component={HashtagTimeline} />
<Route path='notifications' component={Notifications} />
<Route path='favourites' component={FavouritedStatuses} />
<Route path='statuses/new' component={Compose} /> <Route path='statuses/new' component={Compose} />
<Route path='statuses/:statusId' component={Status} /> <Route path='statuses/:statusId' component={Status} />
<Route path='statuses/:statusId/reblogs' component={Reblogs} /> <Route path='statuses/:statusId/reblogs' component={Reblogs} />

View file

@ -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 { .drawer__pager {
box-sizing: border-box; box-sizing: border-box;
padding: 0; padding: 0;
@ -1772,7 +1755,7 @@
.getting-started { .getting-started {
box-sizing: border-box; box-sizing: border-box;
padding-bottom: 235px; 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; flex: 1 0 auto;
p { p {

View file

@ -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 { .logo-container {
max-width: 400px; max-width: 400px;
margin: 100px auto; margin: 100px auto;