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

Add a simple CSS to use "rem" sizes. Fixes #8

Browse Source 
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 2013-07-11 22:40:27 +02:00
parent da03c7c309
commit 8200762f74
4 changed files with 669 additions and 692 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
css/app.css
View File

@ -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;
} }
h1 { input[type=text], textarea, select, input[type=button], input[type=file] {
background: #444545; /* Set font size in form elements too */
color: #fff; font-size: 1.3rem;
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;
} }

1091
css/mediawiki-main.css
View File

File diff suppressed because it is too large Load Diff

10
index.html
View File

@ -33,6 +33,7 @@
--> -->
<link rel="stylesheet" href="css/mediawiki-main.css"> <link rel="stylesheet" href="css/mediawiki-main.css">
<link rel="stylesheet" href="css/app.css">
</head> </head>
<body> <body>
<h1>Evopedia</h1> <h1>Evopedia</h1>
@ -79,15 +80,20 @@
<input type="text" id="prefix" value="" />&nbsp; <input type="text" id="prefix" value="" />&nbsp;
<input type="button" id="searchTitles" value="Search titles" /> <input type="button" id="searchTitles" value="Search titles" />
<img id="searchingForTitles" src="img/spinner.gif" style="display: none;"/> <img id="searchingForTitles" src="img/spinner.gif" style="display: none;"/>
<br /> Choose a title from the filtered list : <br /><br /> Choose a title from the filtered list :
<select id="titleList"></select> <select id="titleList"></select>
<br /> <br />
<br />
<input type="button" id="readData" value="Read article from dump" /> <input type="button" id="readData" value="Read article from dump" />
<div id="readingArticle" style="display: none;"> <div id="readingArticle" style="display: none;">
Reading article <span id="articleName"></span> from dump... Please wait <img src="img/spinner.gif" /> Reading article <span id="articleName"></span> from dump... Please wait <img src="img/spinner.gif" />
</div> </div>
<div id="articleContent">&nbsp;</div> <div id="articleContent">&nbsp;</div>
<hr /> <br />
<div id="navigationButtons">
<input type="button" id="btnBack" value="Back"/>
<input type="button" id="btnForward" value="Forward"/>
</div>
<!-- Using require.js, a module system for javascript, include the <!-- Using require.js, a module system for javascript, include the
js files. This loads "main.js", which in turn can load other js files. This loads "main.js", which in turn can load other

7
js/app.js
View File

@ -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;