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

Smart Filters & Dashboard Customization (#2282)

Browse source 
Co-authored-by: Robbie Davis <robbie@therobbiedavis.com>
This commit is contained in:
Joe Milazzo 2023-09-12 11:24:47 -07:00 • committed by GitHub
parent 3d501c9532
commit 84f85b4f24
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
92 changed files with 7149 additions and 555 deletions
Download patch file Download diff file Expand all files Collapse all files

2
UI/Web/src/app/reading-list/_components/draggable-ordered-list/draggable-ordered-list.component.html
View file

@ -41,7 +41,7 @@
<button class="btn btn-icon float-end" (click)="removeItem(item, i)" *ngIf="showRemoveButton">
<i class="fa fa-times" aria-hidden="true"></i>
<span class="visually-hidden" attr.aria-labelledby="item.id--{{i}}">{{t('remove-item')}}</span>
<span class="visually-hidden" attr.aria-labelledby="item.id--{{i}}">{{t('remove-item-alt')}}</span>
</button>
</div>
</div>

20
UI/Web/src/app/reading-list/_components/draggable-ordered-list/draggable-ordered-list.component.scss
View file

@ -1,28 +1,27 @@
.example-list {
min-width: 500px;
width: 100%;
max-width: 100%;
min-height: 60px;
display: block;
border-radius: 4px;
overflow: hidden;
}
.example-box {
margin: 5px 0;
display: flex;
flex-direction: row;
box-sizing: border-box;
font-size: 14px;
max-height: 140px;
height: 140px;
.drag-handle {
cursor: move;
font-size: 24px;
// TODO: This needs to be calculation based
margin-top: 215%;
}
}
.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
@ -30,19 +29,20 @@
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.cdk-drag-placeholder {
opacity: 0;
}
.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.example-box:last-child {
border: none;
margin-bottom: 20px;
}
.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
@ -70,4 +70,4 @@
virtual-scroller.empty {
display: none;
}
}

2
UI/Web/src/app/reading-list/_components/reading-list-detail/reading-list-detail.component.ts
View file

@ -178,7 +178,7 @@ export class ReadingListDetailComponent implements OnInit {
orderUpdated(event: IndexUpdateEvent) {
if (!this.readingList) return;
this.readingListService.updatePosition(this.readingList.id, event.item.id, event.fromPosition, event.toPosition).subscribe(() => { /* No Operation */ });
this.readingListService.updatePosition(this.readingList.id, event.item.id, event.fromPosition, event.toPosition).subscribe();
}
itemRemoved(item: ReadingListItem, position: number) {

2
UI/Web/src/app/reading-list/_components/reading-list-item/reading-list-item.component.html
View file

@ -1,5 +1,5 @@
<ng-container *transloco="let t; read: 'reading-list-item'">
<div class="d-flex flex-row g-0 mb-2">
<div class="d-flex flex-row g-0 mb-2 reading-list-item">
<div class="pe-2">
<app-image width="106px" maxHeight="125px" class="img-top me-3" [imageUrl]="imageService.getChapterCoverImage(item.chapterId)"></app-image>
<ng-container *ngIf="item.pagesRead === 0 && item.pagesTotal > 0">

13
UI/Web/src/app/reading-list/_components/reading-list-item/reading-list-item.component.scss
View file

@ -1,5 +1,10 @@
$image-height: 125px;
.reading-list-item {
max-height: 140px;
height: 140px;
}
.progress-banner {
height: 5px;
@ -9,12 +14,6 @@ $image-height: 125px;
}
}
.list-item-container {
background: var(--card-list-item-bg-color);
border-radius: 5px;
position: relative;
}
.badge-container {
border-radius: 4px;
display: block;
@ -34,4 +33,4 @@ $image-height: 125px;
border-style: solid;
border-width: 0 var(--card-progress-triangle-size) var(--card-progress-triangle-size) 0;
border-color: transparent var(--primary-color) transparent transparent;
}
}