Moving loader animation to the middle and fixing it in dark mode #587 #68 #140

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;

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

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>

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