diff --git a/src/app/core/components/contact/contact.component.html b/src/app/core/components/contact/contact.component.html
index 4aedb376d5d12b24831d6ad1af2e757b125349d6..856cb61706ce6a86cb5b78cb796acffd74cf530c 100644
--- a/src/app/core/components/contact/contact.component.html
+++ b/src/app/core/components/contact/contact.component.html
@@ -1,113 +1,115 @@
<h1 class="has-text-centered" i18n="@@contact.contactUs">Contact us</h1>
-<div class="section">
+<div class="contact-form-container">
<h2 i18n="@@contact.contactForm">Form contact</h2>
- <form [formGroup]="form" class="columns is-multiline" (ngSubmit)="send()">
- <div class="column is-2-touch is-3">
- <h3 i18n="@@contact.identity">Identity</h3>
- </div>
-
- <div class="column is-10-touch is-9">
- <div class="fields-container">
-
- <div class="field">
- <label class="label" for="lastname" i18n="@@contact.lastname">Lastname</label>
- <p class="control has-icons-right">
- <input id="lastname" class="input" type="text" formControlName="lastname" [ngClass]="{'is-danger': fieldIsInvalid('lastname'), 'is-success': fieldIsValid('lastname')}">
- <span class="icon is-small is-right has-text-success" *ngIf="fieldIsValid('lastname')">
- <i class="fas fa-check-circle"></i>
- </span>
- <span class="icon is-small is-right has-text-danger" *ngIf="fieldIsInvalid('lastname')">
- <i class="fas fa-exclamation-circle"></i>
- </span>
- </p>
+ <form [formGroup]="form" (ngSubmit)="send()">
+ <div class="columns is-multiline">
+ <div class="column is-12-mobile is-2-tablet is-3-desktop">
+ <h3 i18n="@@contact.identity">Identity</h3>
+ </div>
- <div class="incorrect-field-message" *ngIf="fieldIsInvalid('lastname')">
- <div *ngIf="form.controls['lastname'].errors.required" i18n="@@contact.errors.missingLastname">
- You must indicate a lastname.
+ <div class="column is-12-mobile is-10-tablet is-9-desktop">
+ <div class="fields-container">
+
+ <div class="field">
+ <label class="label" for="lastname" i18n="@@contact.lastname">Lastname</label>
+ <p class="control has-icons-right">
+ <input id="lastname" class="input" type="text" formControlName="lastname" [ngClass]="{'is-danger': fieldIsInvalid('lastname'), 'is-success': fieldIsValid('lastname')}">
+ <span class="icon is-small is-right has-text-success" *ngIf="fieldIsValid('lastname')">
+ <i class="fas fa-check-circle"></i>
+ </span>
+ <span class="icon is-small is-right has-text-danger" *ngIf="fieldIsInvalid('lastname')">
+ <i class="fas fa-exclamation-circle"></i>
+ </span>
+ </p>
+
+ <div class="incorrect-field-message" *ngIf="fieldIsInvalid('lastname')">
+ <div *ngIf="form.controls['lastname'].errors.required" i18n="@@contact.errors.missingLastname">
+ You must indicate a lastname.
+ </div>
</div>
</div>
- </div>
- <div class="field">
- <label class="label" for="firstname" i18n="@@contact.firstname">Firstname</label>
- <p class="control has-icons-right">
- <input id="firstname" class="input" type="text" formControlName="firstname" [ngClass]="{'is-danger': fieldIsInvalid('firstname'), 'is-success': fieldIsValid('firstname')}">
- <span class="icon is-small is-right has-text-success" *ngIf="fieldIsValid('firstname')">
- <i class="fas fa-check-circle"></i>
- </span>
- <span class="icon is-small is-right has-text-danger" *ngIf="fieldIsInvalid('firstname')">
- <i class="fas fa-exclamation-circle"></i>
- </span>
- </p>
-
- <div class="incorrect-field-message" *ngIf="fieldIsInvalid('firstname')">
- <div *ngIf="form.controls['firstname'].errors.required" i18n="@@contact.errors.missingFirstname">
- You must indicate a firstname.
+ <div class="field">
+ <label class="label" for="firstname" i18n="@@contact.firstname">Firstname</label>
+ <p class="control has-icons-right">
+ <input id="firstname" class="input" type="text" formControlName="firstname" [ngClass]="{'is-danger': fieldIsInvalid('firstname'), 'is-success': fieldIsValid('firstname')}">
+ <span class="icon is-small is-right has-text-success" *ngIf="fieldIsValid('firstname')">
+ <i class="fas fa-check-circle"></i>
+ </span>
+ <span class="icon is-small is-right has-text-danger" *ngIf="fieldIsInvalid('firstname')">
+ <i class="fas fa-exclamation-circle"></i>
+ </span>
+ </p>
+
+ <div class="incorrect-field-message" *ngIf="fieldIsInvalid('firstname')">
+ <div *ngIf="form.controls['firstname'].errors.required" i18n="@@contact.errors.missingFirstname">
+ You must indicate a firstname.
+ </div>
</div>
</div>
- </div>
-
- <div class="field">
- <label class="label" for="email" i18n="@@contact.email">Email</label>
- <p class="control has-icons-right">
- <input id="email" class="input" type="email" formControlName="email" [ngClass]="{'is-danger': fieldIsInvalid('email'), 'is-success': fieldIsValid('email')}">
- <span class="icon is-small is-right has-text-success" *ngIf="fieldIsValid('email')">
- <i class="fas fa-check-circle"></i>
- </span>
- <span class="icon is-small is-right has-text-danger" *ngIf="fieldIsInvalid('email')">
- <i class="fas fa-exclamation-circle"></i>
- </span>
- </p>
- <div class="incorrect-field-message" *ngIf="fieldIsInvalid('email')">
- <div *ngIf="form.controls['email'].errors.required" i18n="@@contact.errors.missingEmail">
- You must enter an email address.
- </div>
-
- <div *ngIf="form.controls['email'].errors.email" i18n="@@contact.errors.invalidEmail">
- You must enter a valid email address.
+ <div class="field">
+ <label class="label" for="email" i18n="@@contact.email">Email</label>
+ <p class="control has-icons-right">
+ <input id="email" class="input" type="email" formControlName="email" [ngClass]="{'is-danger': fieldIsInvalid('email'), 'is-success': fieldIsValid('email')}">
+ <span class="icon is-small is-right has-text-success" *ngIf="fieldIsValid('email')">
+ <i class="fas fa-check-circle"></i>
+ </span>
+ <span class="icon is-small is-right has-text-danger" *ngIf="fieldIsInvalid('email')">
+ <i class="fas fa-exclamation-circle"></i>
+ </span>
+ </p>
+
+ <div class="incorrect-field-message" *ngIf="fieldIsInvalid('email')">
+ <div *ngIf="form.controls['email'].errors.required" i18n="@@contact.errors.missingEmail">
+ You must enter an email address.
+ </div>
+
+ <div *ngIf="form.controls['email'].errors.email" i18n="@@contact.errors.invalidEmail">
+ You must enter a valid email address.
+ </div>
</div>
</div>
- </div>
- <div class="field">
- <label class="label" for="emailConfirmation" i18n="@@contact.emailConfirmation">Confirm your email address</label>
- <p class="control has-icons-right">
- <input id="emailConfirmation" class="input" type="email" formControlName="emailConfirmation" [ngClass]="{'is-danger': emailConfirmationError || fieldIsInvalid('emailConfirmation'), 'is-success': !emailConfirmationError && fieldIsValid('emailConfirmation')}">
- <span class="icon is-small is-right has-text-success" *ngIf="!emailConfirmationError && fieldIsValid('emailConfirmation')">
- <i class="fas fa-check-circle"></i>
- </span>
- <span class="icon is-small is-right has-text-danger" *ngIf="emailConfirmationError || fieldIsInvalid('emailConfirmation')">
- <i class="fas fa-exclamation-circle"></i>
- </span>
- </p>
-
- <div class="incorrect-field-message" *ngIf="fieldIsInvalid('emailConfirmation')">
- <div *ngIf="form.controls['emailConfirmation'].errors.required" i18n="@@contact.errors.missingConfirmationEmail">
- You must confirm your email address.
- </div>
-
- <div *ngIf="form.controls['emailConfirmation'].errors.email" i18n="@@contact.errors.invalidEmail">
- You must enter a valid email address.
+ <div class="field">
+ <label class="label" for="emailConfirmation" i18n="@@contact.emailConfirmation">Confirm your email
+ address</label>
+ <p class="control has-icons-right">
+ <input id="emailConfirmation" class="input" type="email" formControlName="emailConfirmation" [ngClass]="{'is-danger': emailConfirmationError || fieldIsInvalid('emailConfirmation'), 'is-success': !emailConfirmationError && fieldIsValid('emailConfirmation')}">
+ <span class="icon is-small is-right has-text-success" *ngIf="!emailConfirmationError && fieldIsValid('emailConfirmation')">
+ <i class="fas fa-check-circle"></i>
+ </span>
+ <span class="icon is-small is-right has-text-danger" *ngIf="emailConfirmationError || fieldIsInvalid('emailConfirmation')">
+ <i class="fas fa-exclamation-circle"></i>
+ </span>
+ </p>
+
+ <div class="incorrect-field-message" *ngIf="fieldIsInvalid('emailConfirmation')">
+ <div *ngIf="form.controls['emailConfirmation'].errors.required" i18n="@@contact.errors.missingConfirmationEmail">
+ You must confirm your email address.
+ </div>
+
+ <div *ngIf="form.controls['emailConfirmation'].errors.email" i18n="@@contact.errors.invalidEmail">
+ You must enter a valid email address.
+ </div>
</div>
- </div>
- <div class="incorrect-field-message" *ngIf="emailConfirmationError">
- <div *ngIf="emailConfirmationError" i18n="@@contact.errors.confirmationEmailNotCorresponding">
- You must enter the same email address.
+ <div class="incorrect-field-message" *ngIf="emailConfirmationError">
+ <div *ngIf="emailConfirmationError" i18n="@@contact.errors.confirmationEmailNotCorresponding">
+ You must enter the same email address.
+ </div>
</div>
</div>
- </div>
+ </div>
</div>
- </div>
- <div class="column is-2-touch is-3">
- <h3 i18n="@@contact.message">Message</h3>
- </div>
+ <div class="column is-12-mobile is-2-tablet is-3-desktop">
+ <h3 i18n="@@contact.message">Message</h3>
+ </div>
- <div class="column is-10-touch is-9">
+ <div class="column is-12-mobile is-10-tablet is-9-desktop">
<div class="field">
<label class="label" [for]="subjectLabelFor" i18n="@@contact.subject">Sujet</label>
<div class="dropdown" [ngClass]="{'is-active': subjectDropdownState}" (clickOutside)="closeSubjectDropdown()">
@@ -148,7 +150,7 @@
<label class="label" for="text" i18n="@@contact.messageField">Message</label>
<p class="control has-icons-right">
<textarea id="text" class="textarea has-fixed-size" type="textarea" formControlName="text" [ngClass]="{'is-danger': fieldIsInvalid('text'), 'is-success': fieldIsValid('text')}"
- rows=6></textarea>
+ rows=6></textarea>
<span class="icon is-small is-right has-text-success" *ngIf="fieldIsValid('text')">
<i class="fas fa-check-circle"></i>
</span>
@@ -168,6 +170,6 @@
<button type="submit" class="button is-primary" [disabled]="formIsInvalid()" i18n="@@contact.send">Envoyer</button>
</div>
</div>
+ </div>
</form>
-
</div>
\ No newline at end of file
diff --git a/src/app/core/components/contact/contact.component.scss b/src/app/core/components/contact/contact.component.scss
index 4530458c07aac02751e04f274e5c8cf9c49ec468..1ec31ed3bb350b5002212057084441d5dde7d6e2 100644
--- a/src/app/core/components/contact/contact.component.scss
+++ b/src/app/core/components/contact/contact.component.scss
@@ -1,8 +1,11 @@
@import '../../../../scss/variables.scss';
+@import "../../../../../node_modules/bulma/sass/utilities/_all";
h1 {
font-size: 2rem;
- margin-bottom: 0;
+ margin: 0;
+ padding: 1.25rem;
+ background-color: white;
}
h2 {
@@ -16,9 +19,18 @@ h3 {
margin-right: 0;
}
-.section {
- .fields-container {
- width: 66%;
+.contact-form-container {
+ background-color: white;
+ padding: 0 1rem 0 1rem;
+ margin-left: 1.5rem;
+ margin-right: 1.5rem;
+ margin-bottom: 1.25rem;
+
+
+ @media(min-width: $tablet) {
+ .fields-container {
+ width: 66%;
+ }
}
label {