Make kiwix-serve taskbar mobile friendly

kiwix / kiwix-xulrunner

[ARCHIVED] Legacy Kiwix desktop solution for Windows/macOS/Linux

https://download.kiwix.org/release/kiwix-xulrunner/

GNU General Public License v3.0

111 stars 28 forks source link

Make kiwix-serve taskbar mobile friendly #336

Closed kelson42 closed 7 years ago

kelson42 commented 7 years ago

The current taskbar works but not always display nicely. It should with all resolutions and screen density.

tim-moody commented 7 years ago

kiwix-serve jquery.js broken in chrome 56 see https://github.com/kiwix/tools/issues/1

kelson42 commented 7 years ago

@Skylsmoi I have detected two problems:

with zim/other/ubuntuusers_de_all_2013-03.zim, the search box/buttons still get somehow the style of the page (other buttons are OK)
on iphone/safari, the rendering is not responsive: extremly small taskbar, impossible to deal with it.

kelson42 commented 7 years ago

@Skylsmoi This is almost perfect now, still a few small problems:

with http://download.kiwix.org/zim/other/ubuntudoc_fr_all_2015-12.zim, the buttons height is too small
with http://download.kiwix.org/zim/phet/phet_mul_2017-04.zim, the buttons are on two lines instead of one
The search button is also slightly smaller than the other one with wikipedia_fr_all_2016-12.zim (see screenshot)
The space between the taskbar and the begin of the article is a lot larger than before and this looks a bit odd. Is that mandatory?

Otherwise everything looks good to me, I have asked someone to test on cybook. screenshot

kelson42 commented 7 years ago

@Skylsmoi Also pretty much a problem for the Bookeen Cybook, see screenshots.

Skylsmoi commented 7 years ago

When a specific ZIM breaks the design, it's because the html of the zim includes some css rules that breaks it. For example, in the phet_mul_2017-04.zim, there is a html {font-size: 62.5%;} that was causing trouble. It will be very hard to be 100% safe about this. I have added some rules in the kiwix toolbar css to reduce the risks by a lot but I can't say it is perfect since I can't know what rules ZIM files will add.

The search button should now have the same size as others

The space between the taskbar and the beginning of the article is for safety. In mobile, the taskbar might be larger because it can be on two lines and would be over the beginning of the article.

kelson42 commented 7 years ago

@Skylsmoi I have tested again and everything on my side seems to be fixed. Well done. I have asked to test again with a Cybook, but I'm optimistic. So far (and except if there is a pb with Cybook, and then I will reopen the ticket), we can consider that task done.