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

Improve contact page responsivness

parent 84f4acd0
No related branches found
No related tags found
No related merge requests found
Pipeline #
Hide whitespace changes
Inline Side-by-side
src/app/core/components/contact/contact.component.html
+ 93
− 91
View file @ 0771800f
<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
src/app/core/components/contact/contact.component.scss
+ 16
− 4
View file @ 0771800f
@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 {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment