UI tweaks

Former-commit-id: d4cd86341aba353f318856e8ccca813132bc80ba [formerly 5cc5804844c786bbce1af7f7f38959c502035632] Former-commit-id: 2e8e840c60a4708a5bb9f59a73bfcf9839c274c8
2025-09-08 11:48:26 -04:00 · 2017-09-04 09:23:08 +01:00 · 2017-09-04 09:23:08 +01:00 · a93e211bf8
commit a93e211bf8
parent f09d5ae30e
12 changed files with 184 additions and 72 deletions
--- 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>
--- 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;
 }
--- 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;
 }
--- 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>
--- 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();
--- 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;
--- 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;
--- 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;
 }
--- a/www/css/app.css
+++ b/www/css/app.css
@ -92,6 +92,7 @@ body {
 }

 .articleIFrame {
+    /*height: 2000px;*/
    width: 100%;
    border: 0;
 }
--- 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>
--- 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();
--- 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;