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

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 4b0e1a7b9a18898e3c62be9301ac68a6647426a5..2aa9d1b8592f82b1dcae2eb0866cb73cb447637a 100644 (file)
--- 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 cc1bbd3f9d33643aee27fa06e1a8e0c08b6e7a82..f06fd6db87f0715bded229ac5e8e090160381496 100755 (executable)
--- 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 5e5ea8472af9de994e45bfe3b197b07afe6f59d0..dffeaaad29accb934d636178cf473607b5d02292 100755 (executable)
--- 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+'%');
+    });
 });