From a93e211bf8ecb9f12ddb14876916df6354586d9c Mon Sep 17 00:00:00 2001
From: Jaifroid <egk10@cam.ac.uk>
Date: Mon, 4 Sep 2017 09:23:08 +0100
Subject: [PATCH] UI tweaks

Former-commit-id: d4cd86341aba353f318856e8ccca813132bc80ba [formerly 5cc5804844c786bbce1af7f7f38959c502035632]
Former-commit-id: 2e8e840c60a4708a5bb9f59a73bfcf9839c274c8
---
 bin/Release/AppX/vs.appxrecipe            | 14 ++--
 bin/Release/AppX/www/-/s/style-mobile.css |  4 --
 bin/Release/AppX/www/css/app.css          |  1 +
 bin/Release/AppX/www/index.html           | 24 ++++---
 bin/Release/AppX/www/js/app.js            | 80 ++++++++++++++++++-----
 bin/Release/AppX/www/js/init.js           |  5 +-
 bld/Release/PackageLayout/www/css/app.css | 14 +++-
 www/-/s/style-mobile.css                  |  4 --
 www/css/app.css                           |  1 +
 www/index.html                            | 24 ++++---
 www/js/app.js                             | 80 ++++++++++++++++++-----
 www/js/init.js                            |  5 +-
 12 files changed, 184 insertions(+), 72 deletions(-)

diff --git a/bin/Release/AppX/vs.appxrecipe b/bin/Release/AppX/vs.appxrecipe
index 0e95bc9c..208a9fe9 100644
--- a/bin/Release/AppX/vs.appxrecipe
+++ b/bin/Release/AppX/vs.appxrecipe
@@ -32,7 +32,7 @@
     <AppXManifest Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\bin\Release\AppxManifest.xml">
       <PackagePath>AppxManifest.xml</PackagePath>
       <ReRegisterAppIfChanged>true</ReRegisterAppIfChanged>
-      <Modified>2017-09-02T19:02:36.909</Modified>
+      <Modified>2017-09-04T08:15:43.747</Modified>
     </AppXManifest>
   </ItemGroup>
   <ItemGroup>
@@ -447,7 +447,7 @@
     </AppxPackagedFile>
     <AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\-\s\style-mobile.css">
       <PackagePath>www\-\s\style-mobile.css</PackagePath>
-      <Modified>2017-08-27T17:57:14.412</Modified>
+      <Modified>2017-09-03T14:00:27.054</Modified>
     </AppxPackagedFile>
     <AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\-\s\style.css">
       <PackagePath>www\-\s\style.css</PackagePath>
@@ -459,7 +459,7 @@
     </AppxPackagedFile>
     <AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\css\app.css">
       <PackagePath>www\css\app.css</PackagePath>
-      <Modified>2017-09-02T18:45:52.970</Modified>
+      <Modified>2017-09-03T13:50:12.714</Modified>
     </AppxPackagedFile>
     <AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\css\bootstrap-theme.css">
       <PackagePath>www\css\bootstrap-theme.css</PackagePath>
@@ -475,7 +475,7 @@
     </AppxPackagedFile>
     <AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\index.html">
       <PackagePath>www\index.html</PackagePath>
-      <Modified>2017-09-02T17:51:15.274</Modified>
+      <Modified>2017-09-04T08:15:33.300</Modified>
     </AppxPackagedFile>
     <AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\favicon.ico">
       <PackagePath>www\favicon.ico</PackagePath>
@@ -603,11 +603,11 @@
     </AppxPackagedFile>
     <AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\js\app.js">
       <PackagePath>www\js\app.js</PackagePath>
-      <Modified>2017-09-02T19:02:15.853</Modified>
+      <Modified>2017-09-04T07:31:58.415</Modified>
     </AppxPackagedFile>
     <AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\js\init.js">
       <PackagePath>www\js\init.js</PackagePath>
-      <Modified>2017-09-02T18:18:55.003</Modified>
+      <Modified>2017-09-03T18:46:29.761</Modified>
     </AppxPackagedFile>
     <AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\js\lib\abstractFilesystemAccess.js">
       <PackagePath>www\js\lib\abstractFilesystemAccess.js</PackagePath>
@@ -1532,7 +1532,7 @@
     <AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\bin\Release\ReverseMap\resources.pri">
       <PackagePath>resources.pri</PackagePath>
       <ReRegisterAppIfChanged>true</ReRegisterAppIfChanged>
-      <Modified>2017-09-02T18:55:47.821</Modified>
+      <Modified>2017-09-03T21:44:03.212</Modified>
     </AppxPackagedFile>
   </ItemGroup>
   <ItemGroup>
