mirror of https://github.com/Siphonay/mastodon
Fix column header scrolling with the page (#11458)
Regression from aa22b38
This commit is contained in:
parent
c4043ba2f2
commit
706a48ee1f
|
@ -1,5 +1,6 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { createPortal } from 'react-dom';
|
||||
import classNames from 'classnames';
|
||||
import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
|
||||
import Icon from 'mastodon/components/icon';
|
||||
|
@ -28,6 +29,7 @@ class ColumnHeader extends React.PureComponent {
|
|||
showBackButton: PropTypes.bool,
|
||||
children: PropTypes.node,
|
||||
pinned: PropTypes.bool,
|
||||
placeholder: PropTypes.bool,
|
||||
onPin: PropTypes.func,
|
||||
onMove: PropTypes.func,
|
||||
onClick: PropTypes.func,
|
||||
|
@ -79,7 +81,7 @@ class ColumnHeader extends React.PureComponent {
|
|||
}
|
||||
|
||||
render () {
|
||||
const { title, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage } } = this.props;
|
||||
const { title, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, placeholder } = this.props;
|
||||
const { collapsed, animating } = this.state;
|
||||
|
||||
const wrapperClassName = classNames('column-header__wrapper', {
|
||||
|
@ -146,7 +148,7 @@ class ColumnHeader extends React.PureComponent {
|
|||
|
||||
const hasTitle = icon && title;
|
||||
|
||||
return (
|
||||
const component = (
|
||||
<div className={wrapperClassName}>
|
||||
<h1 className={buttonClassName}>
|
||||
{hasTitle && (
|
||||
|
@ -172,6 +174,12 @@ class ColumnHeader extends React.PureComponent {
|
|||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
if (multiColumn || placeholder) {
|
||||
return component;
|
||||
} else {
|
||||
return createPortal(component, document.getElementById('tabs-bar__portal'));
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -146,6 +146,7 @@ class Status extends ImmutablePureComponent {
|
|||
descendantsIds: ImmutablePropTypes.list,
|
||||
intl: PropTypes.object.isRequired,
|
||||
askReplyConfirmation: PropTypes.bool,
|
||||
multiColumn: PropTypes.bool,
|
||||
domain: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
|
@ -437,13 +438,13 @@ class Status extends ImmutablePureComponent {
|
|||
|
||||
render () {
|
||||
let ancestors, descendants;
|
||||
const { shouldUpdateScroll, status, ancestorsIds, descendantsIds, intl, domain } = this.props;
|
||||
const { shouldUpdateScroll, status, ancestorsIds, descendantsIds, intl, domain, multiColumn } = this.props;
|
||||
const { fullscreen } = this.state;
|
||||
|
||||
if (status === null) {
|
||||
return (
|
||||
<Column>
|
||||
<ColumnBackButton />
|
||||
<ColumnBackButton multiColumn={multiColumn} />
|
||||
<MissingIndicator />
|
||||
</Column>
|
||||
);
|
||||
|
@ -473,6 +474,7 @@ class Status extends ImmutablePureComponent {
|
|||
<Column label={intl.formatMessage(messages.detailedStatus)}>
|
||||
<ColumnHeader
|
||||
showBackButton
|
||||
multiColumn={multiColumn}
|
||||
extraButton={(
|
||||
<button className='column-header__button' title={intl.formatMessage(status.get('hidden') ? messages.revealAll : messages.hideAll)} aria-label={intl.formatMessage(status.get('hidden') ? messages.revealAll : messages.hideAll)} onClick={this.handleToggleAll} aria-pressed={status.get('hidden') ? 'false' : 'true'}><Icon id={status.get('hidden') ? 'eye-slash' : 'eye'} /></button>
|
||||
)}
|
||||
|
|
|
@ -21,7 +21,7 @@ export default class ColumnLoading extends ImmutablePureComponent {
|
|||
let { title, icon } = this.props;
|
||||
return (
|
||||
<Column>
|
||||
<ColumnHeader icon={icon} title={title} multiColumn={false} focusable={false} />
|
||||
<ColumnHeader icon={icon} title={title} multiColumn={false} focusable={false} placeholder />
|
||||
<div className='scrollable' />
|
||||
</Column>
|
||||
);
|
||||
|
|
|
@ -73,9 +73,13 @@ class TabsBar extends React.PureComponent {
|
|||
const { intl: { formatMessage } } = this.props;
|
||||
|
||||
return (
|
||||
<nav className='tabs-bar' ref={this.setRef}>
|
||||
{links.map(link => React.cloneElement(link, { key: link.props.to, onClick: this.handleClick, 'aria-label': formatMessage({ id: link.props['data-preview-title-id'] }) }))}
|
||||
</nav>
|
||||
<div className='tabs-bar__wrapper'>
|
||||
<nav className='tabs-bar' ref={this.setRef}>
|
||||
{links.map(link => React.cloneElement(link, { key: link.props.to, onClick: this.handleClick, 'aria-label': formatMessage({ id: link.props['data-preview-title-id'] }) }))}
|
||||
</nav>
|
||||
|
||||
<div id='tabs-bar__portal' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -39,7 +39,7 @@ body {
|
|||
|
||||
&.layout-single-column {
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
min-height: 100vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
|
|
|
@ -1852,6 +1852,26 @@ a.account__display-name {
|
|||
}
|
||||
}
|
||||
|
||||
.tabs-bar__wrapper {
|
||||
background: darken($ui-base-color, 8%);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
padding-top: 0;
|
||||
|
||||
@media screen and (min-width: $no-gap-breakpoint) {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.tabs-bar {
|
||||
margin-bottom: 0;
|
||||
|
||||
@media screen and (min-width: $no-gap-breakpoint) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.react-swipeable-view-container {
|
||||
&,
|
||||
.columns-area,
|
||||
|
@ -1949,9 +1969,6 @@ a.account__display-name {
|
|||
background: lighten($ui-base-color, 8%);
|
||||
flex: 0 0 auto;
|
||||
overflow-y: auto;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.tabs-bar__link {
|
||||
|
@ -2014,6 +2031,14 @@ a.account__display-name {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
//.column {
|
||||
// margin-top: 0;
|
||||
|
||||
// @media screen and (min-width: $no-gap-breakpoint) {
|
||||
// margin-top: 10px;
|
||||
// }
|
||||
//}
|
||||
|
||||
.autosuggest-textarea__textarea {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
@ -2039,6 +2064,7 @@ a.account__display-name {
|
|||
|
||||
@media screen and (min-width: $no-gap-breakpoint) {
|
||||
padding: 10px 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 630px) {
|
||||
|
@ -2153,13 +2179,11 @@ a.account__display-name {
|
|||
|
||||
@media screen and (min-width: $no-gap-breakpoint) {
|
||||
.tabs-bar {
|
||||
margin: 10px auto;
|
||||
margin-bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.react-swipeable-view-container .columns-area--mobile {
|
||||
height: calc(100% - 20px) !important;
|
||||
height: calc(100% - 10px) !important;
|
||||
}
|
||||
|
||||
.getting-started__wrapper,
|
||||
|
|
Loading…
Reference in New Issue