kiwix/kiwix-js
1
0
Fork 0
mirror of https://github.com/kiwix/kiwix-js.git synced 2025-09-24 04:54:51 -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

45
www/index.html
View File

@ -189,7 +189,10 @@
</div>
<div id="configuration" style="display: none;" class="category-padding">
<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 />
@ -203,17 +206,43 @@
<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>
<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>
</div>
<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 />
<br />
</div>