On mobile, adapt the layout of articles like on mobile version of online wikipedia about kiwix-js HOT 19 CLOSED

@kelson42 Kiwix JS doesn't use custom stylesheets. However, Kiwix JS Windows customizes the stylesheets in order to allow switching between Desktop and Mobile styles on Wikimedia ZIMs. So I'll look at this issue over there (but am currently at a conference in Germany, so will look at it when I'm back).

from kiwix-js.

It seems to be done through the use of CSS styles on <h2> tags and a div for the content : section_heading and openSection

<div class="section">
<h2 id="section_1" class="section_heading">
<span id="SectionName"> Section Name </span>
</h2>
<div id="content_1" class="content_block">
...
</div>
</div>
<div class="section">
<h2 id="section_2" class="section_heading openSection">
...
</h2>
<div id="content_2" class="content_block openSection">
...
</div>
</div>

I suppose there also is some javascript to handle the collapse/expand feature

from kiwix-js.

See #149 for an implementation of user-selectable layout for mobile Wikipedia pages. Untested on other ZIM files. Tested on the English all pics and Spanish all pics ZIM files.

from kiwix-js.

This should be done in the ZIM file itself. I do not think this is the role of the reader to modify "a lot" the rendering of HTML. That's why we have made mwoffliner (Mediawiki/Wikimedia) scrapper mobile able to generate such ZIM files. One of the first ones has been generated a few weeks ago, please test with http://download.kiwix.org/zim/wikipedia/wikipedia_en_medicine_novid_2017-07.zim.

from kiwix-js.

Ah, that's good to know, @kelson42 . Was not aware of this. Will test with that ZIM file. There may still be scope on a mobile app for the user to have some choice as to how to display a specific ZIM file, since it may not be so easy for the user to download a different ZIM just to change the page layout. Maybe such a user choice should be available in the app versions of the reader, but not in the desktop versions? Anyway, will check out that ZIM file to see how it changes things. Thanks.

from kiwix-js.

@Jaifroid I do not thing there is any generic/agnostic way to transform css/html/js from a desktop page to a mobile page. The HTML should be make "responsive" at the conception itself and that's what we try to do. At middle term we do not plan to release any ZIM file (at least from Wikipedia/Wikivoyage/Wiki...) which does not fit to mobile screens = with mobile layout. Remark: we do not have a solution to switch the layout from one to the other.

from kiwix-js.

Sounds good! Responsive is the ideal way to go. The Wikipedia ZIM files I've been working with up to now seem to have non-responsive (or only basically responsive) CSS, but it's great to know that the new scraper may solve that. Am testing...

from kiwix-js.

I've had a bit of a test of the en_medicine_novid ZIM file against the master branch of kiwix-js. The file shows a few problems in our app. There is this layout issue:

But this isn't specific to our app (it's also the same on kiwix.exe), and looking at the mobile site, it is intended to use the space for opening the contents box (presumably dynamically generated):

More seriously, however, clicking on a secondary header (h2) which are meant to be collapsible causes an exception in kiwix-js, and in kiwix-js-windows it causes the app to crash and close. Obviously I can filter for this issue to disable the .onclick event, but even better would be to repair it so it actually opens and closes. On kiwix.exe clicking does nothing.

from kiwix-js.

But overall, this is a pretty faithful rendering of the Wikipedia mobile style, so congratulations @kelson42 .

from kiwix-js.

@Jaifroid May you please Wikipedia ZIM problems here https://github.com/openzim/mwoffliner. That said, about the "space problem", not sure to fully understand/agree this is a bug. Does the online Wikipedia online Wikipedia has also that behaviour?

from kiwix-js.

@kelson42 Not really a bug but a missing feature that affects layout. Top image shows article in kiwix (desktop as well as kiwix-js); bottom image shows article on Wikipedia Mobile live website. Contents box is missing, leaving large white space. Will report on mwoffliner.

from kiwix-js.

See #149 for stylesheet switching.

from kiwix-js.

@kelson42 , this branch of kiwix-js - https://github.com/kiwix/kiwix-js/tree/Preload-stylesheets - allows the info box to be fully responsive and eliminates the dead white space. The infobox floats right, but still stacks below the article lead as the screen narrows. The two examples below show it 1) floating when the screen is wide, and 2) stacking responsively when the screen is narrow. Personally I think this provides better use of limited screen space .(Wikipedia reserves space on the left for the contents box, but the ZIM files don't have a contents box, making the space redundant.) This is achieved with a couple of very minor changes to two mobile stylesheets. I can provide details if it's of interest.

EDIT: The article is displayed from wikipedia_en_medicine_novid_2017-07.zim.

from kiwix-js.

@Jaifroid Great :) yes please share here the details of your CSS changes and I'll try to bring to port them to mwoffliner.

Remark: The Wikipedia mobile layout has indeed the table-of-content (TOC). This is something we do not want to introduce in the ZIM file HTML itself as this feature is provided by the app itself on iOS and Android (still missing for kiwix-desktop).

from kiwix-js.

@kelson42 , OK, if it's useful, the changes are:

In mobile.css, comment out the two lines indicated below:

.mw-body h3, .mw-body h2 {
    /*clear: both;*/
    /*width: 100%;*/
    margin-bottom: 0.5em;
    border-bottom: solid 1px #eaecf0;
    font-family: 'Linux Libertine','Georgia','Times',serif;
}

In inserted_style_mobile.css, search for section below and comment out indicated declarations:

/*.content h2{clear:both}*/
.content h2 .edit-page{font-size:0.66666667em}.content h3 .edit-page{font-size:0.83333333em}.content .edit-page{display:inline-block;visibility:hidden}.content .open-block .edit-page{visibility:visible}
.content .section-heading { /*width:100%;*/
    border-bottom: solid 1px #eaecf0;
    margin-bottom: 0.5em
}

It may be possible to implement the second change as an override in mobile.css, since that is your custom file, but I haven't experimented with trying to keep the changes in the one file yet. If IOS and Android apps implement the contents box, then I guess you'd need to ensure the contents box doesn't clear the infobox float, and that the infobox stacks correctly beneath the contents box on small screen widths.

from kiwix-js.

@mossroy @Jaifroid I have create with MWoffliner 1.9.4 a new version of the article "Piractam" http://tmp.kiwix.org/wikipedia_en_piracetam_2019-07.zim. I wonder if this ticket and openzim/mwoffliner#96 and pertinent? Maybe also part of the custom stylesheet on Kiwix-JS might be removed?

from kiwix-js.

@mossroy @Jaifroid What should we do here? I think none of us if comfortable with having the reader tweaking the content of the ZIM file, and I think we don't have any open tickets anymore regarding this on MWoffliner side. Therefore, could we close it?

from kiwix-js.

@kelson42 I've just tested your Piracetam ZIM, and it is now working fine. So, I would say a major part of this issue has been solved on mwoffliner. I know @mossroy wants Kiwix JS to be fully generic and not to have any code relating only to Mediawiki ZIMs, for example, so I don't think there's anything more to do here. I'm closing this issue for now.

from kiwix-js.

I agree

from kiwix-js.