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

Stablize the Styles (#1128)

Browse source 
* Fixed a bug where adding multiple series to reading list would throw an error on UI, but it was successful.

* When a series has a reading list, we now show the connection on Series detail.

* Removed all baseurl code from UI and not-connected component since we no longer use it.

* Fixed tag badges not showing a border. Added last read time to the series detail page

* Fixed up error interceptor to remove no-connection code

* Changed implementation for series detail. Book libraries will never send chapters back. Volume 0 volumes will not be sent in volumes ever. Fixed up more renaming logic on books to send more accurate representations to the UI.

* Cleaned up the selected tab and tab display logic

* Fixed a bad where statement in reading lists for series

* Fixed up tab logic again

* Fixed a small margin on search backdrop

* Made badge expander button smaller to align with badges

* Fixed a few UIs due to .form-group and .form-row being removed

* Updated Theme component page to help with style testing

* Added more components to theme tester

* Cleaned up some styling

* Fixed opacity on search item hover
This commit is contained in:
Joseph Milazzo 2022-02-28 13:09:37 -06:00 • committed by GitHub
parent cb9b54b8de
commit 864d693790
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
38 changed files with 425 additions and 187 deletions
Download patch file Download diff file Expand all files Collapse all files

2
UI/Web/src/app/shared/badge-expander/badge-expander.component.html
View file

@ -1,7 +1,7 @@
<div class="badge-expander">
<div class="content">
<ng-container *ngFor="let item of visibleItems; index as i;" [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item, idx: i }"></ng-container>
<button type="button" *ngIf="!isCollapsed && itemsLeft !== 0" class="btn btn-outline-primary" (click)="toggleVisible()" [attr.aria-expanded]="!isCollapsed">
<button type="button" *ngIf="!isCollapsed && itemsLeft !== 0" class="btn btn-sm btn-outline-primary" (click)="toggleVisible()" [attr.aria-expanded]="!isCollapsed">
and {{itemsLeft}} more
</button>
</div>

4
UI/Web/src/app/shared/badge-expander/badge-expander.component.scss
View file

@ -5,8 +5,4 @@
.collapsed {
height: 35px;
overflow: hidden;
}
.badge-expander {
//display: inline-block;
}

5
UI/Web/src/app/shared/badge-expander/badge-expander.component.ts
View file

@ -8,6 +8,7 @@ import { Component, ContentChild, Input, OnInit, TemplateRef } from '@angular/co
export class BadgeExpanderComponent implements OnInit {
@Input() items: Array<any> = [];
@Input() itemsTillExpander: number = 4;
@ContentChild('badgeExpanderItem') itemTemplate!: TemplateRef<any>;
@ -15,12 +16,12 @@ export class BadgeExpanderComponent implements OnInit {
isCollapsed: boolean = false;
get itemsLeft() {
return Math.max(this.items.length - 4, 0);
return Math.max(this.items.length - this.itemsTillExpander, 0);
}
constructor() { }
ngOnInit(): void {
this.visibleItems = this.items.slice(0, 4);
this.visibleItems = this.items.slice(0, this.itemsTillExpander);
}
toggleVisible() {

2
UI/Web/src/app/shared/person-badge/person-badge.component.html
View file

@ -1,4 +1,4 @@
<div class="tagbadge cursor clickable">
<div class="tagbadge cursor clickable" *ngIf="person !== undefined">
<div class="d-flex">
<!-- <img src="..." class="align-self-center me-3" alt="..."> -->
<i class="fa fa-user-circle align-self-center me-2" aria-hidden="true"></i>