From c0ecb105e6520c046e4b913bf14701ac3ea0958a Mon Sep 17 00:00:00 2001
From: Alex ORLUC <alex.orluc@maarch.org>
Date: Thu, 13 Dec 2018 15:05:01 +0100
Subject: [PATCH] fix css with chrome
---
.../app/profile/profile.component.html | 132 ++++++++++--------
.../app/profile/profile.component.scss | 16 +++
2 files changed, 86 insertions(+), 62 deletions(-)
diff --git a/src/frontend/app/profile/profile.component.html b/src/frontend/app/profile/profile.component.html
index 5b2ca9359f..3155808750 100644
--- a/src/frontend/app/profile/profile.component.html
+++ b/src/frontend/app/profile/profile.component.html
@@ -70,58 +70,64 @@
<mat-tab label="Préférences">
<div class="profile-content">
<div class="input-row">
- <fieldset style="display:flex;">
+ <fieldset>
<legend align="left">Mode de l'annotation</legend>
- <div style="flex:1;">
- <mat-form-field>
- <mat-select name="writingMode" [(ngModel)]="this.profileInfo.preferences.writingMode">
- <mat-option value="direct">Libre</mat-option>
- <mat-option value="stylus">Stylet Apple <i class="fab fa-apple"></i></mat-option>
- </mat-select>
- </mat-form-field>
- </div>
- <div *ngIf="this.profileInfo.preferences.writingMode == 'stylus'" style="flex:1;text-align: justify;font-size: 12px;">
- Vous ne pourrez annoter les documents qu'avec le <b>stylet Apple</b>.<br />
- Cela a pour avantage de pouvoir poser la main sur la tablette sans perturber
- l'écriture.
- </div>
- <div *ngIf="this.profileInfo.preferences.writingMode == 'direct'" style="flex:1;text-align: justify;font-size: 12px;">
- Mode standard, permettant l'annotation avec tout format (souris, main, stylets de
- toutes marques).
+ <div class="form-container">
+ <div class="form-2-col">
+ <mat-form-field>
+ <mat-select name="writingMode" [(ngModel)]="this.profileInfo.preferences.writingMode">
+ <mat-option value="direct">Libre</mat-option>
+ <mat-option value="stylus">Stylet Apple <i class="fab fa-apple"></i></mat-option>
+ </mat-select>
+ </mat-form-field>
+ </div>
+ <div *ngIf="this.profileInfo.preferences.writingMode == 'stylus'" class="form-2-col" style="text-align: justify;font-size: 12px;">
+ Vous ne pourrez annoter les documents qu'avec le <b>stylet Apple</b>.<br />
+ Cela a pour avantage de pouvoir poser la main sur la tablette sans perturber
+ l'écriture.
+ </div>
+ <div *ngIf="this.profileInfo.preferences.writingMode == 'direct'" class="form-2-col" style="text-align: justify;font-size: 12px;">
+ Mode standard, permettant l'annotation avec tout format (souris, main, stylets de
+ toutes marques).
+ </div>
</div>
+
</fieldset>
</div>
<div class="input-row">
- <fieldset style="display:flex;">
+ <fieldset>
<legend align="left">Épaisseur du trait</legend>
- <div style="flex:1">
- <mat-form-field>
- <mat-select name="writingSize" [(ngModel)]="this.profileInfo.preferences.writingSize"
- (selectionChange)="drawSample();">
- <mat-option *ngFor='let in of counter(10) ;let i = index' [value]="i+1">{{i+1}}</mat-option>
- </mat-select>
- </mat-form-field>
- </div>
- <div style="flex:1">
- <canvas id="sampleNote" width="150" height="150"></canvas>
+ <div class="form-container">
+ <div class="form-2-col">
+ <mat-form-field>
+ <mat-select name="writingSize" [(ngModel)]="this.profileInfo.preferences.writingSize"
+ (selectionChange)="drawSample();">
+ <mat-option *ngFor='let in of counter(10) ;let i = index' [value]="i+1">{{i+1}}</mat-option>
+ </mat-select>
+ </mat-form-field>
+ </div>
+ <div class="form-2-col">
+ <canvas id="sampleNote" width="150" height="150"></canvas>
+ </div>
</div>
</fieldset>
</div>
<div class="input-row">
- <fieldset style="display:flex;">
+ <fieldset style="display:table;">
<legend align="left">Couleur par défaut</legend>
- <div style="flex:1">
- <mat-form-field>
- <mat-select name="writingColor" [(ngModel)]="this.profileInfo.preferences.writingColor">
- <mat-option style="color:#000000" value="#000000">Noir</mat-option>
- <mat-option style="color:#1a75ff" value="#1a75ff">Bleu</mat-option>
- <mat-option style="color:#FF0000" value="#FF0000">Rouge</mat-option>
- </mat-select>
- </mat-form-field>
- </div>
- <div style="flex:1">
- <div style="height:50px;width:100px;margin:auto;" [style.backgroundColor]="this.profileInfo.preferences.writingColor">
-
+ <div class="form-container">
+ <div class="form-2-col">
+ <mat-form-field>
+ <mat-select name="writingColor" [(ngModel)]="this.profileInfo.preferences.writingColor">
+ <mat-option style="color:#000000" value="#000000">Noir</mat-option>
+ <mat-option style="color:#1a75ff" value="#1a75ff">Bleu</mat-option>
+ <mat-option style="color:#FF0000" value="#FF0000">Rouge</mat-option>
+ </mat-select>
+ </mat-form-field>
+ </div>
+ <div class="form-2-col">
+ <div style="height:50px;width:100px;margin:auto;" [style.backgroundColor]="this.profileInfo.preferences.writingColor">
+ </div>
</div>
</div>
</fieldset>
@@ -131,28 +137,30 @@
<mat-tab label="Administrations" *ngIf="signaturesService.userLogged.canManageRestUsers">
<div class="profile-content">
<div class="input-row">
- <fieldset style="display:flex;">
+ <fieldset>
<legend align="left">Utilisateurs Webservice</legend>
- <div style="flex:2;">
- <mat-form-field>
- <mat-select name="usersRest" [(ngModel)]="currentUserRest">
- <mat-option *ngFor="let userRest of usersRest" [value]="userRest">{{userRest.firstname}}
- {{userRest.lastname}}</mat-option>
- </mat-select>
- </mat-form-field>
- </div>
- <div style="flex:2;">
- <mat-form-field class="input-row">
- <input name="newPasswordRest" matInput [(ngModel)]="currentUserRestPassword"
- placeholder="Nouveau mot de passe" [type]="hideNewPassword ? 'password' : 'text'"
- (keyup)="checkPasswordValidity(currentUserRestPassword)">
- <mat-icon matSuffix (click)="hideNewPassword = !hideNewPassword" class="fa fa-2x"
- [ngClass]="[hideNewPassword ? 'fa-eye-slash' : 'fa-eye']"></mat-icon>
- <mat-hint style="color:red;">{{handlePassword.errorMsg}}</mat-hint>
- </mat-form-field>
- </div>
- <div style="flex:1;">
- <button mat-raised-button type="button" color="primary" [disabled]="handlePassword.error || currentUserRestPassword.length === 0" (click)="updateRestUser()" >Modifier</button>
+ <div class="form-container">
+ <div class="form-col" style="width:35%;">
+ <mat-form-field>
+ <mat-select name="usersRest" [(ngModel)]="currentUserRest">
+ <mat-option *ngFor="let userRest of usersRest" [value]="userRest">{{userRest.firstname}}
+ {{userRest.lastname}}</mat-option>
+ </mat-select>
+ </mat-form-field>
+ </div>
+ <div class="form-col" style="width:35%;">
+ <mat-form-field class="input-row">
+ <input name="newPasswordRest" matInput [(ngModel)]="currentUserRestPassword"
+ placeholder="Nouveau mot de passe" [type]="hideNewPassword ? 'password' : 'text'"
+ (keyup)="checkPasswordValidity(currentUserRestPassword)">
+ <mat-icon matSuffix (click)="hideNewPassword = !hideNewPassword" class="fa fa-2x"
+ [ngClass]="[hideNewPassword ? 'fa-eye-slash' : 'fa-eye']"></mat-icon>
+ <mat-hint style="color:red;">{{handlePassword.errorMsg}}</mat-hint>
+ </mat-form-field>
+ </div>
+ <div class="form-col" style="width:29%;">
+ <button mat-raised-button type="button" color="primary" [disabled]="handlePassword.error || currentUserRestPassword.length === 0" (click)="updateRestUser()" >Modifier</button>
+ </div>
</div>
</fieldset>
</div>
diff --git a/src/frontend/app/profile/profile.component.scss b/src/frontend/app/profile/profile.component.scss
index 7c3c39f4d4..e36319a3a0 100644
--- a/src/frontend/app/profile/profile.component.scss
+++ b/src/frontend/app/profile/profile.component.scss
@@ -135,4 +135,20 @@ fieldset {
legend {
color: #F99830;
+}
+
+.form-container {
+ display:table;
+ width:100%;
+}
+
+.form-2-col {
+ display:table-cell;
+ width:50%;
+ vertical-align:middle;
+}
+
+.form-col {
+ display:table-cell;
+ vertical-align:middle;
}
\ No newline at end of file
--
GitLab