diff --git a/bin/Release/AppX/www/-/s/style-mobile.css b/bin/Release/AppX/www/-/s/style-mobile.css
index bee1d0bb..ddd461ec 100644
--- a/bin/Release/AppX/www/-/s/style-mobile.css
+++ b/bin/Release/AppX/www/-/s/style-mobile.css
@@ -4255,10 +4255,6 @@ i > dfn {
     font-style: italic;
 }
 
-blockquote {
-    quotes: "" "";
-}
-
 .pas-sur-mobile {
     display: none;
 }
diff --git a/bin/Release/AppX/www/css/app.css b/bin/Release/AppX/www/css/app.css
index 79816271..e06bda3e 100644
--- a/bin/Release/AppX/www/css/app.css
+++ b/bin/Release/AppX/www/css/app.css
@@ -92,6 +92,7 @@ body {
 }
 
 .articleIFrame {
+    /*height: 2000px;*/
     width: 100%;
     border: 0;
 }
diff --git a/bin/Release/AppX/www/index.html b/bin/Release/AppX/www/index.html
index 781eb0a0..2532e68b 100644
--- a/bin/Release/AppX/www/index.html
+++ b/bin/Release/AppX/www/index.html
@@ -39,7 +39,7 @@
     <link href="css/bootstrap.css" rel="stylesheet" media="screen" />
     <link href="css/bootstrap-theme.css" rel="stylesheet" media="screen" />
 </head>
-<body role="application">
+<body role="application" class="dark">
     <!-- Modal info -->
     <div id="myModal" class="modal">
 
@@ -76,7 +76,7 @@
          </div>
 
     </div> 
-    <section id="search-article" role="region" class="dark">
+    <section id="search-article" role="region">
         <header id="top">
             <nav id="navbar" role="navigation">
                 <div class="navbar-header" id="container">
@@ -353,6 +353,10 @@
                             <div class="panel panel-info" id="displaySettingsDiv">
                                 <div class="panel-heading">Please select the display option:</div>
                                 <div class="panel-body">
+                                    <p style="text-indent: -22px; margin-left: 20px;">
+                                        <input type="checkbox" name="hideToolbar" id="hideToolbarCheck">
+                                        <b>&nbsp;Hide the top toolbar while scrolling</b> (if hidden, tap the arrow on the bottom toolbar once to reveal, twice to return to top of page)
+                                    </p>
                                     <p style="text-indent: -22px; margin-left: 20px;">
                                         <input type="checkbox" name="cssCacheMode" id="cssCacheModeCheck">
                                         <b>&nbsp;Use locally cached display styles</b> (<i>recommended</i> for Wikipedia ZIM)
@@ -442,14 +446,14 @@
                 to avoid the top button to be in the scrollbar area :
                 on a device, it can trigger a "page down" of the scrollbar -->
                 <!-- div class="restrictedSize" -->
-                        <span class="label label-default" id="lblZoom"></span>
-                        <a class="btn btn-primary btn-sm pull-left" id="btnHomeBottom" title="Home"><span class="glyphicon glyphicon-home"></span></a>
-                        <a class="btn btn-sm col-sm-pull-3" id="btnZoomout" title="Zoom out"><span class="glyphicon glyphicon-zoom-out"></span></a>
-                        <a class="btn btn-sm" id="btnBack" title="Back"><span class="glyphicon glyphicon-circle-arrow-left"></span></a>&nbsp;
-                        <span id="appStatus"></span>
-                        <a class="btn btn-sm" id="btnForward" title="Forward"><span class="glyphicon glyphicon-circle-arrow-right"></span></a>
-                        <a class="btn btn-sm col-sm-pull-7" id="btnZoomin" title="Zoom in"><span class="glyphicon glyphicon-zoom-in"></span></a>
-                        <a class="btn btn-primary btn-sm pull-right" id="btnTop" title="Top" href="#top" style="margin-right: 1em;"><span class="glyphicon glyphicon-arrow-up"></span></a>
+                    <span class="label label-default" id="lblZoom"></span>
+                    <a class="btn btn-primary btn-sm pull-left" id="btnHomeBottom" title="Home"><span class="glyphicon glyphicon-home"></span></a>
+                    <a class="btn btn-sm pull-left" id="btnBack" title="Back" style="margin-left:0.9em;"><span class="glyphicon glyphicon-circle-arrow-left"></span></a>
+                    <a class="btn btn-sm col-sm-pull-3" id="btnZoomout" title="Zoom out" style="margin-right:0.4em;"><span class="glyphicon glyphicon-zoom-out"></span></a>
+                    <span id="appStatus"></span>
+                    <a class="btn btn-sm col-sm-pull-7" id="btnZoomin" title="Zoom in"><span class="glyphicon glyphicon-zoom-in"></span></a>
+                    <a class="btn btn-primary btn-sm pull-right" id="btnTop" title="Top" href="#top" style="margin-right: 1em;"><span class="glyphicon glyphicon-arrow-up"></span></a>
+                    <a class="btn btn-sm pull-right" id="btnForward" title="Forward" style="margin-right:0.5em;"><span class="glyphicon glyphicon-circle-arrow-right"></span></a>
                 <!-- /div -->
             </div>
         </footer>
