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

2024-11-25 22:01:13 +00:00 · 2023-06-17 02:19:59 +00:00 · 2023-06-17 02:19:59 +00:00 · 9165433282
commit 9165433282
parent d3e181222a 19b3de1bc2
17 changed files with 248 additions and 219 deletions
--- a/src/assets/css/main.css
+++ b/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%;
 }

--- a/src/assets/css/themes/darkly.css
+++ b/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;
--- a/src/assets/css/themes/litely.css
+++ b/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;
--- a/src/shared/components/app/app.tsx
+++ b/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)}
--- a/src/shared/components/app/footer.tsx
+++ b/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>
    );
  }
 }
--- a/src/shared/components/app/navbar.tsx
+++ b/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"
--- a/src/shared/components/comment/comment-form.tsx
+++ b/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}
--- a/src/shared/components/comment/comment-node.tsx
+++ b/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}
          />
        )}
--- a/src/shared/components/common/language-select.tsx
+++ b/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")}
--- a/src/shared/components/common/markdown-textarea.tsx
+++ b/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,101 +145,123 @@ 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="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">
-            {this.getFormatButton("bold", this.handleInsertBold)}
-            {this.getFormatButton("italic", this.handleInsertItalic)}
-            {this.getFormatButton("link", this.handleInsertLink)}
-            <EmojiPicker
-              onEmojiClick={e => this.handleEmoji(this, e)}
-              disabled={this.isDisabled}
-            ></EmojiPicker>
-            <form className="btn btn-sm text-muted font-weight-bold">
-              <label
-                htmlFor={`file-upload-${this.id}`}
-                className={`mb-0 ${
-                  UserService.Instance.myUserInfo && "pointer"
-                }`}
-                data-tippy-content={i18n.t("upload_image")}
-              >
-                {this.state.imageUploadStatus ? (
-                  <Spinner />
-                ) : (
-                  <Icon icon="image" classes="icon-inline" />
-                )}
-              </label>
-              <input
-                id={`file-upload-${this.id}`}
-                type="file"
-                accept="image/*,video/*"
-                name="file"
-                className="d-none"
-                multiple
-                disabled={!UserService.Instance.myUserInfo || this.isDisabled}
-                onChange={linkEvent(this, this.handleImageUpload)}
-              />
-            </form>
-            {this.getFormatButton("header", this.handleInsertHeader)}
-            {this.getFormatButton(
-              "strikethrough",
-              this.handleInsertStrikethrough
-            )}
-            {this.getFormatButton("quote", this.handleInsertQuote)}
-            {this.getFormatButton("list", this.handleInsertList)}
-            {this.getFormatButton("code", this.handleInsertCode)}
-            {this.getFormatButton("subscript", this.handleInsertSubscript)}
-            {this.getFormatButton("superscript", this.handleInsertSuperscript)}
-            {this.getFormatButton("spoiler", this.handleInsertSpoiler)}
-            <a
-              href={markdownHelpUrl}
-              className="btn btn-sm text-muted font-weight-bold"
-              title={i18n.t("formatting_help")}
-              rel={relTags}
+          <div className="col-12">
+            <div
+              className="rounded bg-light overflow-hidden"
+              style={{
+                border: "1px solid var(--medium-light)",
+              }}
            >
-              <Icon icon="help-circle" classes="icon-inline" />
-            </a>
+              <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)}
+                <EmojiPicker
+                  onEmojiClick={e => this.handleEmoji(this, e)}
+                  disabled={this.isDisabled}
+                ></EmojiPicker>
+                <form className="btn btn-sm text-muted font-weight-bold">
+                  <label
+                    htmlFor={`file-upload-${this.id}`}
+                    className={`mb-0 ${
+                      UserService.Instance.myUserInfo && "pointer"
+                    }`}
+                    data-tippy-content={i18n.t("upload_image")}
+                  >
+                    {this.state.imageUploadStatus ? (
+                      <Spinner />
+                    ) : (
+                      <Icon icon="image" classes="icon-inline" />
+                    )}
+                  </label>
+                  <input
+                    id={`file-upload-${this.id}`}
+                    type="file"
+                    accept="image/*,video/*"
+                    name="file"
+                    className="d-none"
+                    multiple
+                    disabled={
+                      !UserService.Instance.myUserInfo || this.isDisabled
+                    }
+                    onChange={linkEvent(this, this.handleImageUpload)}
+                  />
+                </form>
+                {this.getFormatButton("header", this.handleInsertHeader)}
+                {this.getFormatButton(
+                  "strikethrough",
+                  this.handleInsertStrikethrough
+                )}
+                {this.getFormatButton("quote", this.handleInsertQuote)}
+                {this.getFormatButton("list", this.handleInsertList)}
+                {this.getFormatButton("code", this.handleInsertCode)}
+                {this.getFormatButton("subscript", this.handleInsertSubscript)}
+                {this.getFormatButton(
+                  "superscript",
+                  this.handleInsertSuperscript
+                )}
+                {this.getFormatButton("spoiler", this.handleInsertSpoiler)}
+                <a
+                  href={markdownHelpUrl}
+                  className="btn btn-sm text-muted font-weight-bold"
+                  title={i18n.t("formatting_help")}
+                  rel={relTags}
+                >
+                  <Icon icon="help-circle" classes="icon-inline" />
+                </a>
+              </div>
+
+              <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-sm-12 d-flex align-items-center flex-wrap">
+          <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)}
--- a/src/shared/components/community/sidebar.tsx
+++ b/src/shared/components/community/sidebar.tsx
@ -131,37 +131,39 @@ 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">
-          <div className="card-body">
-            {this.communityTitle()}
-            {this.props.editable && this.adminButtons()}
-            {myUSerInfo && this.subscribe()}
-            {this.canPost && this.createPost()}
-            {myUSerInfo && this.blockCommunity()}
-            {!myUSerInfo && (
-              <div className="alert alert-info" role="alert">
-                <T
-                  i18nKey="community_not_logged_in_alert"
-                  interpolation={{
-                    community: name,
-                    instance: hostname(actor_id),
-                  }}
-                >
-                  #<code className="user-select-all">#</code>#
-                </T>
-              </div>
-            )}
-          </div>
+      <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()}
+              {myUSerInfo && this.subscribe()}
+              {this.canPost && this.createPost()}
+              {myUSerInfo && this.blockCommunity()}
+              {!myUSerInfo && (
+                <div className="alert alert-info" role="alert">
+                  <T
+                    i18nKey="community_not_logged_in_alert"
+                    interpolation={{
+                      community: name,
+                      instance: hostname(actor_id),
+                    }}
+                  >
+                    #<code className="user-select-all">#</code>#
+                  </T>
+                </div>
+              )}
+            </div>
+          </section>
+          <section id="sidebarInfo" className="card border-secondary mb-3">
+            <div className="card-body">
+              {this.description()}
+              {this.badges()}
+              {this.mods()}
+            </div>
+          </section>
        </div>
