kiwix/kiwix-js
1
0
Fork 0
mirror of https://github.com/kiwix/kiwix-js.git synced 2025-09-23 12:36:21 -04:00
Code Issues Packages Projects Releases Wiki Activity

Use Bootstrap panels to organize Configuration page

Browse Source 
See #302 . Apart from panels, I have standardized on the use of Bootstrap grid layout (responsive divs with flexbox) on the page. But the way this works will only become clear if we introduce more options / panels and a non-expert settings section.
This commit is contained in:
Jaifroid 2017-08-29 23:13:06 +01:00
parent 0b6d9b42ac
commit 4ddc9fb266
1 changed files with 52 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
www/index.html
View File

@ -189,37 +189,66 @@
</div>
<div id="configuration" style="display: none;" class="category-padding">
<h2>Configuration</h2>
This application needs a ZIM archive to work. If you did not download one yet, please see the About section
<div id="openLocalFiles" style="display: none;">
Please select the .zim file (or all the .zimaa, .zimab etc in case of a split ZIM file)<br />
<input type="file" id="archiveFiles" multiple class="btn" accept=".zim,.dat,.idx,.txt,.zimaa,.zimab,.zimac,.zimad,.zimae,.zimaf,.zimag,.zimah,.zimai,.zimaj,.zimak,.zimal,.zimam,.ziman,.zimao,.zimap,.zimaq,.zimar,.zimas,.zimat,.zimau,.zimav,.zimaw,.zimax,.zimay,.zimaz,.zimba,.zimbb,.zimbc,.zimbd,.zimbe,.zimbf,.zimbg,.zimbh,.zimbi,.zimbj,.zimbk,.zimbl,.zimbm,.zimbn,.zimbo,.zimbp,.zimbq,.zimbr,.zimbs,.zimbt,.zimbu,.zimbv,.zimbw,.zimbx,.zimby,.zimbz" /><br />
<strong>Only Wikimedia contents (wiki*.zim* files) have been tested</strong> for now. There are known bugs on other contents, and audio/video/dynamic contents are not supported for now.<br />
<div class="container">
<div class="row">
<h2>Configuration</h2>
<div class="column">
This application needs a ZIM archive to work. If you did not download one yet, please see the About section
<div id="openLocalFiles" style="display: none;">
Please select the .zim file (or all the .zimaa, .zimab etc in case of a split ZIM file)<br />
<input type="file" id="archiveFiles" multiple class="btn" accept=".zim,.dat,.idx,.txt,.zimaa,.zimab,.zimac,.zimad,.zimae,.zimaf,.zimag,.zimah,.zimai,.zimaj,.zimak,.zimal,.zimam,.ziman,.zimao,.zimap,.zimaq,.zimar,.zimas,.zimat,.zimau,.zimav,.zimaw,.zimax,.zimay,.zimaz,.zimba,.zimbb,.zimbc,.zimbd,.zimbe,.zimbf,.zimbg,.zimbh,.zimbi,.zimbj,.zimbk,.zimbl,.zimbm,.zimbn,.zimbo,.zimbp,.zimbq,.zimbr,.zimbs,.zimbt,.zimbu,.zimbv,.zimbw,.zimbx,.zimby,.zimbz" /><br />
<strong>Only Wikimedia contents (wiki*.zim* files) have been tested</strong> for now. There are known bugs on other contents, and audio/video/dynamic contents are not supported for now.<br />
</div>
<div id="scanningForArchives" style="display: none;">
<br /> Scanning for archives... Please wait <img src="img/spinner.gif" alt="Please wait..." />
</div>
<div id="chooseArchiveFromLocalStorage" style="display: none;">
<br /> Please select the archive you want to use : <select id="archiveList" class="form-control"></select>
<br /> Click <a id="btnRescanDeviceStorage">here</a> to rescan your SD Cards and internal memory
</div>
</div>
</div>
</div>
<div id="scanningForArchives" style="display: none;">
<br /> Scanning for archives... Please wait <img src="img/spinner.gif" alt="Please wait..." />
</div>
<div id="chooseArchiveFromLocalStorage" style="display: none;">
<br /> Please select the archive you want to use : <select id="archiveList" class="form-control"></select>
<br /> Click <a id="btnRescanDeviceStorage">here</a> to rescan your SD Cards and internal memory
<div class="container">
<div class="row">
<h3>Expert settings</h3>
<div class="column">
<div class="panel panel-danger" id="contentInjectionModeDiv">
<div class="panel-heading">Content injection mode</div>
<div class="panel-body">
Don't touch unless you know what you're doing!
<div class="radio">
<label>
<input type="radio" name="contentInjectionMode" value="jquery" id="jQueryModeRadio" checked>
<strong>JQuery</strong> (slow and memory hungry, but safer)
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="contentInjectionMode" value="serviceworker" id="serviceworkerModeRadio">
<strong>ServiceWorker</strong> (faster but unstable, and not supported by all platforms)
</label>
</div>
</div>
</div>
<div class="panel panel-info" id="apiStatusDiv">
<div class="panel-heading">API Status</div>
<div class="panel-body">
<div id="serviceWorkerStatus"></div>
<div id="messageChannelStatus"></div>
</div>
</div>
</div>
</div>
</div>
<br />
<h2>Expert settings</h2>
<div id="contentInjectionModeDiv">
Do not touch unless you know what you're doing. <br />
Content injection mode : <br/>
<input type="radio" name="contentInjectionMode" value="jquery" id="jQueryModeRadio" checked><label for="jQueryModeRadio">JQuery</label> (slow and memory hungry, but safer)
<br>
<input type="radio" name="contentInjectionMode" value="serviceworker" id="serviceworkerModeRadio"><label for="serviceworkerModeRadio">ServiceWorker</label> (faster but unstable, and not supported by all platforms. In particular, Firefox extensions do not allow ServiceWorkers for now)
</div>
<div id="serviceWorkerStatus"></div>
<div id="messageChannelStatus"></div>
<br />
</div>
<div id="welcomeText" class="container category-padding">
You can search the content of your ZIM archive by typing in the above search field.
<br />It will suggest articles starting with the letters you type.
<br />It will suggest articles starting with the letters you type.
</div>
<!-- List of articles matching the typed prefix -->