From cf10bd64ad8fb19090f715c09af6b8e59fee9a38 Mon Sep 17 00:00:00 2001 From: Anansi <72401951+0xAnansi@users.noreply.github.com> Date: Mon, 26 Jun 2023 20:51:04 +0200 Subject: [PATCH] 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> --- src/shared/components/app/app.tsx | 4 ++-- src/shared/components/community/community.tsx | 14 +++++++------- src/shared/components/post/post.tsx | 8 +++++--- 3 files changed, 14 insertions(+), 12 deletions(-) diff --git a/src/shared/components/app/app.tsx b/src/shared/components/app/app.tsx index 08ba40e..be0319d 100644 --- a/src/shared/components/app/app.tsx +++ b/src/shared/components/app/app.tsx @@ -59,7 +59,7 @@ export class App extends Component<any, any> { return ( <ErrorGuard> - <main tabIndex={-1} ref={this.mainContentRef}> + <div tabIndex={-1}> {RouteComponent && (isAuthPath(path ?? "") ? ( <AuthGuard> @@ -68,7 +68,7 @@ export class App extends Component<any, any> { ) : ( <RouteComponent {...routeProps} /> ))} - </main> + </div> </ErrorGuard> ); }} diff --git a/src/shared/components/community/community.tsx b/src/shared/components/community/community.tsx index 111b47c..a18153f 100644 --- a/src/shared/components/community/community.tsx +++ b/src/shared/components/community/community.tsx @@ -22,7 +22,7 @@ import { } from "@utils/helpers"; import type { QueryParams } 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 { AddAdmin, @@ -154,7 +154,7 @@ export class Community extends Component< finished: new Map(), isIsomorphic: false, }; - + private readonly mainContentRef: RefObject<HTMLElement>; constructor(props: RouteComponentProps<{ name: string }>, context: any) { super(props, context); @@ -195,7 +195,7 @@ export class Community extends Component< this.handleSavePost = this.handleSavePost.bind(this); this.handlePurgePost = this.handlePurgePost.bind(this); this.handleFeaturePost = this.handleFeaturePost.bind(this); - + this.mainContentRef = createRef(); // Only fetch the data if coming from another route if (FirstLoadService.isFirstLoad) { const { communityRes, commentsRes, postsRes } = this.isoData.routeData; @@ -317,7 +317,7 @@ export class Community extends Component< /> <div className="row"> - <div className="col-12 col-md-8"> + <main className="col-12 col-md-8" ref={this.mainContentRef}> {this.communityInfo(res)} <div className="d-block d-md-none"> <button @@ -339,10 +339,10 @@ export class Community extends Component< {this.selects(res)} {this.listings(res)} <Paginator page={page} onChange={this.handlePageChange} /> - </div> - <div className="d-none d-md-block col-md-4"> + </main> + <aside className="d-none d-md-block col-md-4"> {this.sidebar(res)} - </div> + </aside> </div> </> ); diff --git a/src/shared/components/post/post.tsx b/src/shared/components/post/post.tsx index f0aa3ff..1aaf50d 100644 --- a/src/shared/components/post/post.tsx +++ b/src/shared/components/post/post.tsx @@ -348,7 +348,7 @@ export class Post extends Component<any, PostState> { const res = this.state.postRes.data; return ( <div className="row"> - <div className="col-12 col-md-8 mb-3"> + <main className="col-12 col-md-8 mb-3"> <HtmlTags title={this.documentTitle} path={this.context.router.route.match.url} @@ -415,8 +415,10 @@ export class Post extends Component<any, PostState> { this.commentsTree()} {this.state.commentViewType == CommentViewType.Flat && this.commentsFlat()} - </div> - <div className="d-none d-md-block col-md-4">{this.sidebar()}</div> + </main> + <aside className="d-none d-md-block col-md-4"> + {this.sidebar()} + </aside> </div> ); } -- 2.44.1