Cutlery/Kavita
1
0
Fork 0
mirror of https://github.com/Kareadita/Kavita.git synced 2025-07-09 03:04:19 -04:00
Code Issues Packages Projects Releases Wiki Activity

Series title word wrapping (#1519)

Browse Source 
* Added text-break class to series title.

Simply added the class text-break from bootstrap to break on words.
https://getbootstrap.com/docs/5.0/utilities/text/#word-break

This has no issue with languages that do not or rarely use spaces, such as japanese and chinese. Used the following two series names to test;
- 今まで一度も女扱いされたことがない女騎士を女扱いする漫画
- Imamade Ichido mo Onnaatsukai sareta Koto ga Nai Onna Kishi wo Onnaatsukai suru

* Added text-break class to localized title

Also added the text-break bootstrap class to the localized title, removed the word-break rule from css as it is redundant.

* Enclosed LibraryName with span

Enclosed {{libraryName}} with a span to remove the added space before the title, aligning it again with the start of the subtitle. This mimics series-detail-component.html
This commit is contained in:
Ocgineer 2022-09-23 00:52:44 +02:00 committed by GitHub
parent d482aa2a11
commit aad480d83c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 3 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
UI/Web/src/app/library-detail/library-detail.component.html
View File

@ -1,7 +1,7 @@
<app-side-nav-companion-bar [hasFilter]="true" [filterOpenByDefault]="filterSettings.openByDefault" (filterOpen)="filterOpen.emit($event)" [filterActive]="filterActive"> <app-side-nav-companion-bar [hasFilter]="true" [filterOpenByDefault]="filterSettings.openByDefault" (filterOpen)="filterOpen.emit($event)" [filterActive]="filterActive">
<h2 title> <h2 title>
<app-card-actionables [actions]="actions" (actionHandler)="performAction($event)"></app-card-actionables> <app-card-actionables [actions]="actions" (actionHandler)="performAction($event)"></app-card-actionables>
{{libraryName}} <span>{{libraryName}}</span>
</h2> </h2>
<h6 subtitle class="subtitle-with-actionables" *ngIf="active.fragment === ''">{{pagination.totalItems}} Series</h6> <h6 subtitle class="subtitle-with-actionables" *ngIf="active.fragment === ''">{{pagination.totalItems}} Series</h6>
<div main> <div main>

4
UI/Web/src/app/series-detail/series-detail.component.html
View File

@ -1,13 +1,13 @@
<div #companionBar> <div #companionBar>
<app-side-nav-companion-bar *ngIf="series !== undefined" [hasExtras]="true" [extraDrawer]="extrasDrawer"> <app-side-nav-companion-bar *ngIf="series !== undefined" [hasExtras]="true" [extraDrawer]="extrasDrawer">
<ng-container title> <ng-container title>
<h2 class="title"> <h2 class="title text-break">
<app-card-actionables [disabled]="actionInProgress" (actionHandler)="performAction($event)" [actions]="seriesActions" [labelBy]="series.name" iconClass="fa-ellipsis-v"></app-card-actionables> <app-card-actionables [disabled]="actionInProgress" (actionHandler)="performAction($event)" [actions]="seriesActions" [labelBy]="series.name" iconClass="fa-ellipsis-v"></app-card-actionables>
<span>{{series.name}}</span> <span>{{series.name}}</span>
</h2> </h2>
</ng-container> </ng-container>
<ng-container subtitle *ngIf="series.localizedName !== series.name"> <ng-container subtitle *ngIf="series.localizedName !== series.name">
<h6 class="subtitle-with-actionables" title="Localized Name">{{series.localizedName}}</h6> <h6 class="subtitle-with-actionables text-break" title="Localized Name">{{series.localizedName}}</h6>
</ng-container> </ng-container>
<ng-template #extrasDrawer let-offcanvas> <ng-template #extrasDrawer let-offcanvas>

1
UI/Web/src/app/series-detail/series-detail.component.scss
View File

@ -29,7 +29,6 @@
} }
.title, .subtitle-with-actionable { .title, .subtitle-with-actionable {
word-break: break-all;
margin-bottom: 0; margin-bottom: 0;
} }