diff --git a/bin/Release/AppX/www/js/app.js b/bin/Release/AppX/www/js/app.js
index 1f249e32..6c8d24db 100644
--- a/bin/Release/AppX/www/js/app.js
+++ b/bin/Release/AppX/www/js/app.js
@@ -52,11 +52,11 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies', 'abstractFile
          * Resize the IFrame height, so that it fills the whole available height in the window
          */
         function resizeIFrame() {
-            var height = $(window).outerHeight()
-                - $("#top").outerHeight(true)
-                - $("#articleListWithHeader").outerHeight(true)
-                // TODO : this 5 should be dynamically computed, and not hard-coded
-                - 5;
+            var height = $(window).outerHeight() + 100;
+            //        - $("#top").outerHeight(true)
+            //        - $("#articleListWithHeader").outerHeight(true)
+            //        // TODO : this 5 should be dynamically computed, and not hard-coded
+            //        - 5;
             $(".articleIFrame").css("height", height + "px");
         }
         $(document).ready(resizeIFrame);
@@ -251,7 +251,17 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies', 'abstractFile
             return false;
         });
         $('#btnTop').on('click', function (e) {
+            //Ensures toolbar is shown after hidden
+            var thisdoc = document.getElementById('top');
+            if (params.hideToolbar && thisdoc.style.zIndex == "0") {
+                thisdoc.style.zIndex = "1";
+                document.getElementById('article').style.paddingTop = "38px";
+                return;
+            }
+            thisdoc.style.zIndex = "0";
+            document.getElementById('article').style.paddingTop = "0";
             $("#articleContent").contents().scrollTop(0);
+            $("#search-article").scrollTop(0);
             // We return true, so that the link to #top is still triggered (useful in the About section)
             return true;
         });
@@ -377,9 +387,9 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies', 'abstractFile
             //Doh, why are you testing for this? Surely you want to jump to the file if it's been clicked on? There was a reason @REMIND_ME....
             //var comboArchiveList = document.getElementById('archiveList');
             //if (comboArchiveList.options.length == 1) {
-                //console.log("***Only one item, so, fire away...");
-                $('#openLocalFiles').hide();
-                setLocalArchiveFromArchiveList();
+            //console.log("***Only one item, so, fire away...");
+            $('#openLocalFiles').hide();
+            setLocalArchiveFromArchiveList();
             //}
         });
 
@@ -390,7 +400,7 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies', 'abstractFile
             } else {
                 //@TODO enable and provide classic filepicker
             }
-        }); 
+        });
         $('#archiveFiles').on('click', function () {
             if (typeof Windows !== 'undefined' && typeof Windows.Storage !== 'undefined') {
                 //UWP FolderPicker
@@ -398,7 +408,7 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies', 'abstractFile
             } else {
                 //@TODO hide folderpicker
             }
-        }); 
+        });
         document.getElementById('downloadTrigger').addEventListener('click', function () {
             kiwixServe.requestXhttpData(params.kiwixDownloadLink);
         });
@@ -431,6 +441,11 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies', 'abstractFile
             params.imageDisplay = this.checked ? true : false;
             cookies.setItem('imageDisplay', params.imageDisplay, Infinity);
         });
+        $('input:checkbox[name=hideToolbar]').on('change', function (e) {
+            params.hideToolbar = this.checked ? true : false;
+            cookies.setItem('hideToolbar', params.hideToolbar, Infinity);
+            checkToolbar();
+        });
         $('input:checkbox[name=cssUIDarkTheme]').on('change', function (e) {
             params.cssUITheme = this.checked ? 'dark' : 'light';
             cookies.setItem('cssUITheme', params.cssUITheme, Infinity);
@@ -453,7 +468,7 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies', 'abstractFile
             }
             if (value == 'light') {
                 document.getElementsByTagName('body')[0].classList.remove("dark");
-                document.getElementById('search-article').classList.remove("dark");
+                //document.getElementById('search-article').classList.remove("dark");
                 //document.getElementById('article').classList.remove("dark");
                 //document.getElementById('navbar').classList.add("navbar-default");
                 //document.getElementById('navbar').classList.remove("dark");
@@ -484,6 +499,38 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies', 'abstractFile
             cookies.setItem('useMathJax', params.useMathJax, Infinity);
             params.themeChanged = true;
         });
