Skip to content
Snippets Groups Projects
Commit 0771800f authored by FORESTIER Fabien's avatar FORESTIER Fabien
Browse files

Improve contact page responsivness

parent 84f4acd0
Branches
Tags
No related merge requests found
Pipeline #
<h1 class="has-text-centered" i18n="@@contact.contactUs">Contact us</h1> <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> <h2 i18n="@@contact.contactForm">Form contact</h2>
<form [formGroup]="form" class="columns is-multiline" (ngSubmit)="send()"> <form [formGroup]="form" (ngSubmit)="send()">
<div class="column is-2-touch is-3"> <div class="columns is-multiline">
<h3 i18n="@@contact.identity">Identity</h3> <div class="column is-12-mobile is-2-tablet is-3-desktop">
</div> <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>
<div class="incorrect-field-message" *ngIf="fieldIsInvalid('lastname')"> <div class="column is-12-mobile is-10-tablet is-9-desktop">
<div *ngIf="form.controls['lastname'].errors.required" i18n="@@contact.errors.missingLastname"> <div class="fields-container">
You must indicate a lastname.
<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>
</div>
<div class="field"> <div class="field">
<label class="label" for="firstname" i18n="@@contact.firstname">Firstname</label> <label class="label" for="firstname" i18n="@@contact.firstname">Firstname</label>
<p class="control has-icons-right"> <p class="control has-icons-right">
<input id="firstname" class="input" type="text" formControlName="firstname" [ngClass]="{'is-danger': fieldIsInvalid('firstname'), 'is-success': fieldIsValid('firstname')}"> <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')"> <span class="icon is-small is-right has-text-success" *ngIf="fieldIsValid('firstname')">
<i class="fas fa-check-circle"></i> <i class="fas fa-check-circle"></i>
</span> </span>
<span class="icon is-small is-right has-text-danger" *ngIf="fieldIsInvalid('firstname')"> <span class="icon is-small is-right has-text-danger" *ngIf="fieldIsInvalid('firstname')">
<i class="fas fa-exclamation-circle"></i> <i class="fas fa-exclamation-circle"></i>
</span> </span>
</p> </p>
<div class="incorrect-field-message" *ngIf="fieldIsInvalid('firstname')"> <div class="incorrect-field-message" *ngIf="fieldIsInvalid('firstname')">
<div *ngIf="form.controls['firstname'].errors.required" i18n="@@contact.errors.missingFirstname"> <div *ngIf="form.controls['firstname'].errors.required" i18n="@@contact.errors.missingFirstname">
You must indicate a firstname. You must indicate a firstname.
</div>
</div> </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 class="field">
<div *ngIf="form.controls['email'].errors.required" i18n="@@contact.errors.missingEmail"> <label class="label" for="email" i18n="@@contact.email">Email</label>
You must enter an email address. <p class="control has-icons-right">
</div> <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')">
<div *ngIf="form.controls['email'].errors.email" i18n="@@contact.errors.invalidEmail"> <i class="fas fa-check-circle"></i>
You must enter a valid email address. </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>
</div>
<div class="field"> <div class="field">
<label class="label" for="emailConfirmation" i18n="@@contact.emailConfirmation">Confirm your email address</label> <label class="label" for="emailConfirmation" i18n="@@contact.emailConfirmation">Confirm your email
<p class="control has-icons-right"> address</label>
<input id="emailConfirmation" class="input" type="email" formControlName="emailConfirmation" [ngClass]="{'is-danger': emailConfirmationError || fieldIsInvalid('emailConfirmation'), 'is-success': !emailConfirmationError && fieldIsValid('emailConfirmation')}"> <p class="control has-icons-right">
<span class="icon is-small is-right has-text-success" *ngIf="!emailConfirmationError && fieldIsValid('emailConfirmation')"> <input id="emailConfirmation" class="input" type="email" formControlName="emailConfirmation" [ngClass]="{'is-danger': emailConfirmationError || fieldIsInvalid('emailConfirmation'), 'is-success': !emailConfirmationError && fieldIsValid('emailConfirmation')}">
<i class="fas fa-check-circle"></i> <span class="icon is-small is-right has-text-success" *ngIf="!emailConfirmationError && fieldIsValid('emailConfirmation')">
</span> <i class="fas fa-check-circle"></i>
<span class="icon is-small is-right has-text-danger" *ngIf="emailConfirmationError || fieldIsInvalid('emailConfirmation')"> </span>
<i class="fas fa-exclamation-circle"></i> <span class="icon is-small is-right has-text-danger" *ngIf="emailConfirmationError || fieldIsInvalid('emailConfirmation')">
</span> <i class="fas fa-exclamation-circle"></i>
</p> </span>
</p>
<div class="incorrect-field-message" *ngIf="fieldIsInvalid('emailConfirmation')">
<div *ngIf="form.controls['emailConfirmation'].errors.required" i18n="@@contact.errors.missingConfirmationEmail"> <div class="incorrect-field-message" *ngIf="fieldIsInvalid('emailConfirmation')">
You must confirm your email address. <div *ngIf="form.controls['emailConfirmation'].errors.required" i18n="@@contact.errors.missingConfirmationEmail">
</div> 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 *ngIf="form.controls['emailConfirmation'].errors.email" i18n="@@contact.errors.invalidEmail">
You must enter a valid email address.
</div>
</div> </div>
</div> <div class="incorrect-field-message" *ngIf="emailConfirmationError">
<div class="incorrect-field-message" *ngIf="emailConfirmationError"> <div *ngIf="emailConfirmationError" i18n="@@contact.errors.confirmationEmailNotCorresponding">
<div *ngIf="emailConfirmationError" i18n="@@contact.errors.confirmationEmailNotCorresponding"> You must enter the same email address.
You must enter the same email address. </div>
</div> </div>
</div> </div>
</div>
</div>
</div> </div>
</div>
<div class="column is-2-touch is-3"> <div class="column is-12-mobile is-2-tablet is-3-desktop">
<h3 i18n="@@contact.message">Message</h3> <h3 i18n="@@contact.message">Message</h3>
</div> </div>
<div class="column is-10-touch is-9"> <div class="column is-12-mobile is-10-tablet is-9-desktop">
<div class="field"> <div class="field">
<label class="label" [for]="subjectLabelFor" i18n="@@contact.subject">Sujet</label> <label class="label" [for]="subjectLabelFor" i18n="@@contact.subject">Sujet</label>
<div class="dropdown" [ngClass]="{'is-active': subjectDropdownState}" (clickOutside)="closeSubjectDropdown()"> <div class="dropdown" [ngClass]="{'is-active': subjectDropdownState}" (clickOutside)="closeSubjectDropdown()">
...@@ -148,7 +150,7 @@ ...@@ -148,7 +150,7 @@
<label class="label" for="text" i18n="@@contact.messageField">Message</label> <label class="label" for="text" i18n="@@contact.messageField">Message</label>
<p class="control has-icons-right"> <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')}" <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')"> <span class="icon is-small is-right has-text-success" *ngIf="fieldIsValid('text')">
<i class="fas fa-check-circle"></i> <i class="fas fa-check-circle"></i>
</span> </span>
...@@ -168,6 +170,6 @@ ...@@ -168,6 +170,6 @@
<button type="submit" class="button is-primary" [disabled]="formIsInvalid()" i18n="@@contact.send">Envoyer</button> <button type="submit" class="button is-primary" [disabled]="formIsInvalid()" i18n="@@contact.send">Envoyer</button>
</div> </div>
</div> </div>
</div>
</form> </form>
</div> </div>
\ No newline at end of file
@import '../../../../scss/variables.scss'; @import '../../../../scss/variables.scss';
@import "../../../../../node_modules/bulma/sass/utilities/_all";
h1 { h1 {
font-size: 2rem; font-size: 2rem;
margin-bottom: 0; margin: 0;
padding: 1.25rem;
background-color: white;
} }
h2 { h2 {
...@@ -16,9 +19,18 @@ h3 { ...@@ -16,9 +19,18 @@ h3 {
margin-right: 0; margin-right: 0;
} }
.section { .contact-form-container {
.fields-container { background-color: white;
width: 66%; 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 { label {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment