erasable button on first field

src/app/features/administration/form/base-config/base-config.component.html

@@ -1,17 +1,9 @@
 <form [formGroup]="form">
 	<div class="columns">
 		<div class="column">
-			<p>
+			<label for="title">
 				{{ 'creation.choose_title' | translate }}
-			</p>
+			</label>
-			<br />
-			<label class="hidden" for="title">Titre</label>
-			<!--			errors:-->
-			<!--			<pre class="debug padded warning">-->
-			<!--			form.errors :-->
-			<!--				{{ form.controls.title.errors | json }}-->
-			<!--			</pre-->
-			<!--			>-->
 
 			<input
 				class="input"
@@ -23,9 +15,6 @@
 				required="required"
 				#title
 			/>
-			<div class="hint" *ngIf="form.controls.title.errors">
-				Ce champ est requis
-			</div>
 			<button
 				mat-button
 				*ngIf="form.value.title"
@@ -36,23 +25,37 @@
 			>
 				<i class="fa fa-close"></i>
 			</button>
+			<div class="hint" *ngIf="form.controls.title.errors">
+				Ce champ est requis
+			</div>
 
-			<p>
+			<label for="creatorPseudo">
-				<label for="creatorPseudo">
+				<span>
-					<span>
+					{{ 'creation.email' | translate }}
-						{{ 'creation.email' | translate }}
+				</span>
-					</span>
+			</label>
-				</label>
 
-				<input
+			<input
-					#creatorEmail
+				#creatorEmail
-					matInput
+				matInput
-					placeholder="{{ 'creation.email_placeholder' | translate }}"
+				placeholder="{{ 'creation.email_placeholder' | translate }}"
-					formControlName="creatorEmail"
+				formControlName="creatorEmail"
-					id="creatorEmail"
+				id="creatorEmail"
-					required
+				required
-				/>
+			/>
-			</p>
+			<button
+				mat-button
+				*ngIf="form.value.creatorEmail"
+				matSuffix
+				mat-icon-button
+				aria-label="Clear"
+				(click)="form.patchValue({ creatorEmail: '' })"
+			>
+				<i class="fa fa-close"></i>
+			</button>
+			<div class="hint" *ngIf="form.controls.creatorEmail.errors">
+				Ce champ est requis
+			</div>
 			<br />
 
 			<p>
@@ -69,33 +72,24 @@
 					id="creatorPseudo"
 					required
 				/>
+				<button
+					mat-button
+					*ngIf="form.value.creatorPseudo"
+					matSuffix
+					mat-icon-button
+					aria-label="Clear"
+					(click)="form.patchValue({ creatorPseudo: '' })"
+				>
+					<i class="fa fa-close"></i>
+				</button>
 			</p>
 		</div>
 
 		<hr />
 	</div>
-	custom url:
+	Url personnalisée:
 	{{ form.value.custom_url }}
 	<hr />
-	<div class="columns">
-		<div class="column">
-			<!--			<img src="assets/img/undraw_Moving_twwf.svg" alt="image WIP" />-->
-			<div>
-				<h2>
-					{{ 'choices.title' | translate }}
-				</h2>
-				{{ 'dates.add' | translate }}
-				<p>
-					<i>
-						{{ 'choices.helper' | translate }}
-					</i>
-				</p>
-				{{ 'choices.answer_preset_1' | translate }}
-				{{ 'choices.add' | translate }}
-				{{ 'choices.continue' | translate }}
-			</div>
-		</div>
-	</div>
 	<div class="column">
 		<button class="btn btn--warning" (click)="askInitFormDefault()">
 			<i class="fa fa-refresh"></i>

src/app/features/administration/form/date-select/date-select.component.html

@@ -1,5 +1,18 @@
 <div class="date-selection">
 	<form [formGroup]="form">
+		<h2>
+			{{ 'choices.title' | translate }}
+		</h2>
+		{{ 'dates.add' | translate }}
+		<p>
+			<i>
+				{{ 'choices.helper' | translate }}
+			</i>
+		</p>
+		{{ 'choices.answer_preset_1' | translate }}
+		{{ 'choices.add' | translate }}
+		{{ 'choices.continue' | translate }}
+
 		<!--	interval-->
 		<button
 			(click)="showDateInterval = !showDateInterval"

src/app/features/administration/form/date-select/date-select.component.ts

@@ -26,8 +26,8 @@ export class DateSelectComponent implements OnInit {
 	@Input()
 	public form: FormGroup;
 
-	public showDateInterval = true;
+	public showDateInterval = false;
-	public allowSeveralHours = true;
+	public allowSeveralHours = false;
 	today = new Date();
 	startDateInterval: string;
 	endDateInterval: string;

src/styles/partials/_forms.scss

@@ -1,6 +1,7 @@
 @charset "UTF-8";
 
 label {
+	margin-top: 1em;
 	line-height: 2.5em;
 }
 .ui-inputswitch {
@@ -13,14 +14,13 @@ label {
 	width: 100%;
 }
 
-select {
-	margin-right: 1ch;
-}
-
 input {
-	margin-right: 1ch;
 	margin-bottom: 1em;
-	margin-top: 1em;
+
+	+ button,
+	+ .mat-icon-button {
+		margin-bottom: 1em;
+	}
 
 	&[type='date']::after {
 		content: 'au format JJ/MM/AAAA';
@@ -32,25 +32,18 @@ input {
 input,
 select,
 textarea {
+	display: inline-block;
 	padding: 1rem;
 	border: 1px solid $secondary_color;
 	border-bottom: 3px solid $primary_color;
-}
+	width: calc(100% - 45px) !important;
-
+	max-width: 40em !important;
-input,
-select {
-	display: inline-block;
 }
 
 .next {
 	max-width: 200px;
 }
 
-input[type='text'],
-textarea {
-	max-width: 350px;
-}
-
 li {
 	list-style-type: none;
 }