+        function checkToolbar() {
+            var thisdoc = document.getElementById('top');
+            if (!params.hideToolbar) {
+                var thisdoc = document.getElementById('top');
+                thisdoc.style.position = "fixed";
+                thisdoc.style.zIndex = "1";
+                document.getElementById('article').style.paddingTop = "38px";
+                return;
+            }
+            document.getElementById('article').style.paddingTop = "0";
+            thisdoc.style.position = "relative";
+            window.frames[0].removeEventListener('scroll', hideToolbar);
+            window.frames[0].addEventListener('scroll', hideToolbar); 
+            function hideToolbar() {
+                if (params.hideToolbar) {
+                    var thisdoc = document.getElementById('top');
+                    if (window.frames[0].frameElement.contentDocument.body.scrollTop == 0) {
+                        var thisdoc = document.getElementById('top');
+                        thisdoc.style.position = "relative";
+                        document.getElementById('article').style.paddingTop = "0";
+                        thisdoc.style.zIndex = "0";
+                        return;
+                        //thisdoc.style.zIndex = "0";
+                    }
+                    if (!thisdoc.style.position || thisdoc.style.position == "relative") {
+                        document.getElementById('top').style.position = "fixed";
+                        //thisdoc.style.zIndex = "0";
+                    }
+                }
+            }
+        }
+
         $(document).ready(function (e) {
             // Set initial behaviour (see also init.js)
             if (params.cssTheme == "dark") document.getElementById('footer').classList.add("darkfooter");
@@ -1472,11 +1519,11 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies', 'abstractFile
             var dropup = '<span class="dropup"><button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Contents <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu2" style="max-height:' + window.innerHeight * 0.75 + 'px; overflow-y: auto;">';
             headings.forEach(function (heading) {
                 if (/^h1$/i.test(heading.tagName))
-                    dropup = dropup + '<li><a href="#" data-heading-id="' + heading.id + '">' + heading.textContent + '</a></li>';
+                    dropup = dropup + '<li style="font-size:' + params.relativeFontSize + '%;"><a href="#" data-heading-id="' + heading.id + '">' + heading.textContent + '</a></li>';
                 else if (/^h2$/i.test(heading.tagName))
-                    dropup = dropup + '<li style="font-size:90%;"><a href="#" data-heading-id="' + heading.id + '">' + heading.textContent + '</a></li>';
+                    dropup = dropup + '<li style="font-size:' + ~~(params.relativeFontSize * 0.9) + '%;"><a href="#" data-heading-id="' + heading.id + '">' + heading.textContent + '</a></li>';
                 else if (/^h3$/i.test(heading.tagName))
-                    dropup = dropup + '<li style="font-size:75%;"><a href="#" data-heading-id="' + heading.id + '">' + heading.textContent + '</a></li>';
+                    dropup = dropup + '<li style="font-size:' + ~~(params.relativeFontSize * 0.75) + '%;"><a href="#" data-heading-id="' + heading.id + '">' + heading.textContent + '</a></li>';
                 //Skip smaller headings (if there are any) to avoid making list too long
             });
             dropup = dropup + '</ul></span>'
@@ -1498,6 +1545,7 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies', 'abstractFile
             $("#articleContent").contents().scrollTop(0);
             $('#articleContent').contents().find('body').html(htmlArticle);
 
+            checkToolbar();
             setupTableOfContents();
 
             var makeLink = uiUtil.makeReturnLink(dirEntry); //[kiwix-js #127]
@@ -1583,8 +1631,8 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies', 'abstractFile
                 //This prevents transparency from working in the bottom toolbar. Setting the style
                 //for iframe height + 30 fixes the issue, and has no effect on other browsers
                 var ele = document.getElementById('articleContent');
-                var y = ~~ele.style.height.match(/[\d.]+/)[0];
-                y += 30;
+                var y = window.outerHeight + 100; //~~ele.style.height.match(/[\d.]+/)[0];
+                //y += 30;
                 ele.style.height = y + "px";
 
                 loadImages();
diff --git a/bin/Release/AppX/www/js/init.js b/bin/Release/AppX/www/js/init.js
index 612d44c0..450bba38 100644
--- a/bin/Release/AppX/www/js/init.js
+++ b/bin/Release/AppX/www/js/init.js
@@ -35,9 +35,8 @@ params['cssCache'] = getCookie('cssCache') != null ? getCookie('cssCache') : tru
 params['cssTheme'] = getCookie('cssTheme') || 'light'; //Set default to 'light' or 'dark' to use respective themes for Wiki articles
 params['cssUITheme'] = getCookie('cssUITheme') || 'light'; //Set default to 'light' or 'dark' to use respective themes for UI
 params['imageDisplay'] = getCookie('imageDisplay') != null ? getCookie('imageDisplay') : true; //Set default to display images from Zim
-//params['imageDisplay'] = params['imageDisplay'] == "false" ? false : (params['imageDisplay'] == "true" ? true : params['imageDisplay']);
+params['hideToolbar'] = getCookie('hideToolbar') != null ? getCookie('hideToolbar') : false; //Set default to hide the top toolbar on scroll
 params['useMathJax'] = getCookie('useMathJax') != null ? getCookie('useMathJax') : true; //Set default to true to display math formulae with MathJax, false to use fallback SVG images only
-params['allowInternetAccess'] = params['allowInternetAccess'] || false; //Set default to false to prevent accidental Intenet data usage (do not get value from cookie, should be explicitly set by user on a per-session basis)
 
 //Do not touch these values unless you know what they do! Some are global variables, some are set programmatically
 params['falFileToken'] = params['falFileToken'] || "zimfile"; //UWP support
@@ -46,10 +45,12 @@ params['localStorage'] = params['localStorage'] || "";
 params['pickedFile'] = params['pickeFile'] || "";
 params['pickedFolder'] = params['pickedFolder'] || "";
 params['themeChanged'] = params['themeChanged'] || false;
+params['allowInternetAccess'] = params['allowInternetAccess'] || false; //Do not get value from cookie, should be explicitly set by user on a per-session basis
 
 //Initialize checkbox and radio values
 document.getElementById('cssCacheModeCheck').checked = params.cssCache;
 document.getElementById('imageDisplayModeCheck').checked = params.imageDisplay;
+document.getElementById('hideToolbarCheck').checked = params.hideToolbar;
 document.getElementById('cssWikiDarkThemeCheck').checked = params.cssTheme == 'dark' ? true : false;
 document.getElementById('cssUIDarkThemeCheck').checked = params.cssUITheme == 'dark' ? true : false;
 document.getElementById('useMathJaxRadio' + (params.useMathJax ? 'True' : 'False')).checked = true;
diff --git a/bld/Release/PackageLayout/www/css/app.css b/bld/Release/PackageLayout/www/css/app.css
index c32d72ac..e06bda3e 100644
--- a/bld/Release/PackageLayout/www/css/app.css
+++ b/bld/Release/PackageLayout/www/css/app.css
@@ -92,6 +92,7 @@ body {
 }
 
 .articleIFrame {
+    /*height: 2000px;*/
     width: 100%;
     border: 0;
 }
@@ -166,7 +167,13 @@ pre {
     color: lightblue;
 }
 
-.dark, .dark .panel {
+.dark {
+    color: lightgray !important;
+    background: black !important;
+    border-color: darkgray;
+}
+
+.dark .panel {
     color: lightgray !important;
     background: #222 !important;
     border-color: darkgray;
@@ -191,6 +198,11 @@ pre {
     color: lightblue !important;
 }
 
+.dropdown {
+    width: 100%;
+    max-width: 300px;
+}
+
 .dark .dropdown {
     color: #222 !important;
     background-color: lightblue !important;
diff --git a/www/-/s/style-mobile.css b/www/-/s/style-mobile.css
index bee1d0bb..ddd461ec 100644
--- a/www/-/s/style-mobile.css
+++ b/www/-/s/style-mobile.css
@@ -4255,10 +4255,6 @@ i > dfn {
     font-style: italic;
 }
 
-blockquote {
-    quotes: "" "";
-}
-
 .pas-sur-mobile {
     display: none;
 }
diff --git a/www/css/app.css b/www/css/app.css
index 79816271..e06bda3e 100644
--- a/www/css/app.css
+++ b/www/css/app.css
@@ -92,6 +92,7 @@ body {
 }
 
 .articleIFrame {
+    /*height: 2000px;*/
     width: 100%;
     border: 0;
 }
diff --git a/www/index.html b/www/index.html
index 781eb0a0..2532e68b 100644
--- a/www/index.html
+++ b/www/index.html
@@ -39,7 +39,7 @@
     <link href="css/bootstrap.css" rel="stylesheet" media="screen" />
     <link href="css/bootstrap-theme.css" rel="stylesheet" media="screen" />
 </head>
-<body role="application">
+<body role="application" class="dark">
     <!-- Modal info -->
     <div id="myModal" class="modal">
 
@@ -76,7 +76,7 @@
          </div>
 
     </div> 
-    <section id="search-article" role="region" class="dark">
+    <section id="search-article" role="region">
         <header id="top">
             <nav id="navbar" role="navigation">
                 <div class="navbar-header" id="container">
@@ -353,6 +353,10 @@
                             <div class="panel panel-info" id="displaySettingsDiv">
                                 <div class="panel-heading">Please select the display option:</div>
                                 <div class="panel-body">
+                                    <p style="text-indent: -22px; margin-left: 20px;">
+                                        <input type="checkbox" name="hideToolbar" id="hideToolbarCheck">
+                                        <b>&nbsp;Hide the top toolbar while scrolling</b> (if hidden, tap the arrow on the bottom toolbar once to reveal, twice to return to top of page)
+                                    </p>
                                     <p style="text-indent: -22px; margin-left: 20px;">
                                         <input type="checkbox" name="cssCacheMode" id="cssCacheModeCheck">
                                         <b>&nbsp;Use locally cached display styles</b> (<i>recommended</i> for Wikipedia ZIM)
@@ -442,14 +446,14 @@
                 to avoid the top button to be in the scrollbar area :
                 on a device, it can trigger a "page down" of the scrollbar -->
                 <!-- div class="restrictedSize" -->
-                        <span class="label label-default" id="lblZoom"></span>
-                        <a class="btn btn-primary btn-sm pull-left" id="btnHomeBottom" title="Home"><span class="glyphicon glyphicon-home"></span></a>
-                        <a class="btn btn-sm col-sm-pull-3" id="btnZoomout" title="Zoom out"><span class="glyphicon glyphicon-zoom-out"></span></a>
-                        <a class="btn btn-sm" id="btnBack" title="Back"><span class="glyphicon glyphicon-circle-arrow-left"></span></a>&nbsp;
-                        <span id="appStatus"></span>
-                        <a class="btn btn-sm" id="btnForward" title="Forward"><span class="glyphicon glyphicon-circle-arrow-right"></span></a>
-                        <a class="btn btn-sm col-sm-pull-7" id="btnZoomin" title="Zoom in"><span class="glyphicon glyphicon-zoom-in"></span></a>
-                        <a class="btn btn-primary btn-sm pull-right" id="btnTop" title="Top" href="#top" style="margin-right: 1em;"><span class="glyphicon glyphicon-arrow-up"></span></a>
+                    <span class="label label-default" id="lblZoom"></span>
+                    <a class="btn btn-primary btn-sm pull-left" id="btnHomeBottom" title="Home"><span class="glyphicon glyphicon-home"></span></a>
+                    <a class="btn btn-sm pull-left" id="btnBack" title="Back" style="margin-left:0.9em;"><span class="glyphicon glyphicon-circle-arrow-left"></span></a>
+                    <a class="btn btn-sm col-sm-pull-3" id="btnZoomout" title="Zoom out" style="margin-right:0.4em;"><span class="glyphicon glyphicon-zoom-out"></span></a>
+                    <span id="appStatus"></span>
+                    <a class="btn btn-sm col-sm-pull-7" id="btnZoomin" title="Zoom in"><span class="glyphicon glyphicon-zoom-in"></span></a>
+                    <a class="btn btn-primary btn-sm pull-right" id="btnTop" title="Top" href="#top" style="margin-right: 1em;"><span class="glyphicon glyphicon-arrow-up"></span></a>
+                    <a class="btn btn-sm pull-right" id="btnForward" title="Forward" style="margin-right:0.5em;"><span class="glyphicon glyphicon-circle-arrow-right"></span></a>
                 <!-- /div -->
             </div>
         </footer>
diff --git a/www/js/app.js b/www/js/app.js
index 1f249e32..6c8d24db 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -52,11 +52,11 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies', 'abstractFile
          * Resize the IFrame height, so that it fills the whole available height in the window
          */
         function resizeIFrame() {
-            var height = $(window).outerHeight()
-                - $("#top").outerHeight(true)
-                - $("#articleListWithHeader").outerHeight(true)
-                // TODO : this 5 should be dynamically computed, and not hard-coded
-                - 5;
+            var height = $(window).outerHeight() + 100;
+            //        - $("#top").outerHeight(true)
+            //        - $("#articleListWithHeader").outerHeight(true)
+            //        // TODO : this 5 should be dynamically computed, and not hard-coded
+            //        - 5;
             $(".articleIFrame").css("height", height + "px");
         }
         $(document).ready(resizeIFrame);
@@ -251,7 +251,17 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies', 'abstractFile
             return false;
         });
         $('#btnTop').on('click', function (e) {
+            //Ensures toolbar is shown after hidden
+            var thisdoc = document.getElementById('top');
+            if (params.hideToolbar && thisdoc.style.zIndex == "0") {
+                thisdoc.style.zIndex = "1";
+                document.getElementById('article').style.paddingTop = "38px";
+                return;
+            }
+            thisdoc.style.zIndex = "0";
+            document.getElementById('article').style.paddingTop = "0";
             $("#articleContent").contents().scrollTop(0);
+            $("#search-article").scrollTop(0);
             // We return true, so that the link to #top is still triggered (useful in the About section)
             return true;
         });
@@ -377,9 +387,9 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies', 'abstractFile
             //Doh, why are you testing for this? Surely you want to jump to the file if it's been clicked on? There was a reason @REMIND_ME....
             //var comboArchiveList = document.getElementById('archiveList');
             //if (comboArchiveList.options.length == 1) {
-                //console.log("***Only one item, so, fire away...");
-                $('#openLocalFiles').hide();
-                setLocalArchiveFromArchiveList();
+            //console.log("***Only one item, so, fire away...");
+            $('#openLocalFiles').hide();
+            setLocalArchiveFromArchiveList();
             //}
         });
 
@@ -390,7 +400,7 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies', 'abstractFile
             } else {
                 //@TODO enable and provide classic filepicker
             }
