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

Polish Part 3 (#2424)

Browse source
This commit is contained in:
Joe Milazzo 2023-11-10 07:56:30 -06:00 • committed by GitHub
parent a018d6828e
commit 944830ca73
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
62 changed files with 518 additions and 493 deletions
Download patch file Download diff file Expand all files Collapse all files

2
UI/Web/src/app/cards/external-series-card/external-series-card.component.html
View file

@ -1,6 +1,6 @@
<ng-container *transloco="let t; read: 'external-series-card'">
<ng-container *ngIf="data !== undefined">
<div class="card">
<div class="card-item-container card clickable">
<div class="overlay" (click)="handleClick()">
<ng-container>
<app-image borderRadius=".25rem .25rem 0 0" height="230px" width="158px" [imageUrl]="data.coverUrl"></app-image>

126
UI/Web/src/app/cards/external-series-card/external-series-card.component.scss
View file

@ -1,126 +0,0 @@
$image-height: 230px;
$image-width: 160px;
.card {
max-width: $image-width;
cursor: pointer;
padding-left: 0px;
padding-right: 0px;
box-sizing: border-box;
position: relative;
color: var(--card-text-color);
border: 1px var(--card-border-color);
}
.card-actions {
position: absolute;
top: 236px;
right: 0px;
width: 20px;
font-size: 13px;
}
.library {
font-size: 13px;
text-decoration: none;
margin-top: 0px;
}
.card-title {
font-size: 13px;
width: 131px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: block;
margin-top: 2px;
margin-bottom: 0px;
}
.img-top {
height: $image-height;
}
.badge-container {
border-radius: 4px;
display: block;
height: $image-height;
left: 0;
overflow: hidden;
pointer-events: none;
position: absolute;
top: 0;
width: 158px;
}
.not-read-badge {
position: absolute;
top: calc(-1 * (var(--card-progress-triangle-size) / 2));
right: -14px;
z-index: 1000;
height: var(--card-progress-triangle-size);
width: var(--card-progress-triangle-size);
background-color: var(--primary-color);
transform: rotate(45deg);
}
.overlay {
height: $image-height;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
&:hover {
visibility: visible;
.bulk-mode {
visibility: visible;
z-index: 110;
}
.overlay-item {
visibility: visible;
z-index: 100;
}
}
.overlay-item {
visibility: hidden;
}
z-index: 10;
.count {
top: 5px;
right: 10px;
position: absolute;
}
}
.card-body {
padding: 5px !important;
background-color: var(--card-bg-color);
border-width: var(--card-border-width);
border-style: var(--card-border-style);
border-color: var(--card-border-color);
border-radius: 0.25em;
}
.card-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: $image-height;
z-index: 10;
transition: all 0.2s;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}

3
UI/Web/src/app/cards/external-series-card/external-series-card.component.ts
View file

@ -9,11 +9,10 @@ import {CommonModule} from '@angular/common';
import {ExternalSeries} from "../../_models/series-detail/external-series";
import {RouterLinkActive} from "@angular/router";
import {ImageComponent} from "../../shared/image/image.component";
import {NgbActiveOffcanvas, NgbOffcanvas, NgbProgressbar, NgbTooltip} from "@ng-bootstrap/ng-bootstrap";
import {NgbOffcanvas, NgbProgressbar, NgbTooltip} from "@ng-bootstrap/ng-bootstrap";
import {ReactiveFormsModule} from "@angular/forms";
import {TranslocoDirective} from "@ngneat/transloco";
import {SeriesPreviewDrawerComponent} from "../../_single-module/series-preview-drawer/series-preview-drawer.component";
import {SeriesService} from "../../_services/series.service";
@Component({
selector: 'app-external-series-card',