From fe1b9239d27238b60e70882a21edc07008b7ccbc Mon Sep 17 00:00:00 2001
From: SleeplessOne1917 <abias1122@gmail.com>
Date: Sun, 25 Jun 2023 04:23:29 -0400
Subject: [PATCH] Make create post and community pages look better on large
 screens

---
 src/assets/css/main.css                       |  5 ++
 .../components/community/community-form.tsx   | 57 +++++++++----------
 .../components/community/create-community.tsx | 26 ++++-----
 src/shared/components/post/create-post.tsx    | 43 +++++++-------
 src/shared/components/post/post-form.tsx      |  2 +-
 5 files changed, 63 insertions(+), 70 deletions(-)

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index c525ae42..d1e500c0 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -437,3 +437,8 @@ br.big {
 .markdown-textarea {
   max-width: 50rem;
 }
+
+input[type="checkbox"],
+.form-check label {
+  cursor: pointer;
+}
diff --git a/src/shared/components/community/community-form.tsx b/src/shared/components/community/community-form.tsx
index 6e2eba5a..6a5f3df8 100644
--- a/src/shared/components/community/community-form.tsx
+++ b/src/shared/components/community/community-form.tsx
@@ -200,41 +200,36 @@ export class CommunityForm extends Component<
         </div>
 
         {this.props.enableNsfw && (
-          <div className="mb-3 row">
-            <legend className="col-form-label col-sm-2 pt-0">
+          <div className="form-check mb-3">
+            <label className="form-check-label pt-0" htmlFor="community-nsfw">
               {I18NextService.i18n.t("nsfw")}
-            </legend>
-            <div className="col-10">
-              <div className="form-check">
-                <input
-                  className="form-check-input position-static"
-                  id="community-nsfw"
-                  type="checkbox"
-                  checked={this.state.form.nsfw}
-                  onChange={linkEvent(this, this.handleCommunityNsfwChange)}
-                />
-              </div>
-            </div>
+            </label>
+            <input
+              className="form-check-input"
+              id="community-nsfw"
+              type="checkbox"
+              checked={this.state.form.nsfw}
+              onChange={linkEvent(this, this.handleCommunityNsfwChange)}
+            />
           </div>
         )}
-        <div className="mb-3 row">
-          <legend className="col-form-label col-6 pt-0">
+        <div className="form-check mb-3">
+          <label
+            className="form-check-label pt-0"
+            htmlFor="community-only-mods-can-post"
+          >
             {I18NextService.i18n.t("only_mods_can_post_in_community")}
-          </legend>
-          <div className="col-6">
-            <div className="form-check">
-              <input
-                className="form-check-input position-static"
-                id="community-only-mods-can-post"
-                type="checkbox"
-                checked={this.state.form.posting_restricted_to_mods}
-                onChange={linkEvent(
-                  this,
-                  this.handleCommunityPostingRestrictedToMods
-                )}
-              />
-            </div>
-          </div>
+          </label>
+          <input
+            className="form-check-input"
+            id="community-only-mods-can-post"
+            type="checkbox"
+            checked={this.state.form.posting_restricted_to_mods}
+            onChange={linkEvent(
+              this,
+              this.handleCommunityPostingRestrictedToMods
+            )}
+          />
         </div>
         <LanguageSelect
           allLanguages={this.props.allLanguages}
diff --git a/src/shared/components/community/create-community.tsx b/src/shared/components/community/create-community.tsx
index 2ce5af5a..3db5f664 100644
--- a/src/shared/components/community/create-community.tsx
+++ b/src/shared/components/community/create-community.tsx
@@ -32,25 +32,23 @@ export class CreateCommunity extends Component<any, CreateCommunityState> {
 
   render() {
     return (
-      <div className="create-community container-lg">
+      <main className="create-community container-flex row mx-1 mx-md-4">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
         />
-        <div className="row">
-          <div className="col-12 col-lg-6 offset-lg-3 mb-4">
-            <h5>{I18NextService.i18n.t("create_community")}</h5>
-            <CommunityForm
-              onUpsertCommunity={this.handleCommunityCreate}
-              enableNsfw={enableNsfw(this.state.siteRes)}
-              allLanguages={this.state.siteRes.all_languages}
-              siteLanguages={this.state.siteRes.discussion_languages}
-              communityLanguages={this.state.siteRes.discussion_languages}
-              loading={this.state.loading}
-            />
-          </div>
+        <div className="col-12 col-lg-6 offset-lg-3 mb-4">
+          <h5>{I18NextService.i18n.t("create_community")}</h5>
+          <CommunityForm
+            onUpsertCommunity={this.handleCommunityCreate}
+            enableNsfw={enableNsfw(this.state.siteRes)}
+            allLanguages={this.state.siteRes.all_languages}
+            siteLanguages={this.state.siteRes.discussion_languages}
+            communityLanguages={this.state.siteRes.discussion_languages}
+            loading={this.state.loading}
+          />
         </div>
-      </div>
+      </main>
     );
   }
 
diff --git a/src/shared/components/post/create-post.tsx b/src/shared/components/post/create-post.tsx
index fe941830..e60336a4 100644
--- a/src/shared/components/post/create-post.tsx
+++ b/src/shared/components/post/create-post.tsx
@@ -155,7 +155,7 @@ export class CreatePost extends Component<
       | undefined;
 
     return (
-      <div className="create-post container-lg">
+      <main className="create-post container-flex row mx-1 mx-md-4">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
@@ -165,31 +165,26 @@ export class CreatePost extends Component<
             <Spinner large />
           </h5>
         ) : (
-          <div className="row">
-            <div
-              id="createPostForm"
-              className="col-12 col-lg-6 offset-lg-3 mb-4"
-            >
-              <h1 className="h4">{I18NextService.i18n.t("create_post")}</h1>
-              <PostForm
-                onCreate={this.handlePostCreate}
-                params={locationState}
-                enableDownvotes={enableDownvotes(this.state.siteRes)}
-                enableNsfw={enableNsfw(this.state.siteRes)}
-                allLanguages={this.state.siteRes.all_languages}
-                siteLanguages={this.state.siteRes.discussion_languages}
-                selectedCommunityChoice={selectedCommunityChoice}
-                onSelectCommunity={this.handleSelectedCommunityChange}
-                initialCommunities={
-                  this.state.initialCommunitiesRes.state === "success"
-                    ? this.state.initialCommunitiesRes.data.communities
-                    : []
-                }
-              />
-            </div>
+          <div id="createPostForm" className="col-12 col-lg-6 offset-lg-3 mb-4">
+            <h1 className="h4">{I18NextService.i18n.t("create_post")}</h1>
+            <PostForm
+              onCreate={this.handlePostCreate}
+              params={locationState}
+              enableDownvotes={enableDownvotes(this.state.siteRes)}
+              enableNsfw={enableNsfw(this.state.siteRes)}
+              allLanguages={this.state.siteRes.all_languages}
+              siteLanguages={this.state.siteRes.discussion_languages}
+              selectedCommunityChoice={selectedCommunityChoice}
+              onSelectCommunity={this.handleSelectedCommunityChange}
+              initialCommunities={
+                this.state.initialCommunitiesRes.state === "success"
+                  ? this.state.initialCommunitiesRes.data.communities
+                  : []
+              }
+            />
           </div>
         )}
-      </div>
+      </main>
     );
   }
 
diff --git a/src/shared/components/post/post-form.tsx b/src/shared/components/post/post-form.tsx
index 6e478326..166516ac 100644
--- a/src/shared/components/post/post-form.tsx
+++ b/src/shared/components/post/post-form.tsx
@@ -531,7 +531,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
               checked={this.state.form.nsfw}
               onChange={linkEvent(this, handlePostNsfwChange)}
             />
-            <label className="form-check-label">
+            <label className="form-check-label" htmlFor="post-nsfw">
               {I18NextService.i18n.t("nsfw")}
             </label>
           </div>