* 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>
- <main tabIndex={-1} ref={this.mainContentRef}>
{RouteComponent &&
(isAuthPath(path ?? "") ? (
<AuthGuard>
{RouteComponent &&
(isAuthPath(path ?? "") ? (
<AuthGuard>
) : (
<RouteComponent {...routeProps} />
))}
) : (
<RouteComponent {...routeProps} />
))}
} from "@utils/helpers";
import type { QueryParams } from "@utils/types";
import { RouteDataResponse } from "@utils/types";
} 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,
import { RouteComponentProps } from "inferno-router/dist/Route";
import {
AddAdmin,
finished: new Map(),
isIsomorphic: false,
};
finished: new Map(),
isIsomorphic: false,
};
+ private readonly mainContentRef: RefObject<HTMLElement>;
constructor(props: RouteComponentProps<{ name: string }>, context: any) {
super(props, context);
constructor(props: RouteComponentProps<{ name: string }>, context: any) {
super(props, context);
this.handleSavePost = this.handleSavePost.bind(this);
this.handlePurgePost = this.handlePurgePost.bind(this);
this.handleFeaturePost = this.handleFeaturePost.bind(this);
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;
// Only fetch the data if coming from another route
if (FirstLoadService.isFirstLoad) {
const { communityRes, commentsRes, postsRes } = this.isoData.routeData;
- <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
{this.communityInfo(res)}
<div className="d-block d-md-none">
<button
{this.selects(res)}
{this.listings(res)}
<Paginator page={page} onChange={this.handlePageChange} />
{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">
const res = this.state.postRes.data;
return (
<div className="row">
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}
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
this.commentsTree()}
{this.state.commentViewType == CommentViewType.Flat &&
this.commentsFlat()}
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>