Fixed CSS for publisher flipper

This commit is contained in:
Hippari 2024-12-16 13:42:51 +01:00
parent 6ae9cbf4aa
commit 8312f6c0d9
3 changed files with 19 additions and 13 deletions

View file

@ -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"

View file

@ -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 {

View file

@ -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">