Merge branch 'main' into 1117-jump-to-main-content

src/assets/css/main.css

@@ -46,7 +46,7 @@
 }
 
 .md-div p:last-child {
-  margin-bottom: 0px;
+  margin-bottom: 0;
 }
 
 .md-div img {
@@ -371,7 +371,7 @@ br.big {
 }
 
 .tribute-container li {
-  padding: 5px 5px;
+  padding: 5px;
   cursor: pointer;
 }
 
@@ -410,14 +410,8 @@ br.big {
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
 }
-.lang-select-action {
-  width: 100px;
-}
 
-.lang-select-action:focus {
-  width: auto;
-}
-em-emoji-picker {
+.emoji-picker {
   width: 100%;
 }
 

src/assets/css/themes/darkly.css

@@ -19,6 +19,7 @@
   --warning: #f39c12;
   --danger: #e74c3c;
   --light: #303030;
+  --medium-light: var(--secondary);
   --dark: #dee2e6;
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;

src/assets/css/themes/litely.css

@@ -19,6 +19,7 @@
   --warning: #ffc107;
   --danger: #873208;
   --light: #f8f9fa;
+  --medium-light: var(--bs-gray-300);
   --dark: #343a40;
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;

src/shared/components/app/app.tsx

@@ -32,7 +32,7 @@ export class App extends Component<any, any> {
     return (
       <>
         <Provider i18next={i18n}>
-          <div id="app">
+          <div id="app" className="lemmy-site">
             <a
               className="skip-link bg-light text-dark p-2 text-decoration-none position-absolute start-0 z-3"
               onClick={linkEvent(this, this.handleJumpToContent)}

src/shared/components/app/footer.tsx

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

src/shared/components/app/navbar.tsx

@@ -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"

src/shared/components/comment/comment-form.tsx

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

src/shared/components/comment/comment-node.tsx

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

src/shared/components/common/language-select.tsx

@@ -100,12 +100,9 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
 
     return (
       <select
-        className={classNames(
-          "lang-select-action",
-          this.props.iconVersion
-            ? "btn btn-sm text-muted"
-            : "form-control custom-select"
-        )}
+        className={classNames("lang-select-action", {
+          "form-control custom-select": !this.props.iconVersion,
+        })}
         id={this.id}
         onChange={linkEvent(this, this.handleLanguageChange)}
         aria-label={i18n.t("language_select_placeholder")}

src/shared/components/common/markdown-textarea.tsx

@@ -1,4 +1,5 @@
 import autosize from "autosize";
+import classNames from "classnames";
 import { NoOptionI18nKeys } from "i18next";
 import { Component, linkEvent } from "inferno";
 import { Language } from "lemmy-js-client";
@@ -63,8 +64,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 = {
@@ -143,47 +145,19 @@ export class MarkdownTextArea extends Component<
           }
         />
         <div className="form-group row">
-          <div className={`col-sm-12`}>
-            <textarea
-              id={this.id}
-              className={`form-control ${this.state.previewMode && "d-none"}`}
-              value={this.state.content}
-              onInput={linkEvent(this, this.handleContentChange)}
-              onPaste={linkEvent(this, this.handleImageUploadPaste)}
-              onKeyDown={linkEvent(this, this.handleKeyBinds)}
-              required
-              disabled={this.isDisabled}
-              rows={2}
-              maxLength={this.props.maxLength ?? markdownFieldCharacterLimit}
-              placeholder={this.props.placeholder}
-            />
-            {this.state.previewMode && this.state.content && (
+          <div className="col-12">
             <div
-                className="card border-secondary card-body md-div"
-                dangerouslySetInnerHTML={mdToHtml(this.state.content)}
-              />
-            )}
-            {this.state.imageUploadStatus &&
-              this.state.imageUploadStatus.total > 1 && (
-                <ProgressBar
-                  className="mt-2"
-                  striped
-                  animated
-                  value={this.state.imageUploadStatus.uploaded}
-                  max={this.state.imageUploadStatus.total}
-                  text={i18n.t("pictures_uploded_progess", {
-                    uploaded: this.state.imageUploadStatus.uploaded,
-                    total: this.state.imageUploadStatus.total,
-                  })}
-                />
-              )}
-          </div>
-          <label className="sr-only" htmlFor={this.id}>
-            {i18n.t("body")}
-          </label>
-        </div>
-        <div className="row">
-          <div className="col-sm-12 d-flex flex-wrap">
+              className="rounded bg-light overflow-hidden"
+              style={{
+                border: "1px solid var(--medium-light)",
+              }}
+            >
+              <div
+                className="d-flex flex-wrap"
+                style={{
+                  "border-bottom": "1px solid var(--medium-light)",
+                }}
+              >
                 {this.getFormatButton("bold", this.handleInsertBold)}
                 {this.getFormatButton("italic", this.handleInsertItalic)}
                 {this.getFormatButton("link", this.handleInsertLink)}
@@ -212,7 +186,9 @@ export class MarkdownTextArea extends Component<
                     name="file"
                     className="d-none"
                     multiple
-                disabled={!UserService.Instance.myUserInfo || this.isDisabled}
+                    disabled={
+                      !UserService.Instance.myUserInfo || this.isDisabled
+                    }
                     onChange={linkEvent(this, this.handleImageUpload)}
                   />
                 </form>
@@ -225,7 +201,10 @@ export class MarkdownTextArea extends Component<
                 {this.getFormatButton("list", this.handleInsertList)}
                 {this.getFormatButton("code", this.handleInsertCode)}
                 {this.getFormatButton("subscript", this.handleInsertSubscript)}
-            {this.getFormatButton("superscript", this.handleInsertSuperscript)}
+                {this.getFormatButton(
+                  "superscript",
+                  this.handleInsertSuperscript
+                )}
                 {this.getFormatButton("spoiler", this.handleInsertSpoiler)}
                 <a
                   href={markdownHelpUrl}
@@ -237,7 +216,52 @@ export class MarkdownTextArea extends Component<
                 </a>
               </div>
 
-          <div className="col-sm-12 d-flex align-items-center flex-wrap">
+              <div>
+                <textarea
+                  id={this.id}
+                  className={classNames("form-control border-0 rounded-0", {
+                    "d-none": this.state.previewMode,
+                  })}
+                  value={this.state.content}
+                  onInput={linkEvent(this, this.handleContentChange)}
+                  onPaste={linkEvent(this, this.handleImageUploadPaste)}
+                  onKeyDown={linkEvent(this, this.handleKeyBinds)}
+                  required
+                  disabled={this.isDisabled}
+                  rows={2}
+                  maxLength={
+                    this.props.maxLength ?? markdownFieldCharacterLimit
+                  }
+                  placeholder={this.props.placeholder}
+                />
+                {this.state.previewMode && this.state.content && (
+                  <div
+                    className="card border-secondary card-body md-div"
+                    dangerouslySetInnerHTML={mdToHtml(this.state.content)}
+                  />
+                )}
+                {this.state.imageUploadStatus &&
+                  this.state.imageUploadStatus.total > 1 && (
+                    <ProgressBar
+                      className="mt-2"
+                      striped
+                      animated
+                      value={this.state.imageUploadStatus.uploaded}
+                      max={this.state.imageUploadStatus.total}
+                      text={i18n.t("pictures_uploded_progess", {
+                        uploaded: this.state.imageUploadStatus.uploaded,
+                        total: this.state.imageUploadStatus.total,
+                      })}
+                    />
+                  )}
+              </div>
+              <label className="sr-only" htmlFor={this.id}>
+                {i18n.t("body")}
+              </label>
+            </div>
+          </div>
+
+          <div className="col-12 d-flex align-items-center flex-wrap mt-2">
             {this.props.showLanguage && (
               <LanguageSelect
                 iconVersion
@@ -257,7 +281,7 @@ export class MarkdownTextArea extends Component<
             {this.props.buttonTitle && (
               <button
                 type="submit"
-                className="btn btn-sm btn-secondary mr-2"
+                className="btn btn-sm btn-secondary ml-2"
                 disabled={this.isDisabled}
               >
                 {this.state.loading ? (
@@ -270,7 +294,7 @@ export class MarkdownTextArea extends Component<
             {this.props.replyType && (
               <button
                 type="button"
-                className="btn btn-sm btn-secondary mr-2"
+                className="btn btn-sm btn-secondary ml-2"
                 onClick={linkEvent(this, this.handleReplyCancel)}
               >
                 {i18n.t("cancel")}
@@ -278,7 +302,7 @@ export class MarkdownTextArea extends Component<
             )}
             {this.state.content && (
               <button
-                className={`btn btn-sm btn-secondary mr-2 ${
+                className={`btn btn-sm btn-secondary ml-2 ${
                   this.state.previewMode && "active"
                 }`}
                 onClick={linkEvent(this, this.handlePreviewToggle)}

src/shared/components/community/sidebar.tsx

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

src/shared/components/home/home.tsx

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

src/shared/components/home/login.tsx

@@ -172,7 +172,7 @@ export class Login extends Component<any, State> {
             toast(i18n.t("enter_two_factor_code"), "info");
           }
 
-          i.setState({ loginRes: { state: "empty" } });
+          i.setState({ loginRes: { state: "failed", msg: loginRes.msg } });
           break;
         }
 

src/shared/components/home/site-sidebar.tsx

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

src/shared/components/post/create-post.tsx

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

src/shared/components/post/post-listing.tsx

@@ -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)}
@@ -631,7 +631,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const post = this.postView.post;
 
     return (
-      <div className="d-flex justify-content-start flex-wrap text-muted font-weight-bold mb-1">
+      <div className="d-flex align-items-center justify-content-start flex-wrap text-muted font-weight-bold mb-1">
         {this.commentsButton}
         {canShare() && (
           <button
@@ -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>
       </>
     );

src/shared/components/post/post.tsx

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