mirror of
https://github.com/mastodon/mastodon.git
synced 2024-12-22 18:45:41 +01:00
Use button instead of details/summary
This commit is contained in:
parent
21a0cbcc5c
commit
033ec767e3
2 changed files with 13 additions and 13 deletions
|
@ -62,10 +62,11 @@ class Section extends PureComponent {
|
||||||
collapsed: !this.props.open,
|
collapsed: !this.props.open,
|
||||||
};
|
};
|
||||||
|
|
||||||
handleClick = (e) => {
|
handleClick = () => {
|
||||||
const { onOpen } = this.props;
|
const { onOpen } = this.props;
|
||||||
|
const { collapsed } = this.state;
|
||||||
this.setState({ collapsed: !e.currentTarget.open }, () => onOpen && onOpen());
|
|
||||||
|
this.setState({ collapsed: !collapsed }, () => onOpen && onOpen());
|
||||||
};
|
};
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
|
@ -73,13 +74,15 @@ class Section extends PureComponent {
|
||||||
const { collapsed } = this.state;
|
const { collapsed } = this.state;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<details open={!collapsed} onToggle={this.handleClick} className={classNames('about__section', { active: !collapsed })}>
|
<div className={classNames('about__section', { active: !collapsed })}>
|
||||||
<summary className='about__section__title'>
|
<button aria-expanded={!collapsed} onClick={this.handleClick} className='about__section__title'>
|
||||||
<Icon id={collapsed ? 'chevron-right' : 'chevron-down'} icon={collapsed ? ChevronRightIcon : ExpandMoreIcon} /> {title}
|
<Icon id={collapsed ? 'chevron-right' : 'chevron-down'} icon={collapsed ? ChevronRightIcon : ExpandMoreIcon} /> {title}
|
||||||
</summary>
|
</button>
|
||||||
|
|
||||||
<div className='about__section__body'>{children}</div>
|
{!collapsed && (
|
||||||
</details>
|
<div className='about__section__body'>{children}</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -9146,11 +9146,8 @@ noscript {
|
||||||
background: lighten($ui-base-color, 4%);
|
background: lighten($ui-base-color, 4%);
|
||||||
color: $highlight-text-color;
|
color: $highlight-text-color;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
list-style: none;
|
border: unset;
|
||||||
}
|
width: 100%;
|
||||||
|
|
||||||
&__title::-webkit-details-marker {
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active &__title {
|
&.active &__title {
|
||||||
|
|
Loading…
Reference in a new issue