From e0a22380c87da0212088713284d6f726148d646a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lukas=20Mau=C3=9F?= <lukas.mauss@mni.thm.de>
Date: Tue, 9 Jul 2019 14:59:53 +0200
Subject: [PATCH] Fix icons for mobile devices
---
.../shared/header/header.component.html | 32 +++++++++++++++----
1 file changed, 25 insertions(+), 7 deletions(-)
diff --git a/src/app/components/shared/header/header.component.html b/src/app/components/shared/header/header.component.html
index 55eb2d730..62136ca07 100644
--- a/src/app/components/shared/header/header.component.html
+++ b/src/app/components/shared/header/header.component.html
@@ -45,25 +45,33 @@
</mat-grid-list>
</mat-menu>
- <button mat-button [matMenuTriggerFor]="themeMenu">
+ <button mat-button *ngIf="deviceType === 'desktop'" [matMenuTriggerFor]="themeMenu">
<div class="label-icon">
<mat-icon aria-label="Example" class="header-icons">palette</mat-icon>
- <h3 *ngIf="deviceType === 'desktop'">{{'header.style' | translate}}</h3>
+ <h3>{{'header.style' | translate}}</h3>
</div>
</button>
+ <button mat-icon-button *ngIf="deviceType === 'mobile'" [matMenuTriggerFor]="themeMenu">
+ <mat-icon class="header-icons">palette</mat-icon>
+ </button>
+
<mat-menu #langMenu="matMenu" [overlapTrigger]="false">
<button mat-menu-item (click)="useLanguage('de')">{{ 'header.german' | translate }}</button>
<button mat-menu-item (click)="useLanguage('en')">{{ 'header.english' | translate }}</button>
</mat-menu>
- <button mat-button [matMenuTriggerFor]="langMenu">
+ <button mat-button *ngIf="deviceType === 'desktop'" [matMenuTriggerFor]="langMenu">
<div class="label-icon">
<mat-icon class="header-icons" matTooltip="{{'header.change-language' | translate}}">language</mat-icon>
- <h3 *ngIf="deviceType === 'desktop'">{{'header.language' | translate}}</h3>
+ <h3>{{'header.language' | translate}}</h3>
</div>
</button>
+ <button mat-icon-button *ngIf="deviceType === 'mobile'" [matMenuTriggerFor]="langMenu">
+ <mat-icon class="header-icons">language</mat-icon>
+ </button>
+
<mat-menu #userMenu="matMenu" [overlapTrigger]="false">
<button mat-menu-item *ngIf="user && user.role === 1" routerLink="/creator">
<mat-icon class="sessions">style</mat-icon>
@@ -90,17 +98,27 @@
</button>
</mat-menu>
- <button mat-button *ngIf="user" [matMenuTriggerFor]="userMenu">
+ <button mat-button *ngIf="user && deviceType === 'desktop'" [matMenuTriggerFor]="userMenu">
<div class="label-icon">
<mat-icon class="header-icons">account_box</mat-icon>
- <h3 *ngIf="deviceType === 'desktop'">{{'header.my-account' | translate}}</h3>
+ <h3>{{'header.my-account' | translate}}</h3>
</div>
</button>
- <button mat-button *ngIf="!user" [matMenuTriggerFor]="loginMenu">
+
+ <button mat-icon-button *ngIf="user && deviceType === 'mobile'" [matMenuTriggerFor]="userMenu">
+ <mat-icon class="header-icons">account_box</mat-icon>
+ </button>
+
+ <button mat-button *ngIf="!user && deviceType === 'desktop'" [matMenuTriggerFor]="loginMenu">
<div class="label-icon">
<mat-icon class="header-icons">account_box</mat-icon>
<h3 *ngIf="deviceType === 'desktop'">{{'header.login' | translate}}</h3>
</div>
</button>
+
+ <button mat-icon-button *ngIf="!user && deviceType === 'mobile'" [matMenuTriggerFor]="loginMenu">
+ <mat-icon class="header-icons">account_box</mat-icon>
+ </button>
+
</mat-toolbar-row>
</mat-toolbar>
--
GitLab