Merge pull request #1327 from Zetaphor/feature/add-ids-and-classes

Add semantic ID's and classes to improve theming/userscript experience
This commit is contained in:
SleeplessOne1917 2023-06-16 22:19:57 +00:00 committed by GitHub
commit 8040533581
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 120 additions and 107 deletions

View file

@ -25,7 +25,7 @@ export class App extends Component<any, any> {
return (
<>
<Provider i18next={i18n}>
<div id="app">
<div id="app" className="lemmy-site">
{siteView && (
<Theme defaultTheme={siteView.local_site.default_theme} />
)}

View file

@ -16,7 +16,7 @@ export class Footer extends Component<FooterProps, any> {
render() {
return (
<nav className="container-lg navbar navbar-expand-md navbar-light navbar-bg p-3">
<footer className="container-lg navbar navbar-expand-md navbar-light navbar-bg p-3">
<div className="navbar-collapse">
<ul className="navbar-nav ml-auto">
{this.props.site?.version !== VERSION && (
@ -63,7 +63,7 @@ export class Footer extends Component<FooterProps, any> {
</li>
</ul>
</div>
</nav>
</footer>
);
}
}

View file

@ -86,8 +86,12 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
const siteView = this.props.siteRes?.site_view;
const person = UserService.Instance.myUserInfo?.local_user_view.person;
return (
<nav className="navbar navbar-expand-md navbar-light shadow-sm p-0 px-3 container-lg">
<nav
className="navbar navbar-expand-md navbar-light shadow-sm p-0 px-3 container-lg"
id="navbar"
>
<NavLink
id="navTitle"
to="/"
title={siteView?.site.description ?? siteView?.site.name}
className="d-flex align-items-center navbar-brand mr-md-3"
@ -100,10 +104,10 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
</NavLink>
{person && (
<ul className="navbar-nav d-flex flex-row ml-auto d-md-none">
<li className="nav-item">
<li id="navMessages" className="nav-item nav-item-icon">
<NavLink
to="/inbox"
className="p-1 nav-link border-0"
className="p-1 nav-link border-0 nav-messages"
title={i18n.t("unread_messages", {
count: Number(this.state.unreadApplicationCountRes.state),
formattedCount: numToSI(this.unreadInboxCount),
@ -119,7 +123,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
</NavLink>
</li>
{this.moderatesSomething && (
<li className="nav-item">
<li className="nav-item nav-item-icon">
<NavLink
to="/reports"
className="p-1 nav-link border-0"
@ -139,7 +143,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
</li>
)}
{amAdmin() && (
<li className="nav-item">
<li className="nav-item nav-item-icon">
<NavLink
to="/registration_applications"
className="p-1 nav-link border-0"
@ -178,7 +182,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
id="navbarDropdown"
ref={this.mobileMenuRef}
>
<ul className="mr-auto navbar-nav">
<ul id="navbarLinks" className="mr-auto navbar-nav">
<li className="nav-item">
<NavLink
to="/communities"
@ -228,8 +232,8 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
</a>
</li>
</ul>
<ul className="navbar-nav">
<li className="nav-item">
<ul id="navbarIcons" className="navbar-nav">
<li id="navSearch" className="nav-item">
<NavLink
to="/search"
className="nav-link"
@ -240,7 +244,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
</NavLink>
</li>
{amAdmin() && (
<li className="nav-item">
<li id="navAdmin" className="nav-item">
<NavLink
to="/admin"
className="nav-link"
@ -253,7 +257,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
)}
{person ? (
<>
<li className="nav-item">
<li id="navMessages" className="nav-item">
<NavLink
className="nav-link"
to="/inbox"
@ -272,7 +276,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
</NavLink>
</li>
{this.moderatesSomething && (
<li className="nav-item">
<li id="navModeration" className="nav-item">
<NavLink
className="nav-link"
to="/reports"
@ -292,7 +296,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
</li>
)}
{amAdmin() && (
<li className="nav-item">
<li id="navApplications" className="nav-item">
<NavLink
to="/registration_applications"
className="nav-link"
@ -312,7 +316,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
</li>
)}
{person && (
<div className="dropdown">
<div id="dropdownUser" className="dropdown">
<button
className="btn dropdown-toggle"
role="button"

View file

@ -21,6 +21,7 @@ interface CommentFormProps {
onReplyCancel?(): void;
allLanguages: Language[];
siteLanguages: number[];
containerClass?: string;
onUpsertComment(form: EditComment | CreateComment): void;
}
@ -40,7 +41,7 @@ export class CommentForm extends Component<CommentFormProps, any> {
: undefined;
return (
<div className="mb-3">
<div className={["mb-3", this.props.containerClass].join(" ")}>
{UserService.Instance.myUserInfo ? (
<MarkdownTextArea
initialContent={initialContent}

View file

@ -282,7 +282,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
return (
<li className="comment" role="comment">
<div
<article
id={`comment-${cv.comment.id}`}
className={classNames(`details comment-node py-2`, {
"border-top border-light": !this.props.noBorder,
@ -400,6 +400,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
focus
allLanguages={this.props.allLanguages}
siteLanguages={this.props.siteLanguages}
containerClass="comment-comment-container"
onUpsertComment={this.props.onEditComment}
/>
)}
@ -512,7 +513,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
</button>
{!this.state.showAdvanced ? (
<button
className="btn btn-link btn-animate text-muted"
className="btn btn-link btn-animate text-muted btn-more"
onClick={linkEvent(this, this.handleShowAdvanced)}
data-tippy-content={i18n.t("more")}
aria-label={i18n.t("more")}
@ -944,7 +945,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
</div>
)}
</div>
</div>
</article>
{showMoreChildren && (
<div
className={classNames("details ml-1 comment-node py-2", {
@ -1143,6 +1144,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
focus
allLanguages={this.props.allLanguages}
siteLanguages={this.props.siteLanguages}
containerClass="comment-comment-container"
onUpsertComment={this.props.onCreateComment}
/>
)}

View file

@ -63,8 +63,9 @@ export class MarkdownTextArea extends Component<
MarkdownTextAreaProps,
MarkdownTextAreaState
> {
private id = `comment-textarea-${randomStr()}`;
private formId = `comment-form-${randomStr()}`;
private id = `markdown-textarea-${randomStr()}`;
private formId = `markdown-form-${randomStr()}`;
private tribute: any;
state: MarkdownTextAreaState = {

View file

@ -131,8 +131,9 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
const myUSerInfo = UserService.Instance.myUserInfo;
const { name, actor_id } = this.props.community_view.community;
return (
<div>
<div className="card border-secondary mb-3">
<aside className="mb-3">
<div id="sidebarContainer">
<section id="sidebarMain" className="card border-secondary mb-3">
<div className="card-body">
{this.communityTitle()}
{this.props.editable && this.adminButtons()}
@ -153,15 +154,16 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
</div>
)}
</div>
</div>
<div className="card border-secondary mb-3">
</section>
<section id="sidebarInfo" className="card border-secondary mb-3">
<div className="card-body">
{this.description()}
{this.badges()}
{this.mods()}
</div>
</section>
</div>
</div>
</aside>
);
}

View file

@ -419,9 +419,8 @@ export class Home extends Component<any, HomeState> {
} = this.state;
return (
<div>
<div>
<div className="card border-secondary mb-3">
<div id="sidebarContainer">
<section id="sidebarMain" className="card border-secondary mb-3">
<div className="card-body">
{this.trendingCommunities()}
{canCreateCommunity(this.state.siteRes) && (
@ -435,7 +434,7 @@ export class Home extends Component<any, HomeState> {
translationKey="explore_communities"
/>
</div>
</div>
</section>
<SiteSidebar
site={site}
admins={admins}
@ -443,12 +442,14 @@ export class Home extends Component<any, HomeState> {
showLocal={showLocal(this.isoData)}
/>
{this.hasFollows && (
<div className="card border-secondary mb-3">
<section
id="sidebarSubscribed"
className="card border-secondary mb-3"
>
<div className="card-body">{this.subscribedCommunities}</div>
</div>
</section>
)}
</div>
</div>
);
}

View file

@ -29,7 +29,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
render() {
return (
<div className="card border-secondary mb-3">
<section id="sidebarInfo" className="card border-secondary mb-3">
<div className="card-body">
<div>
<div className="mb-2">{this.siteName()}</div>
@ -41,7 +41,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
)}
</div>
</div>
</div>
</section>
);
}

View file

@ -166,7 +166,10 @@ export class CreatePost extends Component<
</h5>
) : (
<div className="row">
<div className="col-12 col-lg-6 offset-lg-3 mb-4">
<div
id="createPostForm"
className="col-12 col-lg-6 offset-lg-3 mb-4"
>
<h5>{i18n.t("create_post")}</h5>
<PostForm
onCreate={this.handlePostCreate}

View file

@ -230,13 +230,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
body() {
const body = this.postView.post.body;
return body ? (
<div className="col-12 card my-2 p-2">
<article id="postContent" className="col-12 card my-2 p-2">
{this.state.viewSource ? (
<pre>{body}</pre>
) : (
<div className="md-div" dangerouslySetInnerHTML={mdToHtml(body)} />
)}
</div>
</article>
) : (
<></>
);
@ -464,7 +464,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
</button>
{showScores() ? (
<div
className={`unselectable pointer font-weight-bold text-muted px-1`}
className={`unselectable pointer font-weight-bold text-muted px-1 post-score`}
data-tippy-content={this.pointsTippy}
>
{numToSI(this.postView.counts.score)}
@ -1398,7 +1398,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<>
{/* The mobile view*/}
<div className="d-block d-sm-none">
<div className="row">
<article className="row post-container">
<div className="col-12">
{this.createdLine()}
@ -1413,14 +1413,14 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
{this.duplicatesLine()}
{this.removeAndBanDialogs()}
</div>
</div>
</article>
</div>
{/* The larger view*/}
<div className="d-none d-sm-block">
<div className="row">
<article className="row post-container">
{!this.props.viewOnly && this.voteBar()}
<div className="col-sm-2 pr-0">
<div className="col-sm-2 pr-0 post-media">
<div className="">{this.thumbnail()}</div>
</div>
<div className="col-12 col-sm-9">
@ -1435,7 +1435,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
</div>
</div>
</div>
</div>
</article>
</div>
</>
);

View file

@ -384,6 +384,7 @@ export class Post extends Component<any, PostState> {
disabled={res.post_view.post.locked}
allLanguages={this.state.siteRes.all_languages}
siteLanguages={this.state.siteRes.discussion_languages}
containerClass="post-comment-container"
onUpsertComment={this.handleCreateComment}
finished={this.state.finished.get(0)}
/>
@ -547,7 +548,6 @@ export class Post extends Component<any, PostState> {
const res = this.state.postRes;
if (res.state === "success") {
return (
<div className="mb-3">
<Sidebar
community_view={res.data.community_view}
moderators={res.data.moderators}
@ -564,7 +564,6 @@ export class Post extends Component<any, PostState> {
onBlockCommunity={this.handleBlockCommunity}
onEditCommunity={this.handleEditCommunity}
/>
</div>
);
}
}