-        }); 
+        });
         $('#archiveFiles').on('click', function () {
             if (typeof Windows !== 'undefined' && typeof Windows.Storage !== 'undefined') {
                 //UWP FolderPicker
@@ -398,7 +408,7 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies', 'abstractFile
             } else {
                 //@TODO hide folderpicker
             }
-        }); 
+        });
         document.getElementById('downloadTrigger').addEventListener('click', function () {
             kiwixServe.requestXhttpData(params.kiwixDownloadLink);
         });
@@ -431,6 +441,11 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies', 'abstractFile
             params.imageDisplay = this.checked ? true : false;
             cookies.setItem('imageDisplay', params.imageDisplay, Infinity);
         });
+        $('input:checkbox[name=hideToolbar]').on('change', function (e) {
+            params.hideToolbar = this.checked ? true : false;
+            cookies.setItem('hideToolbar', params.hideToolbar, Infinity);
+            checkToolbar();
+        });
         $('input:checkbox[name=cssUIDarkTheme]').on('change', function (e) {
             params.cssUITheme = this.checked ? 'dark' : 'light';
             cookies.setItem('cssUITheme', params.cssUITheme, Infinity);
@@ -453,7 +468,7 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies', 'abstractFile
             }
             if (value == 'light') {
                 document.getElementsByTagName('body')[0].classList.remove("dark");
-                document.getElementById('search-article').classList.remove("dark");
+                //document.getElementById('search-article').classList.remove("dark");
                 //document.getElementById('article').classList.remove("dark");
                 //document.getElementById('navbar').classList.add("navbar-default");
                 //document.getElementById('navbar').classList.remove("dark");
@@ -484,6 +499,38 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies', 'abstractFile
             cookies.setItem('useMathJax', params.useMathJax, Infinity);
             params.themeChanged = true;
         });
