Skip to content
Snippets Groups Projects
Verified Commit fc8ddb8e authored by Alex ORLUC's avatar Alex ORLUC
Browse files

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

parent b06101fa
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 107 additions and 22 deletions
src/frontend/app/indexation/indexation.component.html
+ 12
− 4
View file @ fc8ddb8e
......@@ -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
+ 26
− 0
View file @ fc8ddb8e
......@@ -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
+ 6
− 0
View file @ fc8ddb8e
......@@ -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
+ 9
− 5
View file @ fc8ddb8e
......@@ -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
+ 45
− 10
View file @ fc8ddb8e
......@@ -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
+ 2
− 1
View file @ fc8ddb8e
<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
+ 7
− 2
View file @ fc8ddb8e
......@@ -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();
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment