From 8312f6c0d9c308d5ba84076b9b4363c4286e5600 Mon Sep 17 00:00:00 2001
From: Hippari <iamtimscampi@gmail.com>
Date: Mon, 16 Dec 2024 13:42:51 +0100
Subject: [PATCH] Fixed CSS for publisher flipper

---
 .../publisher-flipper.component.html           |  8 ++++----
 .../publisher-flipper.component.scss           | 18 ++++++++++++------
 .../metadata-detail-row.component.html         |  6 +++---
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/UI/Web/src/app/_single-module/publisher-flipper/publisher-flipper.component.html b/UI/Web/src/app/_single-module/publisher-flipper/publisher-flipper.component.html
index 00b625413..93dd6f24a 100644
--- a/UI/Web/src/app/_single-module/publisher-flipper/publisher-flipper.component.html
+++ b/UI/Web/src/app/_single-module/publisher-flipper/publisher-flipper.component.html
@@ -7,8 +7,8 @@
             [imageUrl]="imageService.getPublisherImage(currentPublisher!.name)"
             [classes]="'me-2'"
             [hideOnError]="true"
-            width="32px"
-            height="32px"
+            width="24px"
+            height="24px"
             aria-hidden="true">
           </app-image>
           <div class="position-relative d-inline-block"
@@ -23,8 +23,8 @@
             [imageUrl]="imageService.getPublisherImage(nextPublisher!.name)"
             [classes]="'me-2'"
             [hideOnError]="true"
-            width="32px"
-            height="32px"
+            width="24px"
+            height="24px"
             aria-hidden="true">
           </app-image>
           <div class="position-relative d-inline-block"
diff --git a/UI/Web/src/app/_single-module/publisher-flipper/publisher-flipper.component.scss b/UI/Web/src/app/_single-module/publisher-flipper/publisher-flipper.component.scss
index 9f4486d16..392dfaa97 100644
--- a/UI/Web/src/app/_single-module/publisher-flipper/publisher-flipper.component.scss
+++ b/UI/Web/src/app/_single-module/publisher-flipper/publisher-flipper.component.scss
@@ -23,11 +23,6 @@
   padding: 2px 5px;
   font-size: 0.8rem;
   vertical-align: middle;
-
-  div {
-    min-height: 32px;
-    line-height: 32px;
-  }
 }
 
 .publisher-flipper {
@@ -44,14 +39,25 @@
 }
 
 .publisher-side {
-  position: absolute;
   width: 100%;
   height: 100%;
   backface-visibility: hidden;
+
+  // Position: absolute on the second child
+  &:not(:first-child) {
+    position: absolute;
+    bottom: 0;
+  }
+
+  .publisher-img-container {
+    height: 100%;
+    width: 100%;
+  }
 }
 
 .publisher-front {
   z-index: 2;
+  transform: rotateX(0deg);
 }
 
 .publisher-back {
diff --git a/UI/Web/src/app/series-detail/_components/metadata-detail-row/metadata-detail-row.component.html b/UI/Web/src/app/series-detail/_components/metadata-detail-row/metadata-detail-row.component.html
index 51a046214..9305fa5bd 100644
--- a/UI/Web/src/app/series-detail/_components/metadata-detail-row/metadata-detail-row.component.html
+++ b/UI/Web/src/app/series-detail/_components/metadata-detail-row/metadata-detail-row.component.html
@@ -2,10 +2,10 @@
   <div class="mt-2 mb-2">
     @if (entity.publishers.length > 0) {
       <div class="publisher-img-container d-inline-flex align-items-center me-2 position-relative">
-        <app-image [imageUrl]="imageService.getPublisherImage(entity.publishers[0].name)" [classes]="'me-2'" [hideOnError]="true" width="32px" height="32px"
+        <!--<app-image [imageUrl]="imageService.getPublisherImage(entity.publishers[0].name)" [classes]="'me-2'" [hideOnError]="true" width="32px" height="32px"
                   aria-hidden="true"></app-image>
-        <div class="position-relative d-inline-block" (click)="openGeneric(FilterField.Publisher, entity.publishers[0].id)">{{entity.publishers[0].name}}</div>
-<!--        <app-publisher-flipper [publishers]="entity.publishers"></app-publisher-flipper>-->
+        <div class="position-relative d-inline-block" (click)="openGeneric(FilterField.Publisher, entity.publishers[0].id)">{{entity.publishers[0].name}}</div>-->
+        <app-publisher-flipper [publishers]="entity.publishers"></app-publisher-flipper>
       </div>
     }
     <span class="me-2">