updated community form with transpolation translation and label attributes

This commit is contained in:
Richard 2020-01-18 13:24:28 +01:00
parent c317934a43
commit d4e0ab43b4
2 changed files with 19 additions and 13 deletions

View file

@ -97,12 +97,13 @@ export class CommunityForm extends Component<
return ( return (
<form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}> <form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}>
<div class="form-group row"> <div class="form-group row">
<label class="col-12 col-form-label"> <label class="col-12 col-form-label" for="community-name">
<T i18nKey="name">#</T> { i18n.t('name') }
</label> </label>
<div class="col-12"> <div class="col-12">
<input <input
type="text" type="text"
id="community-name"
class="form-control" class="form-control"
value={this.state.communityForm.name} value={this.state.communityForm.name}
onInput={linkEvent(this, this.handleCommunityNameChange)} onInput={linkEvent(this, this.handleCommunityNameChange)}
@ -114,13 +115,15 @@ export class CommunityForm extends Component<
/> />
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-12 col-form-label"> <label class="col-12 col-form-label" for="community-title">
<T i18nKey="title">#</T> { i18n.t('title') }
</label> </label>
<div class="col-12"> <div class="col-12">
<input <input
type="text" type="text"
id="community-title"
value={this.state.communityForm.title} value={this.state.communityForm.title}
onInput={linkEvent(this, this.handleCommunityTitleChange)} onInput={linkEvent(this, this.handleCommunityTitleChange)}
class="form-control" class="form-control"
@ -131,12 +134,13 @@ export class CommunityForm extends Component<
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-12 col-form-label"> <label class="col-12 col-form-label" for="community-sidebar">
<T i18nKey="sidebar">#</T> { i18n.t('sidebar') }
</label> </label>
<div class="col-12"> <div class="col-12">
<textarea <textarea
value={this.state.communityForm.description} value={this.state.communityForm.description}
id="community-sidebar"
onInput={linkEvent(this, this.handleCommunityDescriptionChange)} onInput={linkEvent(this, this.handleCommunityDescriptionChange)}
class="form-control" class="form-control"
rows={3} rows={3}
@ -145,12 +149,13 @@ export class CommunityForm extends Component<
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-12 col-form-label"> <label class="col-12 col-form-label" for="community-category">
<T i18nKey="category">#</T> { i18n.t('category') }
</label> </label>
<div class="col-12"> <div class="col-12">
<select <select
class="form-control" class="form-control"
id="community-category"
value={this.state.communityForm.category_id} value={this.state.communityForm.category_id}
onInput={linkEvent(this, this.handleCommunityCategoryChange)} onInput={linkEvent(this, this.handleCommunityCategoryChange)}
> >
@ -167,12 +172,13 @@ export class CommunityForm extends Component<
<div class="form-check"> <div class="form-check">
<input <input
class="form-check-input" class="form-check-input"
id="community-nsfw"
type="checkbox" type="checkbox"
checked={this.state.communityForm.nsfw} checked={this.state.communityForm.nsfw}
onChange={linkEvent(this, this.handleCommunityNsfwChange)} onChange={linkEvent(this, this.handleCommunityNsfwChange)}
/> />
<label class="form-check-label"> <label class="form-check-label" for="community-nsfw">
<T i18nKey="nsfw">#</T> { i18n.t('nsfw') }
</label> </label>
</div> </div>
</div> </div>
@ -197,7 +203,7 @@ export class CommunityForm extends Component<
class="btn btn-secondary" class="btn btn-secondary"
onClick={linkEvent(this, this.handleCancel)} onClick={linkEvent(this, this.handleCancel)}
> >
<T i18nKey="cancel">#</T> { i18n.t('cancel') }
</button> </button>
)} )}
</div> </div>

View file

@ -22,9 +22,9 @@ export class CreateCommunity extends Component<any, any> {
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-12 col-lg-6 offset-lg-3 mb-4"> <div class="col-12 col-lg-6 offset-lg-3 mb-4">
<h5> <h2>
<T i18nKey="create_community">#</T> <T i18nKey="create_community">#</T>
</h5> </h2>
<CommunityForm onCreate={this.handleCommunityCreate} /> <CommunityForm onCreate={this.handleCommunityCreate} />
</div> </div>
</div> </div>