Make create post and community pages look better on large screens
This commit is contained in:
parent
b5d0159e89
commit
fe1b9239d2
5 changed files with 63 additions and 70 deletions
|
@ -437,3 +437,8 @@ br.big {
|
|||
.markdown-textarea {
|
||||
max-width: 50rem;
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
.form-check label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue