My implementation progress bar at the top of the page #1348

3 files changed, 18 insertions, 0 deletions

diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entry.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entry.html.twig
index 4b0e1a7b..2aa9d1b8 100644
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entry.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entry.html.twig
@@ -3,6 +3,9 @@
 {% block title %}{{ entry.title|raw }} ({{ entry.domainName }}){% endblock %}
 
 {% block menu %}
+    <div class="progress">
+        <div class="determinate"></div>
+    </div>
     <nav class="hide-on-large-only">
         <div class="nav-wrapper cyan darken-1">
             <ul>
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css b/src/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css
index cc1bbd3f..f06fd6db 100755
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css
@@ -269,6 +269,14 @@ main ul.row {
     opacity: 1;
 }
 
+.progress {
+    position:fixed;
+    top:0px;
+    width: 100%;
+    height: 3px;
+    margin: 0;
+    z-index: 9999;
+}
 /* ==========================================================================
    6 = Media queries
    ========================================================================== */
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/public/js/init.js b/src/Wallabag/CoreBundle/Resources/views/themes/material/public/js/init.js
index 5e5ea847..dffeaaad 100755
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/public/js/init.js
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/public/js/init.js
@@ -46,4 +46,11 @@ $(document).ready(function(){
         $(".nav-panels").css('background', 'transparent');
         return false;
     });
+    $(window).scroll(function () {
+        var s = $(window).scrollTop(),
+        d = $(document).height(),
+        c = $(window).height();
+        var scrollPercent = (s / (d-c)) * 100;
+        $(".progress .determinate").css('width', scrollPercent+'%');
+    });
 });