Use aside semantic HTML tag for sidebars

This commit is contained in:
Zetaphor 2023-06-16 17:27:55 -03:00
parent 5d7e5cac33
commit 9a943e1f2e
3 changed files with 34 additions and 33 deletions

View file

@ -133,7 +133,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
const { name, actor_id } = this.props.community_view.community; const { name, actor_id } = this.props.community_view.community;
return ( return (
<div id="sidebarContainer"> <div id="sidebarContainer">
<div id="sidebarMain" className="card border-secondary mb-3"> <section id="sidebarMain" className="card border-secondary mb-3">
<div className="card-body"> <div className="card-body">
{this.communityTitle()} {this.communityTitle()}
{this.props.editable && this.adminButtons()} {this.props.editable && this.adminButtons()}
@ -154,14 +154,14 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
</div> </div>
)} )}
</div> </div>
</div> </section>
<div id="sidebarInfo" className="card border-secondary mb-3"> <section id="sidebarInfo" className="card border-secondary mb-3">
<div className="card-body"> <div className="card-body">
{this.description()} {this.description()}
{this.badges()} {this.badges()}
{this.mods()} {this.mods()}
</div> </div>
</div> </section>
</div> </div>
); );
} }

View file

@ -422,36 +422,37 @@ export class Home extends Component<any, HomeState> {
} = this.state; } = this.state;
return ( return (
<div> <div id="sidebarContainer">
<div id="sidebarContainer"> <section id="sidebarMain" className="card border-secondary mb-3">
<div id="sidebarMain" className="card border-secondary mb-3"> <div className="card-body">
<div className="card-body"> {this.trendingCommunities()}
{this.trendingCommunities()} {canCreateCommunity(this.state.siteRes) && (
{canCreateCommunity(this.state.siteRes) && (
<LinkButton
path="/create_community"
translationKey="create_a_community"
/>
)}
<LinkButton <LinkButton
path="/communities" path="/create_community"
translationKey="explore_communities" translationKey="create_a_community"
/> />
</div> )}
<LinkButton
path="/communities"
translationKey="explore_communities"
/>
</div> </div>
<SiteSidebar </section>
site={site} <SiteSidebar
admins={admins} site={site}
counts={counts} admins={admins}
online={online} counts={counts}
showLocal={showLocal(this.isoData)} online={online}
/> showLocal={showLocal(this.isoData)}
{this.hasFollows && ( />
<div id="sidebarSubscribed" className="card border-secondary mb-3"> {this.hasFollows && (
<div className="card-body">{this.subscribedCommunities}</div> <section
</div> id="sidebarSubscribed"
)} className="card border-secondary mb-3"
</div> >
<div className="card-body">{this.subscribedCommunities}</div>
</section>
)}
</div> </div>
); );
} }

View file

@ -30,7 +30,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
render() { render() {
return ( return (
<div id="sidebarInfo" className="card border-secondary mb-3"> <section id="sidebarInfo" className="card border-secondary mb-3">
<div className="card-body"> <div className="card-body">
<div> <div>
<div className="mb-2">{this.siteName()}</div> <div className="mb-2">{this.siteName()}</div>
@ -42,7 +42,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
)} )}
</div> </div>
</div> </div>
</div> </section>
); );
} }