mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-11-30 17:11:43 +00:00
fix(a11y): Fix some mobile styles for Sidebar Cards
This commit is contained in:
parent
072d253baa
commit
cf5c8a1c07
|
@ -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,6 +559,7 @@ export class Home extends Component<any, HomeState> {
|
||||||
</Link>
|
</Link>
|
||||||
</T>
|
</T>
|
||||||
</h5>
|
</h5>
|
||||||
|
{!isMobile && (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="btn btn-sm text-muted"
|
className="btn btn-sm text-muted"
|
||||||
|
@ -578,6 +580,7 @@ export class Home extends Component<any, HomeState> {
|
||||||
classes="icon-inline"
|
classes="icon-inline"
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
|
)}
|
||||||
</header>
|
</header>
|
||||||
<div
|
<div
|
||||||
id="sidebarSubscribedBody"
|
id="sidebarSubscribedBody"
|
||||||
|
|
|
@ -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,6 +61,7 @@ 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>
|
||||||
|
{!this.props.isMobile && (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="btn btn-sm"
|
className="btn btn-sm"
|
||||||
|
@ -81,6 +83,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
|
||||||
<Icon icon="minus-square" classes="icon-inline" />
|
<Icon icon="minus-square" classes="icon-inline" />
|
||||||
)}
|
)}
|
||||||
</button>
|
</button>
|
||||||
|
)}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue