Backups/Mango
1
0
Fork 0
mirror of https://github.com/hkalexling/Mango.git synced 2025-08-02 10:55:30 -04:00
Code Issues Projects Releases Wiki Activity

Fixed right flip panel not being all the way on the right; changed real image size option to not be hard coded.

Browse Source
This commit is contained in:
Hiers 2022-07-13 14:20:43 +01:00
parent 6ddbe8d436
commit 624283643c
2 changed files with 6 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
public/js/reader.js
View File

@ -69,6 +69,7 @@ const readerComponent = () => {
const savedFitType = localStorage.getItem('fitType'); const savedFitType = localStorage.getItem('fitType');
if (savedFitType) { if (savedFitType) {
this.fitType = savedFitType; this.fitType = savedFitType;
$('#fit-select').val(savedFitType);
} }
const savedFlipAnimation = localStorage.getItem('enableFlipAnimation'); const savedFlipAnimation = localStorage.getItem('enableFlipAnimation');
this.enableFlipAnimation = savedFlipAnimation === null || savedFlipAnimation === 'true'; this.enableFlipAnimation = savedFlipAnimation === null || savedFlipAnimation === 'true';
@ -306,19 +307,6 @@ const readerComponent = () => {
}); });
}); });
}, },
/**
* Sets the image to not be restricted to the size of its container if it's not being scaled
*
* @param {string} fitType - ver, horz and real for fitting to height, width,
* and showing real size, respectively
*/
setFit(fitType){
if (fitType === 'real'){
document.styleSheets[0].rules[21].style.maxWidth = '';
} else {
document.styleSheets[0].rules[21].style.maxWidth = '100%';
}
},
/** /**
* Marks progress as 100% and jumps to the next entry * Marks progress as 100% and jumps to the next entry
* *
@ -355,7 +343,6 @@ const readerComponent = () => {
fitChanged(){ fitChanged(){
this.fitType = $('#fit-select').val(); this.fitType = $('#fit-select').val();
this.setFit(this.fitType);
localStorage.setItem('fitType', this.fitType); localStorage.setItem('fitType', this.fitType);
}, },

8
src/views/reader.html.ecr
View File

@ -19,7 +19,7 @@
</div> </div>
<div <div
:class="{'uk-container': true, 'uk-container-small': mode === 'continuous', 'uk-container-expand': mode !== 'continuous'}"> :class="{'uk-container': true, 'uk-container-small': mode === 'continuous', 'uk-container-expand': mode !== 'continuous'}" style="width: fit-content;">
<div x-show="!loading && mode === 'continuous'" x-cloak> <div x-show="!loading && mode === 'continuous'" x-cloak>
<template x-if="!loading && mode === 'continuous'" x-for="item in items"> <template x-if="!loading && mode === 'continuous'" x-for="item in items">
<img <img
@ -40,7 +40,7 @@
<%- end -%> <%- end -%>
</div> </div>
<div x-cloak x-show="!loading && mode !== 'continuous'" class="uk-flex uk-flex-middle" style="height:${fitType === 'vert' ? '100vh' : ''"> <div x-cloak x-show="!loading && mode !== 'continuous'" class="uk-flex uk-flex-middle" :style="`height:${fitType === 'vert' ? '100vh' : ''}; min-width: fit-content; position: relative;`">
<img uk-img :class="{ <img uk-img :class="{
'uk-align-center': true, 'uk-align-center': true,
@ -50,8 +50,8 @@
width:${fitType === 'horz' ? '100vw' : 'auto'}; width:${fitType === 'horz' ? '100vw' : 'auto'};
height:${fitType === 'vert' ? '100vh' : 'auto'}; height:${fitType === 'vert' ? '100vh' : 'auto'};
margin-bottom:0; margin-bottom:0;
max-width:${fitType === 'horz' ? '100%' : ''}; max-width:${fitType === 'horz' ? '100%' : fitType === 'vert' ? '' : 'none' };
max-height:${fitType === 'vert' ? '100%' : ''}; max-height:${fitType === 'vert' ? '100%' : fitType === 'horz' ? '' : 'none'};
object-fit: contain; object-fit: contain;
`" /> `" />