Rework the behavior and layout of the screen (iframe version), to optimize the available space for article content

[mossroy]

The iframe currently takes all the available space (including height).
But the top area always stays visible, and does not let enough space for the article.

IMHO, it would be ideal to implement the same behavior as in the browser of Firefox OS >= 2.1 :

• when the user scrolls up, the top area shrinks (or even disappears). There are options in jquery hide() function to hide them smoothly, but we also need to resize the iframe at this moment
• when the user scrolls down, the top area reappears (and the iframe should be resized)
• the top area also contains the back/forward buttons
• the bottom bar and buttons become useless and might be removed

... but it might be hard to implement

[mossroy]

Maybe using something like https://medium.com/@mariusc23/hide-header-on-scroll-down-show-on-scroll-up-67bbaae9a78c would do what we need for the header BUT the difficulty will be to expand/reduce the iframe without visibly moving the content inside

[kelson42]

Yes, would be great to have it that way (it works like this on Kiwix for iOS for example) but I would pospone this after the first release. For example Kiwix for Android has always the top bar visible, ant this is OK, users do not complain too much about it.

[mossroy]

You're right in the sense that we first need a functional application, and we can leave some enhancements for next versions.
But there is still a minimum that needs to be done in any case :

• reduce the size of top area : the article content is really in a too small area for now
• make the back/forward/top buttons work again

[mossroy]

OK I did what I considered to be the minimum for a first release with the iframe. So I push this enhancement for the following version

[Jaifroid]

On small screens, at least on Windows Mobile, the top area does disappear when scrolling down the page, so the article becomes fullscreen apart from the very narrow navbar and buttons at the bottom. I think this should be a behaviour based on window size and in particular on pixel height of the window, rather than absolute screensize. Effectively it would be good to have the app/page fully responsive, so that it doesn't matter if it is showing on a 720 x 1024 screen or in a window of 720 x 1024, but it will adopt the same behaviour based on the available display space.

[Jaifroid]

This would be superseded by #523.