mirror of
https://github.com/kiwix/kiwix-js.git
synced 2025-09-24 04:54:51 -04:00
Add a simple CSS to use "rem" sizes. Fixes #8
Prefix all the rules in the mediawiki CSS, so that they only apply inside the "articleContent" div Add back/forward buttons. Fixes #1
This commit is contained in:
mossroy
parent
da03c7c309
commit
8200762f74
57
css/app.css
57
css/app.css
@ -1,50 +1,17 @@
|
|||||||
/* Colors and the rest of appearance properties are defined in this file.
|
/* Main CSS of the application */
|
||||||
We've added a few sample properties to get you started */
|
|
||||||
|
|
||||||
* {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
-moz-box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
/* Reset base size */
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
/* Set font size relative to base size */
|
||||||
|
font-size: 1.4rem;
|
||||||
|
|
||||||
|
/* Remove spacing to avoid losing borders around the screen*/
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: sans-serif;
|
}
|
||||||
line-height: 1.6;
|
|
||||||
background: #fefefe;
|
|
||||||
|
|
||||||
}
|
input[type=text], textarea, select, input[type=button], input[type=file] {
|
||||||
|
/* Set font size in form elements too */
|
||||||
h1 {
|
font-size: 1.3rem;
|
||||||
background: #444545;
|
|
||||||
color: #fff;
|
|
||||||
padding: 0.75rem 0.5rem;
|
|
||||||
text-shadow: 2px 2px 1px #111;
|
|
||||||
font-weight: normal;
|
|
||||||
border-bottom: 1px solid #444;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content {
|
|
||||||
border-top: 1px solid #993;
|
|
||||||
padding: 1rem 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 1rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
height: 3.8rem;
|
|
||||||
margin: 0 0 1rem;
|
|
||||||
padding: 0 1.5rem;
|
|
||||||
background: #fafafa;
|
|
||||||
border: 0.1rem solid #a6a6a6;
|
|
||||||
border-radius: 0.2rem;
|
|
||||||
font-size: 1.6rem;
|
|
||||||
line-height: 3.8rem;
|
|
||||||
color: #333;
|
|
||||||
text-align: center;
|
|
||||||
text-shadow: 0.1rem 0.1rem 0 rgba(255,255,255,0.3);
|
|
||||||
text-decoration: none;
|
|
||||||
outline: none;
|
|
||||||
}
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
206
index.html
206
index.html
@ -1,100 +1,106 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
|
||||||
<title>Evopedia</title>
|
<title>Evopedia</title>
|
||||||
<meta name="description" content="Offline wikipedia reader">
|
<meta name="description" content="Offline wikipedia reader">
|
||||||
<meta name="viewport" content="width=device-width">
|
<meta name="viewport" content="width=device-width">
|
||||||
<!--
|
<!--
|
||||||
Port of Evopedia (offline wikipedia reader) in HTML5/Javascript, with Firefox OS as the primary target
|
Port of Evopedia (offline wikipedia reader) in HTML5/Javascript, with Firefox OS as the primary target
|
||||||
The original application is at http://www.evopedia.info/
|
The original application is at http://www.evopedia.info/
|
||||||
It uses wikipedia dumps located at http://dumpathome.evopedia.info/dumps/finished
|
It uses wikipedia dumps located at http://dumpathome.evopedia.info/dumps/finished
|
||||||
|
|
||||||
Author : Mossroy - mossroy@free.fr
|
Author : Mossroy - mossroy@free.fr
|
||||||
Math image algorithm contributed by christian@evopedia.info
|
Math image algorithm contributed by christian@evopedia.info
|
||||||
|
|
||||||
License:
|
License:
|
||||||
|
|
||||||
This program is free software; you can redistribute it and/or modify it
|
This program is free software; you can redistribute it and/or modify it
|
||||||
under the terms of the GNU General Public License as published by the
|
under the terms of the GNU General Public License as published by the
|
||||||
Free Software Foundation; either version 3 of the License, or (at your
|
Free Software Foundation; either version 3 of the License, or (at your
|
||||||
option) any later version.
|
option) any later version.
|
||||||
|
|
||||||
This program is distributed in the hope that it will be useful, but
|
This program is distributed in the hope that it will be useful, but
|
||||||
WITHOUT ANY WARRANTY; without even the implied warranty of
|
WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
|
||||||
General Public License for more details.
|
General Public License for more details.
|
||||||
|
|
||||||
You should have received a copy of the GNU General Public
|
You should have received a copy of the GNU General Public
|
||||||
License along with this program; if not, see
|
License along with this program; if not, see
|
||||||
<http://www.gnu.org/licenses/>.
|
<http://www.gnu.org/licenses/>.
|
||||||
|
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<link rel="stylesheet" href="css/mediawiki-main.css">
|
<link rel="stylesheet" href="css/mediawiki-main.css">
|
||||||
</head>
|
<link rel="stylesheet" href="css/app.css">
|
||||||
<body>
|
</head>
|
||||||
<h1>Evopedia</h1>
|
<body>
|
||||||
<input type="button" id="showHideAbout" value="About" />
|
<h1>Evopedia</h1>
|
||||||
<div id="about" style="display: none;">
|
<input type="button" id="showHideAbout" value="About" />
|
||||||
This is a preliminary work on the port of Evopedia (offline wikipedia reader) in HTML5/Javascript, with Firefox OS as the primary target
|
<div id="about" style="display: none;">
|
||||||
<br />
|
This is a preliminary work on the port of Evopedia (offline wikipedia reader) in HTML5/Javascript, with Firefox OS as the primary target
|
||||||
The original application is at <a href="http://www.evopedia.info/">http://www.evopedia.info/</a>
|
<br />
|
||||||
<br />
|
The original application is at <a href="http://www.evopedia.info/">http://www.evopedia.info/</a>
|
||||||
<br />
|
<br />
|
||||||
To use it, you have to first download locally a dump from <a href="http://dumpathome.evopedia.info/dumps/finished">http://dumpathome.evopedia.info/dumps/finished</a> (with a Bittorrent client).
|
<br />
|
||||||
<br />
|
To use it, you have to first download locally a dump from <a href="http://dumpathome.evopedia.info/dumps/finished">http://dumpathome.evopedia.info/dumps/finished</a> (with a Bittorrent client).
|
||||||
<ul>
|
<br />
|
||||||
<li>On desktops, it works on recent Firefox and Chrome, and maybe on other browsers. In this case, you have to select manually some files from your dump (see below)</li>
|
<ul>
|
||||||
<li>On the Firefos OS simulator, you have to put the archive files in a "fake-sdcard" folder of your firefox profile (ex : ~/.mozilla/firefox/xxxx.default/extensions/r2d2b2g@mozilla.org/profile/fake-sdcard). It looks for file titles.idx in it. You need to install the application from the dashboard of the simulator (due to security restrictions in Firefox OS : only certified webapps can access the sdcard)</li>
|
<li>On desktops, it works on recent Firefox and Chrome, and maybe on other browsers. In this case, you have to select manually some files from your dump (see below)</li>
|
||||||
<li>On a real Firefox OS device, you simply have to put the archive files anywhere in your sdcard, so that it finds titles.idx on it. For now, the application has to be installed manually (use the push feature of the Firefos OS Simulator)</li>
|
<li>On the Firefos OS simulator, you have to put the archive files in a "fake-sdcard" folder of your firefox profile (ex : ~/.mozilla/firefox/xxxx.default/extensions/r2d2b2g@mozilla.org/profile/fake-sdcard). It looks for file titles.idx in it. You need to install the application from the dashboard of the simulator (due to security restrictions in Firefox OS : only certified webapps can access the sdcard)</li>
|
||||||
</ul>
|
<li>On a real Firefox OS device, you simply have to put the archive files anywhere in your sdcard, so that it finds titles.idx on it. For now, the application has to be installed manually (use the push feature of the Firefos OS Simulator)</li>
|
||||||
<br />
|
</ul>
|
||||||
It's still a beta version : there are many many ways this could be enhanced (suggestions and patches are welcome : the source code is on <a href="https://github.com/mossroy/evopedia-html5">github</a>). In particular :
|
<br />
|
||||||
<ul>
|
It's still a beta version : there are many many ways this could be enhanced (suggestions and patches are welcome : the source code is on <a href="https://github.com/mossroy/evopedia-html5">github</a>). In particular :
|
||||||
<li>The performance has to be optimized when searching titles and reading an article</li>
|
<ul>
|
||||||
<li>Some searches (for example with prefix "a" on the French dump) do not give any result even if they should</li>
|
<li>The performance has to be optimized when searching titles and reading an article</li>
|
||||||
<li>In some cases, the links inside an article do not work, or do not lead to the right article</li>
|
<li>Some searches (for example with prefix "a" on the French dump) do not give any result even if they should</li>
|
||||||
<li>It is not easy to use on the Peak device from Geeksphone because the buttons and inputs are too small</li>
|
<li>In some cases, the links inside an article do not work, or do not lead to the right article</li>
|
||||||
<li>Some features of the original application still have to be implemented : in particular geolocation of articles</li>
|
<li>It is not easy to use on the Peak device from Geeksphone because the buttons and inputs are too small</li>
|
||||||
</ul>
|
<li>Some features of the original application still have to be implemented : in particular geolocation of articles</li>
|
||||||
The <a href="https://github.com/mossroy/evopedia-html5/issues">bugtracker</a> is on github too.
|
</ul>
|
||||||
</div>
|
The <a href="https://github.com/mossroy/evopedia-html5/issues">bugtracker</a> is on github too.
|
||||||
<div id="openLocalFiles" style="display: none;">
|
</div>
|
||||||
<br /> Please select the file titles.idx :<br /> <input type="file"
|
<div id="openLocalFiles" style="display: none;">
|
||||||
id="titleFile" /><br /> Please select the files wikipedia_*.dat
|
<br /> Please select the file titles.idx :<br /> <input type="file"
|
||||||
from the same dump :<br /> <input type="file" id="dataFiles" multiple />
|
id="titleFile" /><br /> Please select the files wikipedia_*.dat
|
||||||
<br /> Please select the file math.idx from the same dump:<br /> <input type="file"
|
from the same dump :<br /> <input type="file" id="dataFiles" multiple />
|
||||||
id="mathIndexFile" /><br /> Please select the file math.dat from the
|
<br /> Please select the file math.idx from the same dump:<br /> <input type="file"
|
||||||
same dump:<br /> <input type="file" id="mathDataFile" /><br />
|
id="mathIndexFile" /><br /> Please select the file math.dat from the
|
||||||
</div>
|
same dump:<br /> <input type="file" id="mathDataFile" /><br />
|
||||||
<div id="scanningForArchives" style="display: none;">
|
</div>
|
||||||
<br /> Scanning your sdcard for archives... Please wait <img src="img/spinner.gif" />
|
<div id="scanningForArchives" style="display: none;">
|
||||||
</div>
|
<br /> Scanning your sdcard for archives... Please wait <img src="img/spinner.gif" />
|
||||||
<div id="chooseArchiveFromLocalStorage" style="display: none;">
|
</div>
|
||||||
<br /> Please select the archive you want to use : <select id="archiveList"></select>
|
<div id="chooseArchiveFromLocalStorage" style="display: none;">
|
||||||
</div>
|
<br /> Please select the archive you want to use : <select id="archiveList"></select>
|
||||||
<br /> Find titles starting with :
|
</div>
|
||||||
<input type="text" id="prefix" value="" />
|
<br /> Find titles starting with :
|
||||||
<input type="button" id="searchTitles" value="Search titles" />
|
<input type="text" id="prefix" value="" />
|
||||||
<img id="searchingForTitles" src="img/spinner.gif" style="display: none;"/>
|
<input type="button" id="searchTitles" value="Search titles" />
|
||||||
<br /> Choose a title from the filtered list :
|
<img id="searchingForTitles" src="img/spinner.gif" style="display: none;"/>
|
||||||
<select id="titleList"></select>
|
<br /><br /> Choose a title from the filtered list :
|
||||||
<br />
|
<select id="titleList"></select>
|
||||||
<input type="button" id="readData" value="Read article from dump" />
|
<br />
|
||||||
<div id="readingArticle" style="display: none;">
|
<br />
|
||||||
Reading article <span id="articleName"></span> from dump... Please wait <img src="img/spinner.gif" />
|
<input type="button" id="readData" value="Read article from dump" />
|
||||||
</div>
|
<div id="readingArticle" style="display: none;">
|
||||||
<div id="articleContent"> </div>
|
Reading article <span id="articleName"></span> from dump... Please wait <img src="img/spinner.gif" />
|
||||||
<hr />
|
</div>
|
||||||
|
<div id="articleContent"> </div>
|
||||||
<!-- Using require.js, a module system for javascript, include the
|
<br />
|
||||||
js files. This loads "main.js", which in turn can load other
|
<div id="navigationButtons">
|
||||||
files, all handled by require.js:
|
<input type="button" id="btnBack" value="Back"/>
|
||||||
http://requirejs.org/docs/api.html#jsfiles -->
|
<input type="button" id="btnForward" value="Forward"/>
|
||||||
<script type="text/javascript"
|
</div>
|
||||||
data-main="js/init.js"
|
|
||||||
src="js/lib/require.js"></script>
|
<!-- Using require.js, a module system for javascript, include the
|
||||||
</body>
|
js files. This loads "main.js", which in turn can load other
|
||||||
</html>
|
files, all handled by require.js:
|
||||||
|
http://requirejs.org/docs/api.html#jsfiles -->
|
||||||
|
<script type="text/javascript"
|
||||||
|
data-main="js/init.js"
|
||||||
|
src="js/lib/require.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
@ -31,7 +31,12 @@ define(function(require) {
|
|||||||
$('#prefix').on('keyup', function(e) {
|
$('#prefix').on('keyup', function(e) {
|
||||||
onKeyUpPrefix(e);
|
onKeyUpPrefix(e);
|
||||||
});
|
});
|
||||||
|
$('#btnBack').on('click', function(e) {
|
||||||
|
history.back();
|
||||||
|
});
|
||||||
|
$('#btnForward').on('click', function(e) {
|
||||||
|
history.forward();
|
||||||
|
});
|
||||||
|
|
||||||
// Detect if DeviceStorage is available
|
// Detect if DeviceStorage is available
|
||||||
var storage = null;
|
var storage = null;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user