AZEN-SGG/Kavita
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UX Overhaul Part 2 (#3112)

Browse source 
Co-authored-by: Robbie Davis <robbie@therobbiedavis.com>
This commit is contained in:
Joe Milazzo 2024-08-16 19:37:12 -05:00 • committed by GitHub
parent 0247bc5012
commit 3d8aa2ad24
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
192 changed files with 14808 additions and 1874 deletions
Download patch file Download diff file Expand all files Collapse all files

33
UI/Web/src/app/cards/next-expected-card/next-expected-card.component.html
View file

@ -1,23 +1,26 @@
<div class="card-item-container card">
<div class="overlay">
<app-image [styles]="{'border-radius': '.25rem .25rem 0 0'}" height="230px" width="158px" classes="extreme-blur" [imageUrl]="imageUrl"></app-image>
<app-image [styles]="{'border-radius': '.25rem .25rem 0 0'}" height="230px" width="158px" classes="extreme-blur"
[imageUrl]="imageUrl"></app-image>
<div class="card-overlay"></div>
<ng-container *ngIf="entity.title | safeHtml as info">
<div class="overlay-information overlay-information--centered" *ngIf="info !== ''">
<div class="position-relative">
<span class="card-title library mx-auto" style="width: auto;">
<i class="fa-regular fa-clock mb-2" style="font-size: 26px" aria-hidden="true"></i>
<div class="upcoming-header">Upcoming</div>
<span [innerHTML]="info"></span>
</span>
</div>
</div>
<ng-container *ngIf="entity.title | safeHtml as info">
<div class="card-body meta-title" *ngIf="info !== ''">
<div class="card-content d-flex flex-column pt-2 pb-2 justify-content-center align-items-center text-center">
<div class="upcoming-header"><i class="fa-regular fa-clock me-1" aria-hidden="true"></i>Upcoming</div>
<span [innerHTML]="info"></span>
</div>
</ng-container>
</div>
</ng-container>
</div>
<div class="card-body">
<span class="card-title" tabindex="0">{{title}}</span>
</div>
<div class="card-title-container">
<span class="card-title" tabindex="0">
{{title}}
</span>
</div>
</div>

9
UI/Web/src/app/cards/next-expected-card/next-expected-card.component.scss
View file

@ -1,3 +1,5 @@
@use '../../../card-item-common';
::ng-deep .extreme-blur {
filter: brightness(50%) blur(4px)
}
@ -7,9 +9,14 @@
}
.upcoming-header {
font-size: 16px;
font-size: 0.8rem;
font-weight: bold;
}
.card-title {
width: 146px;
}
.card-content {
font-size: 0.8rem;
}