LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-12-23 11:21:26 +00:00
Code Issues Projects Releases Wiki Activity

Fix: missing semantic css classes and html elements (#1583)

Browse source 
* 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:
Anansi 2023-06-26 20:51:04 +02:00 committed by GitHub
parent c6f23aa64e
commit cb6ab15254
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/shared/components/app/app.tsx
View file

@ -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>
); );
}} }}

14
src/shared/components/community/community.tsx
View file

@ -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>
</> </>
); );

8
src/shared/components/post/post.tsx
View file

@ -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>
); );
} }