Fixed CSS for publisher flipper

Kareadita · Dec 16, 2024 · 8312f6c · 8312f6c
1 parent 6ae9cbf
commit 8312f6c
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 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
@@ -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
@@ -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/.../src/app/series-detail/_components/metadata-detail-row/metadata-detail-row.component.html b/.../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">