+        function checkToolbar() {
+            var thisdoc = document.getElementById('top');
+            if (!params.hideToolbar) {
+                var thisdoc = document.getElementById('top');
+                thisdoc.style.position = "fixed";
+                thisdoc.style.zIndex = "1";
+                document.getElementById('article').style.paddingTop = "38px";
+                return;
+            }
+            document.getElementById('article').style.paddingTop = "0";
+            thisdoc.style.position = "relative";
+            window.frames[0].removeEventListener('scroll', hideToolbar);
+            window.frames[0].addEventListener('scroll', hideToolbar); 
+            function hideToolbar() {
+                if (params.hideToolbar) {
+                    var thisdoc = document.getElementById('top');
+                    if (window.frames[0].frameElement.contentDocument.body.scrollTop == 0) {
+                        var thisdoc = document.getElementById('top');
+                        thisdoc.style.position = "relative";
+                        document.getElementById('article').style.paddingTop = "0";
+                        thisdoc.style.zIndex = "0";
+                        return;
+                        //thisdoc.style.zIndex = "0";
+                    }
+                    if (!thisdoc.style.position || thisdoc.style.position == "relative") {
+                        document.getElementById('top').style.position = "fixed";
+                        //thisdoc.style.zIndex = "0";
+                    }
+                }
+            }
+        }
+
         $(document).ready(function (e) {
             // Set initial behaviour (see also init.js)
             if (params.cssTheme == "dark") document.getElementById('footer').classList.add("darkfooter");
@@ -1472,11 +1519,11 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies', 'abstractFile
             var dropup = '<span class="dropup"><button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Contents <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu2" style="max-height:' + window.innerHeight * 0.75 + 'px; overflow-y: auto;">';
             headings.forEach(function (heading) {
                 if (/^h1$/i.test(heading.tagName))
-                    dropup = dropup + '<li><a href="#" data-heading-id="' + heading.id + '">' + heading.textContent + '</a></li>';
+                    dropup = dropup + '<li style="font-size:' + params.relativeFontSize + '%;"><a href="#" data-heading-id="' + heading.id + '">' + heading.textContent + '</a></li>';
                 else if (/^h2$/i.test(heading.tagName))
-                    dropup = dropup + '<li style="font-size:90%;"><a href="#" data-heading-id="' + heading.id + '">' + heading.textContent + '</a></li>';
+                    dropup = dropup + '<li style="font-size:' + ~~(params.relativeFontSize * 0.9) + '%;"><a href="#" data-heading-id="' + heading.id + '">' + heading.textContent + '</a></li>';
                 else if (/^h3$/i.test(heading.tagName))
-                    dropup = dropup + '<li style="font-size:75%;"><a href="#" data-heading-id="' + heading.id + '">' + heading.textContent + '</a></li>';
+                    dropup = dropup + '<li style="font-size:' + ~~(params.relativeFontSize * 0.75) + '%;"><a href="#" data-heading-id="' + heading.id + '">' + heading.textContent + '</a></li>';
                 //Skip smaller headings (if there are any) to avoid making list too long
             });
             dropup = dropup + '</ul></span>'
@@ -1498,6 +1545,7 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies', 'abstractFile
             $("#articleContent").contents().scrollTop(0);
             $('#articleContent').contents().find('body').html(htmlArticle);
 
+            checkToolbar();
             setupTableOfContents();
 
             var makeLink = uiUtil.makeReturnLink(dirEntry); //[kiwix-js #127]
@@ -1583,8 +1631,8 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies', 'abstractFile
                 //This prevents transparency from working in the bottom toolbar. Setting the style
                 //for iframe height + 30 fixes the issue, and has no effect on other browsers
                 var ele = document.getElementById('articleContent');
-                var y = ~~ele.style.height.match(/[\d.]+/)[0];
-                y += 30;
+                var y = window.outerHeight + 100; //~~ele.style.height.match(/[\d.]+/)[0];
+                //y += 30;
                 ele.style.height = y + "px";
 
                 loadImages();
diff --git a/www/js/init.js b/www/js/init.js
index 612d44c0..450bba38 100644
--- a/www/js/init.js
+++ b/www/js/init.js
@@ -35,9 +35,8 @@ params['cssCache'] = getCookie('cssCache') != null ? getCookie('cssCache') : tru
 params['cssTheme'] = getCookie('cssTheme') || 'light'; //Set default to 'light' or 'dark' to use respective themes for Wiki articles
 params['cssUITheme'] = getCookie('cssUITheme') || 'light'; //Set default to 'light' or 'dark' to use respective themes for UI
 params['imageDisplay'] = getCookie('imageDisplay') != null ? getCookie('imageDisplay') : true; //Set default to display images from Zim
-//params['imageDisplay'] = params['imageDisplay'] == "false" ? false : (params['imageDisplay'] == "true" ? true : params['imageDisplay']);
+params['hideToolbar'] = getCookie('hideToolbar') != null ? getCookie('hideToolbar') : false; //Set default to hide the top toolbar on scroll
 params['useMathJax'] = getCookie('useMathJax') != null ? getCookie('useMathJax') : true; //Set default to true to display math formulae with MathJax, false to use fallback SVG images only
-params['allowInternetAccess'] = params['allowInternetAccess'] || false; //Set default to false to prevent accidental Intenet data usage (do not get value from cookie, should be explicitly set by user on a per-session basis)
 
 //Do not touch these values unless you know what they do! Some are global variables, some are set programmatically
 params['falFileToken'] = params['falFileToken'] || "zimfile"; //UWP support
@@ -46,10 +45,12 @@ params['localStorage'] = params['localStorage'] || "";
 params['pickedFile'] = params['pickeFile'] || "";
 params['pickedFolder'] = params['pickedFolder'] || "";
 params['themeChanged'] = params['themeChanged'] || false;
+params['allowInternetAccess'] = params['allowInternetAccess'] || false; //Do not get value from cookie, should be explicitly set by user on a per-session basis
 
 //Initialize checkbox and radio values
 document.getElementById('cssCacheModeCheck').checked = params.cssCache;
 document.getElementById('imageDisplayModeCheck').checked = params.imageDisplay;
+document.getElementById('hideToolbarCheck').checked = params.hideToolbar;
 document.getElementById('cssWikiDarkThemeCheck').checked = params.cssTheme == 'dark' ? true : false;
 document.getElementById('cssUIDarkThemeCheck').checked = params.cssUITheme == 'dark' ? true : false;
 document.getElementById('useMathJaxRadio' + (params.useMathJax ? 'True' : 'False')).checked = true;