From fc8ddb8e4e0eee3943b3742cea7e493695290c73 Mon Sep 17 00:00:00 2001
From: Alex ORLUC <alex.orluc@maarch.org>
Date: Fri, 27 Sep 2019 15:50:17 +0200
Subject: [PATCH] FIX #11271 TIME 1:20 add fix css mobile mode
---
.../app/indexation/indexation.component.html | 16 ++++--
.../app/indexation/indexation.component.scss | 26 +++++++++
.../app/indexation/indexation.component.ts | 6 ++
.../indexing-form.component.html | 14 +++--
.../indexing-form.component.scss | 55 +++++++++++++++----
.../select-search.component.html | 3 +-
.../select-search/select-search.component.ts | 9 ++-
7 files changed, 107 insertions(+), 22 deletions(-)
diff --git a/src/frontend/app/indexation/indexation.component.html b/src/frontend/app/indexation/indexation.component.html
index 170f7aecd58..5fb49b0b299 100644
--- a/src/frontend/app/indexation/indexation.component.html
+++ b/src/frontend/app/indexation/indexation.component.html
@@ -4,7 +4,7 @@
autoFocus="false" style="overflow-x:hidden;" [ngStyle]="{'width': appService.getViewMode() ? '95%' : '600px'}">
<header-panel [snavLeft]="snav"></header-panel>
<ng-container *ngIf="indexingModels.length > 0">
- <div style="background: #F9F9F9;display: flex;padding: 10px;padding-left: 40px;padding-right: 40px;">
+ <div class="listModels">
<button mat-button class="button-form-primary" [matMenuTriggerFor]="IndexingModelsMenu"
style="flex:1;margin-right:20px;">
<span class="menu-label">
@@ -18,9 +18,13 @@
{{indexingModel.default ? '(par défaut)': ''}}</button>
</ng-container>
</mat-menu>
- <button mat-button class="button-form-primary"
+ <button mat-button *ngIf="!appService.getViewMode()" class="button-form-primary"
style="flex:1;align-items: center;justify-content: center;text-align: center;display: flex;">Enregistrer
comme modèle</button>
+ <button mat-icon-button *ngIf="appService.getViewMode()" class="button-form-primary"
+ (click)="onSubmit()">
+ <mat-icon class="far fa-edit"></mat-icon>
+ </button>
</div>
<div class="indexing-form-container">
<app-indexing-form *ngIf="currentIndexingModel.id !== undefined" #indexingForm
@@ -37,13 +41,17 @@
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
- <button mat-button class="button-form-primary"
+ <button mat-button *ngIf="!appService.getViewMode()" class="button-form-primary"
style="width: 150px;align-items: center;justify-content: center;text-align: center;display: flex;"
(click)="onSubmit()">Valider</button>
+ <button mat-icon-button *ngIf="appService.getViewMode()" class="button-form-primary"
+ (click)="onSubmit()">
+ <mat-icon class="fa fa-check"></mat-icon>
+ </button>
</div>
</ng-container>
<div *ngIf="indexingModels.length === 0" class="emptyModel">
- Aucun modèle d'enregistrement disponible<br/><br/>
+ Aucun modèle d'enregistrement disponible<br /><br />
<small>Veuillez créer un modèle depuis Administation > Modèle d'enregistrement</small>
</div>
</mat-sidenav>
diff --git a/src/frontend/app/indexation/indexation.component.scss b/src/frontend/app/indexation/indexation.component.scss
index cef66867725..7f4408053bb 100644
--- a/src/frontend/app/indexation/indexation.component.scss
+++ b/src/frontend/app/indexation/indexation.component.scss
@@ -9,8 +9,13 @@
.document-container {
flex: 1;
+
padding-left: 50px;
padding-right: 50px;
+ @media (max-width: 768px) {
+ padding-left: 0px;
+ padding-right: 0px;
+ }
color: white;
margin-top: 0px;
width: 100%;
@@ -48,6 +53,10 @@
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
+ @media (max-width: 768px) {
+ padding-right: 0px;
+ padding-left: 0px;
+ }
}
.actions-indexing-form {
@@ -58,6 +67,10 @@
box-shadow: 0 -5px 10px 0 rgba(0, 0, 0, 0.07);
padding-left: 40px;
padding-right: 40px;
+ @media (max-width: 768px) {
+ padding-left: 0px;
+ padding-right: 0px;
+ }
}
.emptyModel {
@@ -72,4 +85,17 @@
font-size: 25px;
opacity: 0.3;
font-weight: bold;
+}
+
+.listModels {
+ background: #F9F9F9;
+ display: flex;
+ padding: 10px;
+ padding-left: 40px;
+ padding-right: 40px;
+ @media (max-width: 768px) {
+ padding-bottom: 20px;
+ padding-left: 0px;
+ padding-right: 0px;
+ }
}
\ No newline at end of file
diff --git a/src/frontend/app/indexation/indexation.component.ts b/src/frontend/app/indexation/indexation.component.ts
index 9e8af05ff17..935040f547c 100644
--- a/src/frontend/app/indexation/indexation.component.ts
+++ b/src/frontend/app/indexation/indexation.component.ts
@@ -62,6 +62,12 @@ export class IndexationComponent implements OnInit {
tap((data: any) => {
this.indexingModels = data.indexingModels;
this.currentIndexingModel = this.indexingModels.filter(model => model.default === true)[0];
+
+ if (this.appService.getViewMode()) {
+ setTimeout(() => {
+ this.sidenavLeft.open();
+ }, 400);
+ }
}),
finalize(() => this.loading = false),
catchError((err: any) => {
diff --git a/src/frontend/app/indexation/indexing-form/indexing-form.component.html b/src/frontend/app/indexation/indexing-form/indexing-form.component.html
index d341358cfc4..bcf761a78f4 100644
--- a/src/frontend/app/indexation/indexing-form/indexing-form.component.html
+++ b/src/frontend/app/indexation/indexing-form/indexing-form.component.html
@@ -23,7 +23,7 @@
<ng-container *ngFor="let field of this['indexingModels_'+category];let i=index">
<div class="fieldRow" *ngIf="field.unit === category" cdkDrag cdkDragLockAxis="y"
[cdkDragData]="field">
- <div class="fieldLabel">
+ <div class="fieldLabel" *ngIf="!adminMode && !appService.getViewMode()">
<i *ngIf="adminMode" class="fas fa-bars fa-2x" color="primary" style="cursor: move"
cdkDragHandle></i>
{{field.label}}
@@ -45,7 +45,8 @@
</div>
<div class="fieldInput" [class.checkboxInput]="field.type === 'checkbox'">
<ng-container *ngIf="field.type === 'string'">
- <mat-form-field class="input-form" floatLabel="never">
+ <mat-form-field class="input-form" [floatLabel]="appService.getViewMode() ? '' : 'never'">
+ <mat-label *ngIf="appService.getViewMode()">{{field.label}}</mat-label>
<textarea matInput [formControl]="arrFormControl[field.identifier]"
[placeholder]="!adminMode ? lang.typeValue : lang.defaultValue"
matTextareaAutosize matAutosizeMinRows="1"
@@ -53,13 +54,15 @@
</mat-form-field>
</ng-container>
<ng-container *ngIf="field.type === 'integer'">
- <mat-form-field class="input-form" floatLabel="never">
+ <mat-form-field class="input-form" [floatLabel]="appService.getViewMode() ? '' : 'never'">
+ <mat-label *ngIf="appService.getViewMode()">{{field.label}}</mat-label>
<input type="number" matInput [formControl]="arrFormControl[field.identifier]"
[placeholder]="!adminMode ? lang.typeValue : lang.defaultValue" min="0" step="0.1">
</mat-form-field>
</ng-container>
<ng-container *ngIf="field.type === 'select'">
<plugin-select-search [showResetOption]="adminMode"
+ [label]="field.label"
[placeholderLabel]="!adminMode ? lang.chooseValue : lang.defaultValue"
[formControlSelect]="arrFormControl[field.identifier]" [datas]="field.values"
(afterSelected)="launchEvent($event, field)" style="width:100%;">
@@ -73,14 +76,15 @@
class="{{field.today ? 'far fa-bell-slash' : 'far fa-bell'}}">
</mat-icon>
</button>
- <mat-form-field class="input-form" floatLabel="never" (click)="picker.open()" style="cursor:pointer;">
+ <mat-form-field class="input-form" [floatLabel]="appService.getViewMode() ? '' : 'never'" (click)="picker.open()" style="cursor:pointer;">
+ <mat-label *ngIf="appService.getViewMode()">{{field.label}}</mat-label>
<input [formControl]="arrFormControl[field.identifier]" matInput
[matDatepicker]="picker"
[placeholder]="!adminMode ? lang.chooseDate : lang.defaultValue"
[min]="getMinDate(field.startDate)" [max]="getMaxDate(field.endDate)" readonly style="cursor:pointer;">
<mat-datepicker-toggle matSuffix [for]="picker" *ngIf="!arrFormControl[field.identifier].value">
</mat-datepicker-toggle>
- <mat-datepicker #picker></mat-datepicker>
+ <mat-datepicker [touchUi]="appService.getViewMode()" #picker></mat-datepicker>
<button mat-button color="warn" matSuffix mat-icon-button *ngIf="arrFormControl[field.identifier].value && !arrFormControl[field.identifier].disabled"
(click)="$event.stopPropagation();arrFormControl[field.identifier].reset();" title="Effacer la valeur">
<mat-icon color="warn"
diff --git a/src/frontend/app/indexation/indexing-form/indexing-form.component.scss b/src/frontend/app/indexation/indexing-form/indexing-form.component.scss
index da20a9b86a6..071ff95e4bb 100644
--- a/src/frontend/app/indexation/indexing-form/indexing-form.component.scss
+++ b/src/frontend/app/indexation/indexing-form/indexing-form.component.scss
@@ -74,6 +74,11 @@
.fieldLabel,
.fieldInput {
font-size: 13px;
+
+ @media (max-width: 768px) {
+ font-size: 1em;
+ }
+
flex: 1;
}
@@ -146,16 +151,18 @@
height: auto;
}
}
+
.opt-group {
- font-weight: bold;
+ font-weight: bold;
}
.smallInput {
font-size: 11px;
padding-left: 20px;
padding-right: 20px;
+
::ng-deep.mat-form-field-infix {
- padding : 0px;
+ padding: 0px;
padding-bottom: 5px;
}
}
@@ -165,17 +172,23 @@
border: solid 1px white;
color: white;
border-radius: 30px;
- padding: 5px;
padding-left: 20px;
padding-right: 20px;
width: 240px;
+ height: 45px;
+
+ @media (max-width: 768px) {
+ width: auto;
+ }
+
transition: all 0.1s;
+
::ng-deep.mat-button-wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
-
+
.menu-label {
display: flex;
flex: 1;
@@ -183,7 +196,7 @@
text-overflow: ellipsis;
margin-right: 10px;
}
-
+
.menu-icon {
display: flex;
}
@@ -192,6 +205,11 @@
.button-form-primary-alt {
font-size: 13px;
+
+ @media (max-width: 768px) {
+ font-size: 1em;
+ }
+
background: white;
border: solid 1px $primary;
color: $primary;
@@ -212,12 +230,12 @@
display: flex;
flex: 1;
}
-
+
.menu-icon {
display: flex;
}
}
-
+
}
@@ -249,11 +267,11 @@
padding-left: 20px;
padding-right: 20px;
width: 240px;
- transition: all 0.1s;
+ transition: all 0.1s;
}
.button-form[aria-expanded=true] {
- transition: all 0.1s;
+ transition: all 0.1s;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 30px;
@@ -273,7 +291,12 @@
.mat-menu-item {
transition: all 0.1s;
- font-size: 12px;
+ font-size: 13px;
+
+ @media (max-width: 768px) {
+ font-size: 1em;
+ }
+
color: #666;
}
@@ -305,6 +328,10 @@
.mat-list-item {
font-size: 13px;
+
+ @media (max-width: 768px) {
+ font-size: 1em;
+ }
}
}
@@ -327,6 +354,10 @@
.mat-chip {
font-size: 13px;
+
+ @media (max-width: 768px) {
+ font-size: 1em;
+ }
}
}
@@ -393,6 +424,10 @@
}
.categoryLabel {
+ font-size: 13px;
+ @media (max-width: 768px) {
+ font-size: 1em;
+ }
color: $secondary;
font-weight: bold;
}
\ No newline at end of file
diff --git a/src/frontend/plugins/select-search/select-search.component.html b/src/frontend/plugins/select-search/select-search.component.html
index 8b9a728c7c7..3af2398b472 100644
--- a/src/frontend/plugins/select-search/select-search.component.html
+++ b/src/frontend/plugins/select-search/select-search.component.html
@@ -1,4 +1,5 @@
-<mat-form-field class="input-form" floatLabel="never">
+<mat-form-field class="input-form" [floatLabel]="appService.getViewMode() ? '' : 'never'">
+ <mat-label *ngIf="appService.getViewMode()">{{label}}</mat-label>
<mat-select [formControl]="formControlSelect" [placeholder]="placeholderLabel" #test (selectionChange)="launchEvent($event)">
<input *ngIf="datas.length > 5" matInput class="mat-select-search-input mat-select-search-hidden" />
diff --git a/src/frontend/plugins/select-search/select-search.component.ts b/src/frontend/plugins/select-search/select-search.component.ts
index 2fa8e623983..7bc61b90045 100644
--- a/src/frontend/plugins/select-search/select-search.component.ts
+++ b/src/frontend/plugins/select-search/select-search.component.ts
@@ -11,6 +11,7 @@ import { take, takeUntil, startWith, map } from 'rxjs/operators';
import { Subject, ReplaySubject, Observable } from 'rxjs';
import { LatinisePipe } from 'ngx-pipes';
import { LANG } from '../../app/translate.component';
+import { AppService } from '../../service/app.service';
@Component({
selector: 'plugin-select-search',
@@ -26,6 +27,8 @@ export class PluginSelectSearchComponent implements OnInit, OnDestroy, AfterView
@Input('datas') datas: any;
+ @Input('label') label: string;
+
@Input('showResetOption') showResetOption: boolean;
/**
@@ -69,7 +72,7 @@ export class PluginSelectSearchComponent implements OnInit, OnDestroy, AfterView
formControlSearch = new FormControl();
- constructor(private latinisePipe: LatinisePipe, private changeDetectorRef: ChangeDetectorRef, private renderer: Renderer2) {
+ constructor(private latinisePipe: LatinisePipe, private changeDetectorRef: ChangeDetectorRef, private renderer: Renderer2, public appService: AppService) {
}
@@ -95,7 +98,9 @@ export class PluginSelectSearchComponent implements OnInit, OnDestroy, AfterView
.subscribe((opened) => {
if (opened) {
// focus the search field when opening
- this._focus();
+ if(!this.appService.getViewMode()) {
+ this._focus();
+ }
} else {
// clear it when closing
//this._reset();
--
GitLab