Show HDR label on status details page

VernissageApp · Nov 2, 2024 · 48c3483 · 48c3483
1 parent 34dfca8
commit 48c3483
Show file tree

Hide file tree

Showing 6 changed files with 261 additions and 173 deletions.
diff --git a/src/app/components/core/header/header.component.html b/src/app/components/core/header/header.component.html
@@ -1,5 +1,48 @@
 <nav>
     <mat-toolbar color="primary">
+        @if (deviceResolution === resolution.handsetPortrait) {
+            @if (showTrending || showEditorsChoice || showCategories) {
+                <button mat-icon-button [matMenuTriggerFor]="discover" color="primary" class="hamburger-menu" aria-label="More options">
+                    <mat-icon>menu</mat-icon>
+                </button>
+                <mat-menu #discover="matMenu">
+                    @if (showTrending) {
+                        <button mat-menu-item [routerLink]="['/trending']" (click)="clearReuseRoute()" aria-label="Trending">
+                            <mat-icon>timeline</mat-icon>
+                            <span>Trending</span>
+                        </button>
+                    }
+
+                    @if (showEditorsChoice) {
+                        <button mat-menu-item [routerLink]="['/editors']" (click)="clearReuseRoute()" aria-label="Editor's choice">
+                            <mat-icon>stars</mat-icon>
+                            <span>Editor's choice</span>
+                        </button>
+                    }
+
+                    @if (showCategories) {
+                        <button mat-menu-item [routerLink]="['/categories']" (click)="clearReuseRoute()" aria-label="Categories">
+                            <mat-icon>loyalty</mat-icon>
+                            <span>Categories</span>
+                        </button>
+                    }
+
+                    @if (user && isLoggedIn) {
+                        <mat-divider></mat-divider>
+
+                        <button mat-menu-item [routerLink]="['/upload']" aria-label="Upload">
+                            <mat-icon>arrow_upward</mat-icon>
+                            <span>Upload</span>
+                        </button>
+                        <button mat-menu-item [routerLink]="['/search']" aria-label="Search">
+                            <mat-icon>search</mat-icon>
+                            <span>Search</span>
+                        </button>
+                    }
+                </mat-menu>
+            }
+        }
+
         <a class="logo link" [routerLink]="['/']" (click)="clearReuseRoute()" tabindex="0">Vernissage <div class="beta"></div></a>
 
         @if (deviceResolution === resolution.handsetLandscape || deviceResolution === resolution.tablet || deviceResolution === resolution.browser) {
@@ -57,53 +100,12 @@
             }
         }
 
-        @if (deviceResolution === resolution.handsetPortrait) {
-            @if (showTrending || showEditorsChoice || showCategories) {
-                <button mat-icon-button [matMenuTriggerFor]="discover" color="primary" aria-label="More options">
-                    <mat-icon>menu</mat-icon>
+        @if(!user || !isLoggedIn) {
+            @if (!isHandsetPortrait) {
+                <button mat-icon-button color="primary" class="margin-right-5" (click)="onThemeToggle()" aria-label="Switch theme">
+                    <mat-icon>{{ isLightTheme ? 'dark_mode' : 'light_mode' }}</mat-icon>
                 </button>
-                <mat-menu #discover="matMenu">
-                    @if (showTrending) {
-                        <button mat-menu-item [routerLink]="['/trending']" (click)="clearReuseRoute()" aria-label="Trending">
-                            <mat-icon>timeline</mat-icon>
-                            <span>Trending</span>
-                        </button>
-                    }
-
-                    @if (showEditorsChoice) {
-                        <button mat-menu-item [routerLink]="['/editors']" (click)="clearReuseRoute()" aria-label="Editor's choice">
-                            <mat-icon>stars</mat-icon>
-                            <span>Editor's choice</span>
-                        </button>
-                    }
-
-                    @if (showCategories) {
-                        <button mat-menu-item [routerLink]="['/categories']" (click)="clearReuseRoute()" aria-label="Categories">
-                            <mat-icon>loyalty</mat-icon>
-                            <span>Categories</span>
-                        </button>
-                    }
-
-                    @if (user && isLoggedIn) {
-                        <mat-divider></mat-divider>
-
-                        <button mat-menu-item [routerLink]="['/upload']" aria-label="Upload">
-                            <mat-icon>arrow_upward</mat-icon>
-                            <span>Upload</span>
-                        </button>
-                        <button mat-menu-item [routerLink]="['/search']" aria-label="Search">
-                            <mat-icon>search</mat-icon>
-                            <span>Search</span>
-                        </button>
-                    }
-                </mat-menu>
             }
-        }
-
-        @if(!user || !isLoggedIn) {
-            <button mat-icon-button color="primary" class="margin-right-5" (click)="onThemeToggle()" aria-label="Switch theme">
-                <mat-icon>{{ isLightTheme ? 'dark_mode' : 'light_mode' }}</mat-icon>
-            </button>
             <button *ngIf="isRegistrationEnabled()" mat-stroked-button color="primary" [routerLink]="['/register']" class="margin-right-5">Sign up</button>
             <button mat-button [routerLink]="['/login']">Log in</button>
         }

diff --git a/src/app/components/core/header/header.component.scss b/src/app/components/core/header/header.component.scss
@@ -4,6 +4,11 @@ mat-toolbar {
   height: 64px !important;
 }
 
+.hamburger-menu {
+    margin-left: -12px;
+    margin-right: 4px;
+}
+
 .menu-divider {
     height: 24px;
     margin-left: 12px;
@@ -17,7 +22,6 @@ mat-toolbar {
 a.logo {
     font-family: 'Fleur De Leah', cursive;
     font-size:32px;
-    margin-right: 20px;
 
     .beta {
         position: relative;