From e7ffa5692f4276797f6e86aca9541a2170ec2da4 Mon Sep 17 00:00:00 2001
From: "Patrik J. Braun" <bra.patrik@gmail.com>
Date: Tue, 21 Mar 2023 09:24:00 +0100
Subject: [PATCH] Moving loader animation to the middle and fixing it in dark
 mode #587 #68 #140

---
 src/frontend/app/ui/gallery/gallery.component.css      | 10 ++++++++--
 src/frontend/app/ui/gallery/gallery.component.html     |  3 +--
 .../gallery/navigator/navigator.gallery.component.html |  2 +-
 .../gallery/navigator/navigator.gallery.component.ts   |  4 ++++
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/frontend/app/ui/gallery/gallery.component.css b/src/frontend/app/ui/gallery/gallery.component.css
index 1c634130..1d49d6fd 100644
--- a/src/frontend/app/ui/gallery/gallery.component.css
+++ b/src/frontend/app/ui/gallery/gallery.component.css
@@ -56,12 +56,18 @@ app-gallery-map {
   display: block;
 }
 
+.spinner-container {
+  position: absolute;
+  top: 50%;
+  max-width: 100%;
+  width: 100%;
+  padding: 0;
+}
 
 .spinner {
-  margin-top: 50px;
   width: 80px;
   height: 80px;
-  background-color: #333;
+  background-color: var(--bs-body-color);
 
   margin-left: auto;
   margin-right: auto;
diff --git a/src/frontend/app/ui/gallery/gallery.component.html b/src/frontend/app/ui/gallery/gallery.component.html
index 6b3a82ea..70f44b77 100644
--- a/src/frontend/app/ui/gallery/gallery.component.html
+++ b/src/frontend/app/ui/gallery/gallery.component.html
@@ -62,8 +62,7 @@
     </ng-container>
   </div>
 
-  <div body class="container"
-       style="width: 100%; padding:0"
+  <div body class="container spinner-container"
        *ngIf="(!ContentWrapper.directory ||
         ContentWrapper.directory.isPartial == true)
        && !ContentWrapper.searchResult
diff --git a/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.html b/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.html
index bb236f59..e9b34e7b 100644
--- a/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.html
+++ b/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.html
@@ -10,7 +10,7 @@
         </li>
       </ol>
 
-      <ol *ngIf="!isDirectory" class="mb-0 mt-1 breadcrumb">
+      <ol *ngIf="isSearch" class="mb-0 mt-1 breadcrumb">
         <li class="active">
           <ng-container i18n>Searching for:</ng-container>
           <strong> {{galleryService.content.value?.searchResult?.searchQuery | searchQuery}}</strong>
diff --git a/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.ts b/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.ts
index ab0efb45..f2bcfffb 100644
--- a/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.ts
+++ b/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.ts
@@ -124,6 +124,10 @@ export class GalleryNavigatorComponent {
     return !!this.galleryService.content.value.directory;
   }
 
+  get isSearch(): boolean {
+    return !!this.galleryService.content.value.searchResult;
+  }
+
   get ItemCount(): number {
     const c = this.galleryService.content.value;
     return c.directory