Feliday/Feliday-UI
5
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Make create post and community pages look better on large screens

Browse source
This commit is contained in:
SleeplessOne1917 2023-06-25 04:23:29 -04:00
parent b5d0159e89
commit fe1b9239d2
5 changed files with 63 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/assets/css/main.css
View file

@ -437,3 +437,8 @@ br.big {
.markdown-textarea {
max-width: 50rem;
}
input[type="checkbox"],
.form-check label {
cursor: pointer;
}

57
src/shared/components/community/community-form.tsx
View file

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

26
src/shared/components/community/create-community.tsx
View file

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

43
src/shared/components/post/create-post.tsx
View file

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

2
src/shared/components/post/post-form.tsx
View file

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