Cutlery/Kavita
1
0
Fork 0
mirror of https://github.com/Kareadita/Kavita.git synced 2025-08-30 23:00:06 -04:00
Code Issues Packages Projects Releases Wiki Activity

More epub image fixes. Need thorough testing

Browse Source
This commit is contained in:
Robbie Davis 2025-07-26 17:21:12 -04:00
parent a9e7581e89
commit d2a66d35ff
2 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.scss
View File

@ -232,7 +232,8 @@ $action-bar-height: 38px;
.book-content {
position: relative;
margin: 0 0;
padding: 20px 0px;
display: flex;
align-self: flex-start;
&.column-layout-1 {
height: calc((var(--vh) * 100) - calc($action-bar-height)); // * 2
@ -268,6 +269,11 @@ $action-bar-height: 38px;
background-color: var(--brtheme-bg-color);
}
.book-content *:not(input), .book-content *:not(select), .book-content *:not(code), .book-content *:not(:link), .book-content *:not(.ngx-toastr) {
display: flex;
justify-content: center;
}
.pagination-cont {
background: var(--br-actionbar-bg-color);
border-radius: 5px;
@ -323,7 +329,7 @@ $action-bar-height: 38px;
// This is applied to images in the backend
::ng-deep .kavita-scale-width-container {
width: auto;
max-height: calc(var(--book-reader-content-max-height) - ($action-bar-height)) !important;
max-height: calc(var(--book-reader-content-max-height) - ($action-bar-height + $action-bar-height)) !important;
max-width: calc(var(--book-reader-content-max-width)) !important;
position: var(--book-reader-content-position) !important;
top: var(--book-reader-content-top) !important;
@ -334,13 +340,14 @@ $action-bar-height: 38px;
// This is applied to images in the backend
::ng-deep .kavita-scale-width {
max-height: calc(var(--book-reader-content-max-height) - ($action-bar-height)) !important;
max-height: calc(var(--book-reader-content-max-height) - ($action-bar-height + $action-bar-height)) !important;
max-width: calc(var(--book-reader-content-max-width)) !important;
object-fit: contain;
object-position: top center;
break-inside: avoid;
break-before: column;
max-height: 100vh;
padding: 20px 0;
}

12
UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.ts
View File

@ -84,7 +84,7 @@ interface HistoryPoint {
}
const TOP_OFFSET = -50 * 1.5; // px the sticky header takes up // TODO: Do I need this or can I change it with new fixed top height
const IMAGE_MAX_HEIGHT = '100dvh'; //dvh allow space for bottom navigation bar
const COLUMN_GAP = 20; // px
/**
* Styles that should be applied on the top level book-content tag
@ -986,7 +986,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
updateImageSizes() {
const isVerticalWritingStyle = this.writingStyle === WritingStyle.Vertical;
const height = this.windowHeight - (this.topOffset * 2);
let maxHeight = 'unset';
let maxHeight = IMAGE_MAX_HEIGHT;
let maxWidth = '';
switch (this.layoutMode) {
case BookPageLayoutMode.Default:
@ -1023,10 +1023,10 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
this.document.documentElement.style.setProperty('--book-reader-content-left', '50%');
this.document.documentElement.style.setProperty('--book-reader-content-transform', 'translate(-50%, -50%)');
} else {
this.document.documentElement.style.setProperty('--book-reader-content-position', '');
this.document.documentElement.style.setProperty('--book-reader-content-top', '');
this.document.documentElement.style.setProperty('--book-reader-content-left', '');
this.document.documentElement.style.setProperty('--book-reader-content-transform', '');
this.document.documentElement.style.setProperty('--book-reader-content-position', 'absolute');
this.document.documentElement.style.setProperty('--book-reader-content-top', '50%');
this.document.documentElement.style.setProperty('--book-reader-content-left', '50%');
this.document.documentElement.style.setProperty('--book-reader-content-transform', 'translate(-50%, 0%)');
}
}