OpenSource/mastodon
OpenSource/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2024-12-23 15:42:34 +01:00
Code Issues Projects Releases Packages Wiki Activity

Various improvements to single column layout (#10809)

Browse source 
- Add potential side panels to single column layout
- Hide FAB on large screens
This commit is contained in:
Eugen Rochko 2019-05-23 20:01:10 +02:00 committed by GitHub
parent 9a5561a5b8
commit 84dc21d55d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 56 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
app/javascript/mastodon/features/ui/components/columns_area.js
View file

@ -163,21 +163,28 @@ class ColumnsArea extends ImmutablePureComponent {
if (singleColumn) { if (singleColumn) {
const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null : <Link key='floating-action-button' to='/statuses/new' className='floating-action-button' aria-label={intl.formatMessage(messages.publish)}><Icon id='pencil' /></Link>; const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null : <Link key='floating-action-button' to='/statuses/new' className='floating-action-button' aria-label={intl.formatMessage(messages.publish)}><Icon id='pencil' /></Link>;
return columnIndex !== -1 ? [ const content = columnIndex !== -1 ? (
<TabsBar key='tabs' />,
<ReactSwipeableViews key='content' index={columnIndex} onChangeIndex={this.handleSwipe} onTransitionEnd={this.handleAnimationEnd} animateTransitions={shouldAnimate} springConfig={{ duration: '400ms', delay: '0s', easeFunction: 'ease' }} style={{ height: '100%' }}> <ReactSwipeableViews key='content' index={columnIndex} onChangeIndex={this.handleSwipe} onTransitionEnd={this.handleAnimationEnd} animateTransitions={shouldAnimate} springConfig={{ duration: '400ms', delay: '0s', easeFunction: 'ease' }} style={{ height: '100%' }}>
{links.map(this.renderView)} {links.map(this.renderView)}
</ReactSwipeableViews>, </ReactSwipeableViews>
) : (
<div key='content' className='columns-area columns-area--mobile'>{children}</div>
);
floatingActionButton, return (
] : [ <div className='columns-area__panels'>
<TabsBar key='tabs' />, <div className='columns-area__panels__pane' />
<div key='content' className='columns-area columns-area--mobile'>{children}</div>, <div className='columns-area__panels__main'>
<TabsBar key='tabs' />
{content}
</div>
floatingActionButton, <div className='columns-area__panels__pane' />
];
{floatingActionButton}
</div>
);
} }
return ( return (

43
app/javascript/styles/mastodon/components.scss
View file

@ -1786,6 +1786,39 @@ a.account__display-name {
&.unscrollable { &.unscrollable {
overflow-x: hidden; overflow-x: hidden;
} }
&__panels {
display: flex;
justify-content: center;
width: 100%;
height: 100%;
&__pane {
flex: 1 1 auto;
height: 100%;
overflow: hidden;
pointer-events: none;
display: flex;
justify-content: flex-end;
&__inner {
pointer-events: auto;
height: 100%;
}
}
&__main {
box-sizing: border-box;
width: 100%;
max-width: 600px;
display: flex;
flex-direction: column;
@media screen and (min-width: 360px) {
padding: 0 10px;
}
}
}
} }
.react-swipeable-view-container { .react-swipeable-view-container {
@ -1936,7 +1969,6 @@ a.account__display-name {
.columns-area--mobile { .columns-area--mobile {
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
max-width: 600px;
margin: 0 auto; margin: 0 auto;
.column, .column,
@ -1952,7 +1984,7 @@ a.account__display-name {
} }
@media screen and (min-width: 360px) { @media screen and (min-width: 360px) {
padding: 10px; padding: 10px 0;
} }
@media screen and (min-width: 630px) { @media screen and (min-width: 630px) {
@ -2013,8 +2045,7 @@ a.account__display-name {
.tabs-bar { .tabs-bar {
margin: 10px auto; margin: 10px auto;
margin-bottom: 0; margin-bottom: 0;
width: calc(100% - 20px); width: 100%;
max-width: 600px;
} }
.react-swipeable-view-container .columns-area--mobile { .react-swipeable-view-container .columns-area--mobile {
@ -5427,6 +5458,10 @@ noscript {
&:active { &:active {
background: lighten($ui-highlight-color, 7%); background: lighten($ui-highlight-color, 7%);
} }
@media screen and (min-width: 630px) {
display: none;
}
} }
.account__header__content { .account__header__content {