search

janeczku / calibre-web

:books: Web app for browsing, reading and downloading eBooks stored in a Calibre database
GNU General Public License v3.0
13.11k stars 1.4k forks source link

Overly large margins when reading epub on mobile #1526

Open slikts opened 4 years ago

slikts commented 4 years ago

Epub reader margins are too large on mobile: image

It's unclear why the margins would need to be so large and limit the readable area to a small square in the middle. It seems like an oversight, and I've not found a way to configure it.

The environment is using the current LinuxServer calibre-web image.

Donatzsky commented 4 years ago

The problem is that, for some reason, there's lot of special-casing for iOS devices in the CSS.

The code in question starts at line 698 (/* For iPad portrait layouts only */) here: https://github.com/janeczku/calibre-web/blob/master/cps/static/css/main.css

Really not sure why it's been done like this.

ghost commented 4 years ago

So can we have the ability to shrink the margins and text size? How would we go about this, turn it into a feature request?

OzzieIsaacs commented 4 years ago

Really not sure why it's been done like this. Me, too. 2 posibilities: A) At some point in time I added it based on my iPad layout at that time B) It was part of the epub reader package and just was copied.

Feel free to change it

OzzieIsaacs commented 4 years ago

One remark: There is a request about to small text sizes in the reader on kindle, so if you change it, please don't just change the size, but make it adjustable

ghost commented 4 years ago

I don't mind adjusting, IMHO it should be in the ui config section of the admin panel, hence the thought of turning it into a feature request. But I can't find it in the file system in the container or I'd map it and adjust there.

zoenglinghou commented 2 years ago

I do not think this is a CSS-only issue. By messing around the stylesheet (using userstyles), It seems that we need to adjust the embedded content inside the iframe as well, otherwise the content would stubbornly stays at a small frame. See for yourself:

@-moz-document regexp("^https://<your-website-here>/read/.*") {
    @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: portrait) {
        #viewer {
            width: 80% !important;
            height: 85% !important;
        }

        #viewer iframe {
            width: 80vw !important;
            height: 100% !important;
        }

        div.epub-view {
            height: 85vh !important;
        }
    }
}
n00b12345 commented 3 weeks ago

Facing this issue. Wish there was a solution.