From e3eda4676e8d81b40eee9910061ffb8828a8bf73 Mon Sep 17 00:00:00 2001
From: "Patrik J. Braun" <bra.patrik@gmail.com>
Date: Mon, 4 Sep 2023 21:52:15 +0200
Subject: [PATCH] Fine lightbox controls #587

---
 .../ui/gallery/grid/grid.gallery.component.ts |  2 +-
 .../controls.lightbox.gallery.component.html  |  2 +-
 .../lightbox.map.gallery.component.css        |  6 +++-
 .../lightbox.map.gallery.component.html       | 32 ++++++++++---------
 4 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/src/frontend/app/ui/gallery/grid/grid.gallery.component.ts b/src/frontend/app/ui/gallery/grid/grid.gallery.component.ts
index 71b77114..ce32fc26 100644
--- a/src/frontend/app/ui/gallery/grid/grid.gallery.component.ts
+++ b/src/frontend/app/ui/gallery/grid/grid.gallery.component.ts
@@ -356,7 +356,7 @@ export class GalleryGridComponent
     // (on lightbox navigation)
     while (
       (this.mediaToRender.length - 1 < groupIndex &&
-        this.mediaToRender[this.mediaToRender.length - 1].media.length < mediaIndex) &&
+        this.mediaToRender[this.mediaToRender.length - 1]?.media?.length < mediaIndex) &&
       this.renderARow() !== null
       // eslint-disable-next-line no-empty
       ) {
diff --git a/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.html b/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.html
index d8470c21..197d8732 100644
--- a/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.html
+++ b/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.html
@@ -5,7 +5,7 @@
 
   <div [class.dim-controls]="controllersDimmed"
        class="controls controls-top">
-    <div class="controls-background rounded-start-bottom pe-1 pt-1">
+    <div class="controls-background rounded-start-bottom">
       <div class="highlight control-button" (click)="toggleInfoPanel.emit()"
            title="info key: i" i18n-title>
         <ng-icon  name="ionInformationOutline"></ng-icon>
diff --git a/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.css b/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.css
index c122f0ad..fc2e7b54 100644
--- a/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.css
+++ b/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.css
@@ -17,6 +17,11 @@
   -moz-transition: all 0.3s ease-in-out;
 }
 
+.controls-background {
+  display: inline-block;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
 .sebm-google-map-container {
   width: 100%;
   height: 100%;
@@ -49,7 +54,6 @@
   height: initial;
   text-align: right;
   width: 100%;
-  padding: 5px;
   font-size: large;
 }
 
diff --git a/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.html b/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.html
index 696dfb55..4c0c58be 100644
--- a/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.html
+++ b/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.html
@@ -20,23 +20,25 @@
 
   <div id="controllers-container" *ngIf="controllersVisible">
     <div id="controls">
-      <div class="highlight control-button"
-           *ngIf="fullScreenService.isFullScreenEnabled()"
-           (click)="fullScreenService.exitFullScreen()" title="toggle fullscreen, key: f" i18n-title>
-        <ng-icon style="margin-right: 0.2em; margin-top: -0.05em" class="align-top" size="0.9em"
-                 name="ionContractOutline"></ng-icon>
+      <div class="controls-background rounded-start-bottom">
+        <div class="highlight control-button"
+             *ngIf="fullScreenService.isFullScreenEnabled()"
+             (click)="fullScreenService.exitFullScreen()" title="toggle fullscreen, key: f" i18n-title>
+          <ng-icon style="margin-right: 0.2em; margin-top: -0.05em" class="align-top" size="0.9em"
+                   name="ionContractOutline"></ng-icon>
+        </div>
+
+        <div class="highlight control-button"
+             *ngIf="!fullScreenService.isFullScreenEnabled()"
+             (click)="fullScreenService.showFullScreen(root)" title="toggle fullscreen, key: f" i18n-title>
+          <ng-icon style="margin-right: 0.2em; margin-top: -0.05em" class="align-top" size="0.9em"
+                   name="ionExpandOutline"></ng-icon>
+        </div>
+        <div class="highlight control-button" (click)="hide()" title="close, key: Escape" i18n-title>
+          <ng-icon size="1.2em" name="ionCloseOutline"></ng-icon>
+        </div>
       </div>
 
-      <div class="highlight control-button"
-           *ngIf="!fullScreenService.isFullScreenEnabled()"
-           (click)="fullScreenService.showFullScreen(root)" title="toggle fullscreen, key: f" i18n-title>
-        <ng-icon style="margin-right: 0.2em; margin-top: -0.05em" class="align-top" size="0.9em"
-                 name="ionExpandOutline"></ng-icon>
-      </div>
-      <div class="highlight control-button" (click)="hide()" title="close, key: Escape" i18n-title>
-        <ng-icon size="1.2em" name="ionCloseOutline"></ng-icon>
-      </div>
     </div>
-
   </div>
 </div>