mirror of https://github.com/tootsuite/mastodon
Various improvements to single column layout (#10809)
- Add potential side panels to single column layout - Hide FAB on large screenspull/10818/head
parent
9a5561a5b8
commit
84dc21d55d
|
@ -163,21 +163,28 @@ class ColumnsArea extends ImmutablePureComponent {
|
|||
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>;
|
||||
|
||||
return columnIndex !== -1 ? [
|
||||
<TabsBar key='tabs' />,
|
||||
|
||||
const content = columnIndex !== -1 ? (
|
||||
<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)}
|
||||
</ReactSwipeableViews>,
|
||||
</ReactSwipeableViews>
|
||||
) : (
|
||||
<div key='content' className='columns-area columns-area--mobile'>{children}</div>
|
||||
);
|
||||
|
||||
floatingActionButton,
|
||||
] : [
|
||||
<TabsBar key='tabs' />,
|
||||
return (
|
||||
<div className='columns-area__panels'>
|
||||
<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 (
|
||||
|
|
|
@ -1786,6 +1786,39 @@ a.account__display-name {
|
|||
&.unscrollable {
|
||||
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 {
|
||||
|
@ -1936,7 +1969,6 @@ a.account__display-name {
|
|||
.columns-area--mobile {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
|
||||
.column,
|
||||
|
@ -1952,7 +1984,7 @@ a.account__display-name {
|
|||
}
|
||||
|
||||
@media screen and (min-width: 360px) {
|
||||
padding: 10px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 630px) {
|
||||
|
@ -2013,8 +2045,7 @@ a.account__display-name {
|
|||
.tabs-bar {
|
||||
margin: 10px auto;
|
||||
margin-bottom: 0;
|
||||
width: calc(100% - 20px);
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.react-swipeable-view-container .columns-area--mobile {
|
||||
|
@ -5427,6 +5458,10 @@ noscript {
|
|||
&:active {
|
||||
background: lighten($ui-highlight-color, 7%);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 630px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.account__header__content {
|
||||
|
|
Loading…
Reference in New Issue