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 {