diff --git a/src/frontend/app/header/header-right.component.html b/src/frontend/app/header/header-right.component.html
index fbfb3e730b8cae543e55cacba8a6b9d08a2a3418..b7fcb14b4992b3fda10480d0ba93d41af2297d0b 100644
--- a/src/frontend/app/header/header-right.component.html
+++ b/src/frontend/app/header/header-right.component.html
@@ -1,5 +1,5 @@
<div class="bg-head-title-tool">
- <button mat-icon-button>
+ <button mat-icon-button *ngIf="!mobileMode">
<mat-icon class="fa fa-search"></mat-icon>
</button>
<button mat-icon-button [matMenuTriggerFor]="applications" *ngIf="!mobileMode" matTooltip="{{lang.menu}}">
@@ -14,9 +14,12 @@
</button>
</ng-container>
</mat-menu>
- <button mat-button [matMenuTriggerFor]="menu" *ngIf="!mobileMode">
+ <button *ngIf="!mobileMode" mat-button [matMenuTriggerFor]="menu">
<mat-icon mat-list-icon class="fa fa-user fa-2x" style="color:white; margin:0px 12px 8px 0px;"></mat-icon>
- {{headerService.user.firstname | titlecase }} <b>{{headerService.user.lastname | uppercase}}</b>
+ {{headerService.user.firstname | titlecase }} <b>{{headerService.user.lastname | uppercase}}</b>
+ </button>
+ <button *ngIf="mobileMode" mat-icon-button [matMenuTriggerFor]="menu">
+ <mat-icon mat-list-icon class="fa fa-user fa-2x" style="color:white;height: auto;"></mat-icon>
</button>
<mat-menu #menu="matMenu" class="headerMaarch">
<canvas class="header-bg" width="250" height="70"
diff --git a/src/frontend/app/header/header-right.component.ts b/src/frontend/app/header/header-right.component.ts
index 69bb16d4565a39d8503ca0a2f652781a39b4f664..a574bd93704a44926053f94a24f6e97bd4381025 100644
--- a/src/frontend/app/header/header-right.component.ts
+++ b/src/frontend/app/header/header-right.component.ts
@@ -6,6 +6,8 @@ import { MatDialog, MatDialogRef } from '@angular/material';
import { IndexingGroupModalComponent } from '../menu/menu-shortcut.component';
import { Router } from '@angular/router';
+declare var angularGlobals: any;
+
@Component({
selector: 'header-right',
styleUrls: ['header-right.component.scss'],
@@ -19,9 +21,11 @@ export class HeaderRightComponent implements OnInit {
dialogRef : MatDialogRef<any>;
config : any = {};
- constructor(public http: HttpClient, private router: Router, public headerService: HeaderService, public dialog: MatDialog) { }
+ constructor(public http: HttpClient, private router: Router, public headerService: HeaderService, public dialog: MatDialog) {
+ this.mobileMode = angularGlobals.mobileMode;
+ }
- ngOnInit(): void { }
+ ngOnInit(): void {}
gotToMenu(shortcut:any) {
if (shortcut.id == 'index_mlb' && this.headerService.user.indexingGroups.length > 1) {
diff --git a/src/frontend/app/list/basket-list.component.html b/src/frontend/app/list/basket-list.component.html
index 245f336441c4f45f61abe90ae8770455aaebb1ae..cb24c5c63cea60e3735d36e5c2fe2ee77c532027 100644
--- a/src/frontend/app/list/basket-list.component.html
+++ b/src/frontend/app/list/basket-list.component.html
@@ -1,6 +1,6 @@
<mat-sidenav-container class="example-container">
<mat-sidenav #snavLeft mode="side" opened class="panel-left" #snav [mode]="mobileMode ? 'over' : 'side'"
- [fixedInViewport]="mobileMode" fixedTopGap="56" [opened]="mobileMode ? false : true" autoFocus="false"
+ [fixedInViewport]="mobileMode" [opened]="mobileMode ? false : true" autoFocus="false"
style="overflow-x:hidden;" [ngStyle]="{'width': mobileMode ? '80%' : '350px'}">
<header-panel [snavLeft]="snav"></header-panel>
<menu-shortcut></menu-shortcut>
@@ -11,7 +11,7 @@
</mat-sidenav>
<mat-sidenav-content>
<div class="bg-head">
- <div class="bg-head-title">
+ <div class="bg-head-title" [class.customContainerRight]="mobileMode">
<div class="bg-head-title-label">
<header-left [snavLeft]="snav"></header-left>
</div>
@@ -19,15 +19,15 @@
<header-right></header-right>
</div>
</div>
- <div class="bg-head-content">
- <app-filters-tool style="flex:1;" #filtersTool [currentBasketInfo]="currentBasketInfo"
+ <div class="bg-head-content" [class.fullContainer]="mobileMode">
+ <app-filters-tool style="flex:1;overflow-x: auto;overflow-y: hidden;" #filtersTool [currentBasketInfo]="currentBasketInfo"
[listProperties]="this.listProperties" [snavR]="snav2" [totalRes]="allResInBasket.length"
[selectedRes]="selectedRes" (toggleAllRes)="toggleAllRes($event)"
(refreshEventAfterAction)="refreshDaoAfterAction()" (refreshEvent)="refreshDao()">
</app-filters-tool>
</div>
</div>
- <div class="container">
+ <div class="container" [class.fullContainer]="mobileMode">
<div class="container-content">
<div class="example-loading-shade" *ngIf="isLoadingResults">
<mat-spinner *ngIf="isLoadingResults"></mat-spinner>
@@ -67,7 +67,7 @@
<td mat-cell *matCellDef="let row"
style="padding:0;border-top: solid 1px rgba(0, 0, 0, 0.12);"
[class.selected-data]="row.checked">
- <div *ngIf="!snav2.opened" class="sub-info">
+ <div *ngIf="!snav2.opened && !mobileMode && row.display.length > 0" class="sub-info">
<span class="sub-info-data" [class]="data.cssClasses.join(' ')"
*ngFor="let data of row.display" style="flex:1;white-space: pre;
overflow: hidden;
@@ -116,12 +116,12 @@
(change)="toggleRes($event,row)" (click)="$event.stopPropagation();">
</mat-checkbox>
</span>
- <span class="main-info-status">
+ <span *ngIf="!mobileMode" class="main-info-status">
<mat-icon [ngStyle]="{'color': row.priorityColor}" color="primary"
class="{{row.statusImage.charAt(0)}}{{row.statusImage.charAt(1)}} {{row.statusImage}} {{row.statusImage.charAt(0)}}{{row.statusImage.charAt(1)}}-2x">
</mat-icon>
</span>
- <span class="main-info-data" style="width:200px;text-align:center;">
+ <span *ngIf="!mobileMode" class="main-info-data" style="width:200px;text-align:center;">
<ng-container
*ngIf="row.alt_identifier == lang.undefined && row.barcode != lang.undefined">
<span style="color: rgba(0,0,0,0.4);font-size: 90%;"><i
@@ -172,8 +172,8 @@
</div>
</div>
</mat-sidenav-content>
- <mat-sidenav #snav2 mode="side" [fixedInViewport]="mobileQuery.matches" fixedTopGap="56" position='end'
- [opened]="mobileQuery.matches ? false : false" class="panel-right" style="overflow-x:hidden;"
+ <mat-sidenav #snav2 [fixedInViewport]="mobileQuery.matches" position='end'
+ [opened]="mobileQuery.matches ? false : false" [mode]="mobileMode ? 'over' : 'side'" class="panel-right" style="overflow-x:hidden;"
[class.docView]="!filtersListService.filterMode" [ngStyle]="{'width': mobileMode ? '80%' : '30%'}"
autoFocus="false">
<div *ngIf="innerHtml && !filtersListService.filterMode" [matTooltip]="currentChrono"
diff --git a/src/frontend/app/list/basket-list.component.scss b/src/frontend/app/list/basket-list.component.scss
index e28e279e74688171d55e5dc08857d75fefdee83f..b61570a1068fbba51003b902b730f134ba8fc5b7 100644
--- a/src/frontend/app/list/basket-list.component.scss
+++ b/src/frontend/app/list/basket-list.component.scss
@@ -28,13 +28,13 @@
&-label,
&-tool {
flex: 1;
- display: flex;
align-items: center;
}
&-tool {
- justify-content: end;
+ flex: none;
+ justify-content: flex-end;
}
}
@@ -73,6 +73,15 @@
}
}
+.fullContainer {
+ padding-left: 0;
+ padding-right: 0;
+}
+
+.customContainerRight {
+ padding-right: 10px;
+}
+
.mat-paginator {
background: none;
}