-        <div className="card border-secondary mb-3">
-          <div className="card-body">
-            {this.description()}
-            {this.badges()}
-            {this.mods()}
-          </div>
-        </div>
-      </div>
+      </aside>
    );
  }

--- a/src/shared/components/home/home.tsx
+++ b/src/shared/components/home/home.tsx
@ -419,35 +419,36 @@ export class Home extends Component<any, HomeState> {
    } = this.state;

    return (
-      <div>
-        <div>
-          <div className="card border-secondary mb-3">
-            <div className="card-body">
-              {this.trendingCommunities()}
-              {canCreateCommunity(this.state.siteRes) && (
-                <LinkButton
-                  path="/create_community"
-                  translationKey="create_a_community"
-                />
-              )}
+      <div id="sidebarContainer">
+        <section id="sidebarMain" className="card border-secondary mb-3">
+          <div className="card-body">
+            {this.trendingCommunities()}
+            {canCreateCommunity(this.state.siteRes) && (
              <LinkButton
-                path="/communities"
-                translationKey="explore_communities"
+                path="/create_community"
+                translationKey="create_a_community"
              />
-            </div>
+            )}
+            <LinkButton
+              path="/communities"
+              translationKey="explore_communities"
+            />
          </div>
-          <SiteSidebar
-            site={site}
-            admins={admins}
-            counts={counts}
-            showLocal={showLocal(this.isoData)}
-          />
-          {this.hasFollows && (
-            <div className="card border-secondary mb-3">
-              <div className="card-body">{this.subscribedCommunities}</div>
-            </div>
-          )}
-        </div>
+        </section>
+        <SiteSidebar
+          site={site}
+          admins={admins}
+          counts={counts}
+          showLocal={showLocal(this.isoData)}
+        />
+        {this.hasFollows && (
+          <section
+            id="sidebarSubscribed"
+            className="card border-secondary mb-3"
+          >
+            <div className="card-body">{this.subscribedCommunities}</div>
+          </section>
+        )}
      </div>
    );
  }
--- a/src/shared/components/home/login.tsx
+++ b/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;
        }

--- a/src/shared/components/home/site-sidebar.tsx
+++ b/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>
    );
  }

--- a/src/shared/components/post/create-post.tsx
+++ b/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}
--- a/src/shared/components/post/post-listing.tsx
+++ b/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>
      </>
    );
--- a/src/shared/components/post/post.tsx
+++ b/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,24 +548,22 @@ 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}
-            admins={this.state.siteRes.admins}
-            enableNsfw={enableNsfw(this.state.siteRes)}
-            showIcon
-            allLanguages={this.state.siteRes.all_languages}
-            siteLanguages={this.state.siteRes.discussion_languages}
-            onDeleteCommunity={this.handleDeleteCommunityClick}
-            onLeaveModTeam={this.handleAddModToCommunity}
-            onFollowCommunity={this.handleFollow}
-            onRemoveCommunity={this.handleModRemoveCommunity}
-            onPurgeCommunity={this.handlePurgeCommunity}
-            onBlockCommunity={this.handleBlockCommunity}
-            onEditCommunity={this.handleEditCommunity}
-          />
-        </div>
+        <Sidebar
+          community_view={res.data.community_view}
+          moderators={res.data.moderators}
+          admins={this.state.siteRes.admins}
+          enableNsfw={enableNsfw(this.state.siteRes)}
+          showIcon
+          allLanguages={this.state.siteRes.all_languages}
+          siteLanguages={this.state.siteRes.discussion_languages}
+          onDeleteCommunity={this.handleDeleteCommunityClick}
+          onLeaveModTeam={this.handleAddModToCommunity}
+          onFollowCommunity={this.handleFollow}
+          onRemoveCommunity={this.handleModRemoveCommunity}
+          onPurgeCommunity={this.handlePurgeCommunity}
+          onBlockCommunity={this.handleBlockCommunity}
+          onEditCommunity={this.handleEditCommunity}
+        />
      );
    }
  }