erik/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2024-08-20 21:08:15 -07:00
Code Issues Projects Releases Wiki Activity

Use button instead of details/summary

Browse source
This commit is contained in:
Simon Rapilly 2023-10-31 22:20:03 +00:00
parent 21a0cbcc5c
commit 033ec767e3
2 changed files with 13 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
app/javascript/mastodon/features/about/index.jsx
View file

@ -62,10 +62,11 @@ class Section extends PureComponent {
collapsed: !this.props.open,
};
handleClick = (e) => {
handleClick = () => {
const { onOpen } = this.props;
this.setState({ collapsed: !e.currentTarget.open }, () => onOpen && onOpen());
const { collapsed } = this.state;
this.setState({ collapsed: !collapsed }, () => onOpen && onOpen());
};
render () {
@ -73,13 +74,15 @@ class Section extends PureComponent {
const { collapsed } = this.state;
return (
<details open={!collapsed} onToggle={this.handleClick} className={classNames('about__section', { active: !collapsed })}>
<summary className='about__section__title'>
<div className={classNames('about__section', { active: !collapsed })}>
<button aria-expanded={!collapsed} onClick={this.handleClick} className='about__section__title'>
<Icon id={collapsed ? 'chevron-right' : 'chevron-down'} icon={collapsed ? ChevronRightIcon : ExpandMoreIcon} /> {title}
</summary>
</button>
<div className='about__section__body'>{children}</div>
</details>
{!collapsed && (
<div className='about__section__body'>{children}</div>
)}
</div>
);
}

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

@ -9146,11 +9146,8 @@ noscript {
background: lighten($ui-base-color, 4%);
color: $highlight-text-color;
cursor: pointer;
list-style: none;
}
&__title::-webkit-details-marker {
display: none;
border: unset;
width: 100%;
}
&.active &__title {