Feliday/Feliday-UI
5
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix(a11y): Fix some mobile styles for Sidebar Cards

Browse source
This commit is contained in:
Jay Sitter 2023-06-17 15:24:55 -04:00
parent 072d253baa
commit cf5c8a1c07
2 changed files with 52 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
src/shared/components/home/home.tsx
View file

@ -443,16 +443,17 @@ export class Home extends Component<any, HomeState> {
admins={admins} admins={admins}
counts={counts} counts={counts}
showLocal={showLocal(this.isoData)} showLocal={showLocal(this.isoData)}
isMobile={true}
/> />
)} )}
{showTrendingMobile && ( {showTrendingMobile && (
<div className="col-12 card border-secondary mb-3"> <div className="card border-secondary mb-3">
<div className="card-body">{this.trendingCommunities(true)}</div> <div className="card-body">{this.trendingCommunities(true)}</div>
</div> </div>
)} )}
{showSubscribedMobile && ( {showSubscribedMobile && (
<div className="col-12 card border-secondary mb-3"> <div className="card border-secondary mb-3">
<div className="card-body">{this.subscribedCommunities}</div> {this.subscribedCommunities(true)}
</div> </div>
)} )}
</div> </div>
@ -497,7 +498,7 @@ export class Home extends Component<any, HomeState> {
id="sidebarSubscribed" id="sidebarSubscribed"
className="card border-secondary mb-3" className="card border-secondary mb-3"
> >
{this.subscribedCommunities} {this.subscribedCommunities(false)}
</section> </section>
</div> </div>
)} )}
@ -541,7 +542,7 @@ export class Home extends Component<any, HomeState> {
} }
} }
get subscribedCommunities() { subscribedCommunities(isMobile = false) {
const { subscribedCollapsed } = this.state; const { subscribedCollapsed } = this.state;
return ( return (
@ -558,26 +559,28 @@ export class Home extends Component<any, HomeState> {
</Link> </Link>
</T> </T>
</h5> </h5>
<button {!isMobile && (
type="button" <button
className="btn btn-sm text-muted" type="button"
onClick={linkEvent(this, this.handleCollapseSubscribe)} className="btn btn-sm text-muted"
aria-label={ onClick={linkEvent(this, this.handleCollapseSubscribe)}
subscribedCollapsed ? i18n.t("expand") : i18n.t("collapse") aria-label={
} subscribedCollapsed ? i18n.t("expand") : i18n.t("collapse")
data-tippy-content={ }
subscribedCollapsed ? i18n.t("expand") : i18n.t("collapse") data-tippy-content={
} subscribedCollapsed ? i18n.t("expand") : i18n.t("collapse")
data-bs-toggle="collapse" }
data-bs-target="#sidebarSubscribedBody" data-bs-toggle="collapse"
aria-expanded="true" data-bs-target="#sidebarSubscribedBody"
aria-controls="sidebarSubscribedBody" aria-expanded="true"
> aria-controls="sidebarSubscribedBody"
<Icon >
icon={`${subscribedCollapsed ? "plus" : "minus"}-square`} <Icon
classes="icon-inline" icon={`${subscribedCollapsed ? "plus" : "minus"}-square`}
/> classes="icon-inline"
</button> />
</button>
)}
</header> </header>
<div <div
id="sidebarSubscribedBody" id="sidebarSubscribedBody"

45
src/shared/components/home/site-sidebar.tsx
View file

@ -12,6 +12,7 @@ interface SiteSidebarProps {
showLocal: boolean; showLocal: boolean;
counts?: SiteAggregates; counts?: SiteAggregates;
admins?: PersonView[]; admins?: PersonView[];
isMobile?: boolean;
} }
interface SiteSidebarState { interface SiteSidebarState {
@ -60,27 +61,29 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
return ( return (
<> <>
<h5 className="mb-0 d-inline">{this.props.site.name}</h5> <h5 className="mb-0 d-inline">{this.props.site.name}</h5>
<button {!this.props.isMobile && (
type="button" <button
className="btn btn-sm" type="button"
onClick={linkEvent(this, this.handleCollapseSidebar)} className="btn btn-sm"
aria-label={ onClick={linkEvent(this, this.handleCollapseSidebar)}
this.state.collapsed ? i18n.t("expand") : i18n.t("collapse") aria-label={
} this.state.collapsed ? i18n.t("expand") : i18n.t("collapse")
data-tippy-content={ }
this.state.collapsed ? i18n.t("expand") : i18n.t("collapse") data-tippy-content={
} this.state.collapsed ? i18n.t("expand") : i18n.t("collapse")
data-bs-toggle="collapse" }
data-bs-target="#sidebarInfoBody" data-bs-toggle="collapse"
aria-expanded="true" data-bs-target="#sidebarInfoBody"
aria-controls="sidebarInfoBody" aria-expanded="true"
> aria-controls="sidebarInfoBody"
{this.state.collapsed ? ( >
<Icon icon="plus-square" classes="icon-inline" /> {this.state.collapsed ? (
) : ( <Icon icon="plus-square" classes="icon-inline" />
<Icon icon="minus-square" classes="icon-inline" /> ) : (
)} <Icon icon="minus-square" classes="icon-inline" />
</button> )}
</button>
)}
</> </>
); );
} }