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

Bugfix for overflow on long filenames with no spaces (#1349)

Browse source 
* Fixed Bug #403

. Fixed: Added word wrapping for long filenames with no spaces on headers that would cause info modal to overflow.

* Fixed Bug #403

. Fixed: Added word breaking for long filenames with no spaces which would cause volume info modal to overflow.

* Fixed Bug #403

Fixed: Added word breaking for long filenames with no spaces on headers, titles, and lists which would cause overflow.
Affected: Series Detail header, Edit Series modal title, and Volumes Info modal (View Files) modal.

* Removing some inline styles, moving style from global to component level

* whoops, forgot to remove inline

* Added word breaking and removed inline styles for headers

. Fixed: Card Detail, List Item

Co-authored-by: Robbie Davis <robbie@therobbiedavis.com>
This commit is contained in:
Marcelo Guimarães Junior 2022-07-12 05:58:42 -07:00 • committed by GitHub
parent b847d5d721
commit b727d119f1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 37 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

2
UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html
View file

@ -1,7 +1,7 @@
<div class="row mt-2 g-0 pb-2" *ngIf="header !== undefined && header.length > 0">
<div class="col me-auto">
<h2 style="display: inline-block">
<h2>
<span *ngIf="actions.length > 0" class="">
<app-card-actionables (actionHandler)="performAction($event)" [actions]="actions" [labelBy]="header"></app-card-actionables>&nbsp;
</span>

5
UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.scss
View file

@ -86,3 +86,8 @@
//background-color: red;
//max-height: calc(var(--vh)*100 - 170px);
}
h2 {
display: inline-block;
word-break: break-all;
}

4
UI/Web/src/app/cards/list-item/list-item.component.html
View file

@ -14,7 +14,7 @@
</div>
<div class="flex-grow-1">
<div class="g-0">
<h5 style="margin-bottom: 0px">
<h5>
<app-card-actionables [disabled]="actionInProgress" (actionHandler)="performAction($event)" [actions]="actions" [labelBy]="seriesName" iconClass="fa-ellipsis-v"></app-card-actionables>
<ng-content select="[title]"></ng-content>
<button class="btn btn-primary float-end" (click)="read.emit()">
@ -25,7 +25,7 @@
</button>
</h5>
<!-- This isn't perfect, but it might work. TODO: Polish this-->
<h6 class="text-muted" [ngClass]="{'subtitle-with-actionables' : actions.length > 0}" style="font-size: 0.75rem" *ngIf="Title != '' && showTitle">{{Title}}</h6>
<h6 class="text-muted" [ngClass]="{'subtitle-with-actionables' : actions.length > 0}" *ngIf="Title != '' && showTitle">{{Title}}</h6>
<ng-container *ngIf="summary.length > 0">
<div class="mt-2 ps-2">
<app-read-more [text]="summary" [blur]="pagesRead === 0 && blur" [maxLength]="250"></app-read-more>

11
UI/Web/src/app/cards/list-item/list-item.component.scss
View file

@ -36,4 +36,13 @@ $triangle-size: 30px;
border-style: solid;
border-width: 0 $triangle-size $triangle-size 0;
border-color: transparent var(--primary-color) transparent transparent;
}
}
h5 {
margin-bottom: 0;
}
.subtitle-with-actionables {
font-size: 0.75rem;
word-break: break-all;
}