FIX #11271 TIME 1:20 add fix css mobile mode

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>

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

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) => {

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>&nbsp;
                                 {{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"

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

src/frontend/plugins/select-search/select-search.component.html

-<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" />
 

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();