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

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

View file

@ -443,16 +443,17 @@ export class Home extends Component<any, HomeState> {
admins={admins}
counts={counts}
showLocal={showLocal(this.isoData)}
isMobile={true}
/>
)}
{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>
)}
{showSubscribedMobile && (
<div className="col-12 card border-secondary mb-3">
<div className="card-body">{this.subscribedCommunities}</div>
<div className="card border-secondary mb-3">
{this.subscribedCommunities(true)}
</div>
)}
</div>
@ -497,7 +498,7 @@ export class Home extends Component<any, HomeState> {
id="sidebarSubscribed"
className="card border-secondary mb-3"
>
{this.subscribedCommunities}
{this.subscribedCommunities(false)}
</section>
</div>
)}
@ -541,7 +542,7 @@ export class Home extends Component<any, HomeState> {
}
}
get subscribedCommunities() {
subscribedCommunities(isMobile = false) {
const { subscribedCollapsed } = this.state;
return (
@ -558,6 +559,7 @@ export class Home extends Component<any, HomeState> {
</Link>
</T>
</h5>
{!isMobile && (
<button
type="button"
className="btn btn-sm text-muted"
@ -578,6 +580,7 @@ export class Home extends Component<any, HomeState> {
classes="icon-inline"
/>
</button>
)}
</header>
<div
id="sidebarSubscribedBody"

View file

@ -12,6 +12,7 @@ interface SiteSidebarProps {
showLocal: boolean;
counts?: SiteAggregates;
admins?: PersonView[];
isMobile?: boolean;
}
interface SiteSidebarState {
@ -60,6 +61,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
return (
<>
<h5 className="mb-0 d-inline">{this.props.site.name}</h5>
{!this.props.isMobile && (
<button
type="button"
className="btn btn-sm"
@ -81,6 +83,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
<Icon icon="minus-square" classes="icon-inline" />
)}
</button>
)}
</>
);
}