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

UX Overhaul Part 1 (#3047)

Browse source 
Co-authored-by: Joseph Milazzo <joseph.v.milazzo@gmail.com>
This commit is contained in:
Robbie Davis 2024-08-09 13:55:31 -04:00 • committed by GitHub
parent 5934d516f3
commit ff79710ac6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
324 changed files with 11589 additions and 4598 deletions
Download patch file Download diff file Expand all files Collapse all files

38
UI/Web/src/app/carousel/_components/carousel-reel/carousel-reel.component.html
View file

@ -1,16 +1,21 @@
<ng-container *transloco="let t; read: 'carousel-reel'">
@if(alwaysShow || items && items.length > 0) {
<div class="carousel-container">
@if (alwaysShow || items && items.length > 0) {
<div class="carousel-container mb-3">
<div>
<h3 (click)="sectionClicked($event)" [ngClass]="{'non-selectable': !clickableTitle}">
<h4 class="header" (click)="sectionClicked($event)" [ngClass]="{'non-selectable': !clickableTitle}">
<a href="javascript:void(0)" class="section-title" >{{title}}</a>
<i *ngIf="iconClasses !== ''" class="{{iconClasses}} title-icon ms-1" aria-hidden="true"></i>
</h3>
<div class="float-end" *ngIf="swiper">
<button class="btn btn-icon carousel-btn" [disabled]="swiper.isBeginning" (click)="prevPage()"><i class="fa fa-angle-left" aria-hidden="true"></i><span class="visually-hidden">{{t('prev-items')}}</span></button>
<button class="btn btn-icon carousel-btn" [disabled]="swiper.isEnd" (click)="nextPage()"><i class="fa fa-angle-right" aria-hidden="true"></i><span class="visually-hidden">{{t('next-items')}}</span></button>
</div>
@if (iconClasses !== '') {
<i class="{{iconClasses}} title-icon ms-1" aria-hidden="true"></i>
}
</h4>
@if (swiper) {
<div class="float-end">
<button class="btn btn-icon carousel-btn" [disabled]="swiper.isBeginning" (click)="prevPage()"><i class="fa fa-angle-left" aria-hidden="true"></i><span class="visually-hidden">{{t('prev-items')}}</span></button>
<button class="btn btn-icon carousel-btn" [disabled]="swiper.isEnd" (click)="nextPage()"><i class="fa fa-angle-right" aria-hidden="true"></i><span class="visually-hidden">{{t('next-items')}}</span></button>
</div>
}
</div>
@if (items.length > 0) {
<div>
@ -18,14 +23,17 @@
[slidesPerView]="'auto'"
(init)="onSwiper($event)"
[freeMode]="true">
<ng-template *ngFor="let item of items; index as i;" swiperSlide>
<ng-container [ngTemplateOutlet]="carouselItemTemplate" [ngTemplateOutletContext]="{ $implicit: item, idx: i }"></ng-container>
</ng-template>
<ng-container *ngIf="alwaysShow && items.length === 0">
@for(item of items; track item; let i = $index;) {
<ng-template swiperSlide>
<ng-container [ngTemplateOutlet]="promptToAddTemplate"></ng-container>
<ng-container swiperSlide [ngTemplateOutlet]="carouselItemTemplate" [ngTemplateOutletContext]="{ $implicit: item, idx: i }"></ng-container>
</ng-template>
</ng-container>
} @empty {
@if (alwaysShow) {
<ng-template swiperSlide>
<ng-container [ngTemplateOutlet]="carouselItemTemplate"></ng-container>
</ng-template>
}
}
</swiper>
</div>
}

6
UI/Web/src/app/carousel/_components/carousel-reel/carousel-reel.component.scss
View file

@ -9,7 +9,7 @@
.carousel-container {
.section-title {
font-weight: 400;
margin-left: 10px;
margin-left: 5px;
color: var(--carousel-header-text-color);
text-decoration: var(--carousel-header-text-decoration);
@ -27,7 +27,6 @@
}
}
::ng-deep .swiper-slide {
width: auto !important;
}
@ -40,9 +39,8 @@
margin-bottom: 0;
}
h3 {
.header {
display: inline-block;
font-size: 1.2rem;
}
.title-icon {

4
UI/Web/src/app/carousel/_components/carousel-reel/carousel-reel.component.ts
View file

@ -1,7 +1,7 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
import { Swiper, SwiperEvents } from 'swiper/types';
import { SwiperModule } from 'swiper/angular';
import { NgIf, NgClass, NgFor, NgTemplateOutlet } from '@angular/common';
import { NgClass, NgTemplateOutlet } from '@angular/common';
import {TranslocoDirective} from "@ngneat/transloco";
@Component({
@ -10,7 +10,7 @@ import {TranslocoDirective} from "@ngneat/transloco";
styleUrls: ['./carousel-reel.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [NgIf, NgClass, SwiperModule, NgFor, NgTemplateOutlet, TranslocoDirective]
imports: [NgClass, SwiperModule, NgTemplateOutlet, TranslocoDirective]
})
export class CarouselReelComponent {