mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-12-23 11:21:26 +00:00
Fix: missing semantic css classes and html elements (#1583)
* Fix: missing semantic css classes and html elements. Now all pages have a main and aside element when a sidebar is present to facilitate custom theming. This does not impact the default behavior of the front. * Fix: re-added communityref on main element --------- Co-authored-by: 0xAnansi <0xAnansi@omageni.com> Co-authored-by: Jay Sitter <jsit@users.noreply.github.com> Co-authored-by: Dessalines <dessalines@users.noreply.github.com>
This commit is contained in:
parent
87a5231745
commit
b2bd193160
3 changed files with 14 additions and 12 deletions
|
@ -59,7 +59,7 @@ export class App extends Component<any, any> {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ErrorGuard>
|
<ErrorGuard>
|
||||||
<main tabIndex={-1} ref={this.mainContentRef}>
|
<div tabIndex={-1}>
|
||||||
{RouteComponent &&
|
{RouteComponent &&
|
||||||
(isAuthPath(path ?? "") ? (
|
(isAuthPath(path ?? "") ? (
|
||||||
<AuthGuard>
|
<AuthGuard>
|
||||||
|
@ -68,7 +68,7 @@ export class App extends Component<any, any> {
|
||||||
) : (
|
) : (
|
||||||
<RouteComponent {...routeProps} />
|
<RouteComponent {...routeProps} />
|
||||||
))}
|
))}
|
||||||
</main>
|
</div>
|
||||||
</ErrorGuard>
|
</ErrorGuard>
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
|
|
|
@ -22,7 +22,7 @@ import {
|
||||||
} from "@utils/helpers";
|
} from "@utils/helpers";
|
||||||
import type { QueryParams } from "@utils/types";
|
import type { QueryParams } from "@utils/types";
|
||||||
import { RouteDataResponse } from "@utils/types";
|
import { RouteDataResponse } from "@utils/types";
|
||||||
import { Component, linkEvent } from "inferno";
|
import { Component, RefObject, createRef, linkEvent } from "inferno";
|
||||||
import { RouteComponentProps } from "inferno-router/dist/Route";
|
import { RouteComponentProps } from "inferno-router/dist/Route";
|
||||||
import {
|
import {
|
||||||
AddAdmin,
|
AddAdmin,
|
||||||
|
@ -154,7 +154,7 @@ export class Community extends Component<
|
||||||
finished: new Map(),
|
finished: new Map(),
|
||||||
isIsomorphic: false,
|
isIsomorphic: false,
|
||||||
};
|
};
|
||||||
|
private readonly mainContentRef: RefObject<HTMLElement>;
|
||||||
constructor(props: RouteComponentProps<{ name: string }>, context: any) {
|
constructor(props: RouteComponentProps<{ name: string }>, context: any) {
|
||||||
super(props, context);
|
super(props, context);
|
||||||
|
|
||||||
|
@ -195,7 +195,7 @@ export class Community extends Component<
|
||||||
this.handleSavePost = this.handleSavePost.bind(this);
|
this.handleSavePost = this.handleSavePost.bind(this);
|
||||||
this.handlePurgePost = this.handlePurgePost.bind(this);
|
this.handlePurgePost = this.handlePurgePost.bind(this);
|
||||||
this.handleFeaturePost = this.handleFeaturePost.bind(this);
|
this.handleFeaturePost = this.handleFeaturePost.bind(this);
|
||||||
|
this.mainContentRef = createRef();
|
||||||
// Only fetch the data if coming from another route
|
// Only fetch the data if coming from another route
|
||||||
if (FirstLoadService.isFirstLoad) {
|
if (FirstLoadService.isFirstLoad) {
|
||||||
const { communityRes, commentsRes, postsRes } = this.isoData.routeData;
|
const { communityRes, commentsRes, postsRes } = this.isoData.routeData;
|
||||||
|
@ -317,7 +317,7 @@ export class Community extends Component<
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-12 col-md-8">
|
<main className="col-12 col-md-8" ref={this.mainContentRef}>
|
||||||
{this.communityInfo(res)}
|
{this.communityInfo(res)}
|
||||||
<div className="d-block d-md-none">
|
<div className="d-block d-md-none">
|
||||||
<button
|
<button
|
||||||
|
@ -339,10 +339,10 @@ export class Community extends Component<
|
||||||
{this.selects(res)}
|
{this.selects(res)}
|
||||||
{this.listings(res)}
|
{this.listings(res)}
|
||||||
<Paginator page={page} onChange={this.handlePageChange} />
|
<Paginator page={page} onChange={this.handlePageChange} />
|
||||||
</div>
|
</main>
|
||||||
<div className="d-none d-md-block col-md-4">
|
<aside className="d-none d-md-block col-md-4">
|
||||||
{this.sidebar(res)}
|
{this.sidebar(res)}
|
||||||
</div>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
@ -348,7 +348,7 @@ export class Post extends Component<any, PostState> {
|
||||||
const res = this.state.postRes.data;
|
const res = this.state.postRes.data;
|
||||||
return (
|
return (
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-12 col-md-8 mb-3">
|
<main className="col-12 col-md-8 mb-3">
|
||||||
<HtmlTags
|
<HtmlTags
|
||||||
title={this.documentTitle}
|
title={this.documentTitle}
|
||||||
path={this.context.router.route.match.url}
|
path={this.context.router.route.match.url}
|
||||||
|
@ -415,8 +415,10 @@ export class Post extends Component<any, PostState> {
|
||||||
this.commentsTree()}
|
this.commentsTree()}
|
||||||
{this.state.commentViewType == CommentViewType.Flat &&
|
{this.state.commentViewType == CommentViewType.Flat &&
|
||||||
this.commentsFlat()}
|
this.commentsFlat()}
|
||||||
</div>
|
</main>
|
||||||
<div className="d-none d-md-block col-md-4">{this.sidebar()}</div>
|
<aside className="d-none d-md-block col-md-4">
|
||||||
|
{this.sidebar()}
|
||||||
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue