search

readium / readium-js-viewer

👁 ReadiumJS viewer: default web app for Readium.js library
BSD 3-Clause "New" or "Revised" License
550 stars 186 forks source link

Main scrollbar should be located in right border of the window #685

Open golopot opened 6 years ago

golopot commented 6 years ago

This issue is a Enhancement

Expected Behaviour

In "continuous mode", scroll bar should be located in the right border.

Observed behaviour

Scroll bar is displaced by the hidden "next page" button. Screeshot

Product

danielweck commented 6 years ago

The thin vertical regions on either side of the scrolling document viewport are reserved for the left/right arrow buttons (previous/next "page", or scroll block / unit). So, this is a "feature", not a "bug" :) Do you have suggestions to improve this UI design?

golopot commented 6 years ago

GitBook's UI is an good example. GitBook ui sample Image taken from: https://0xax.gitbooks.io/linux-insides/content/Booting/linux-bootstrap-1.html

In the improvement, the "previous/next page buttons" still exists, but is layered on top of of the main content, without taking additional space. And the scrollbar is attached to the border of the window.

danielweck commented 6 years ago

Oh sure, there are in fact existing Readium-based apps that overlay UI controls over the content / document viewport (notably mobile / touch-oriented apps, but also desktop apps).

However, the UI of (specifically) the ReadiumJS cloud reader / Chrome app is currently designed to ensure that the application "chrome" always remains outside of the bounds of the content viewport. This way, there can be no interference with hyperlinks, or other interactive elements in EPUB documents (reflowable or fixed layout).

Although the above design choice has its merits, personally I too think that the vertical scrollbar for the doc/continuous scrolling viewport is awkwardly placed. I just don't know how to fix this without significantly refactoring the current layout system.