diff --git a/app/Resources/static/themes/material/css/article.scss b/app/Resources/static/themes/material/css/article.scss
index f1a11da08..755372c95 100644
--- a/app/Resources/static/themes/material/css/article.scss
+++ b/app/Resources/static/themes/material/css/article.scss
@@ -5,6 +5,7 @@
#article {
font-size: 20px;
margin: 0 auto;
+ padding-bottom: 80px;
max-width: 45em;
article {
diff --git a/app/Resources/static/themes/material/css/nav.scss b/app/Resources/static/themes/material/css/nav.scss
index 147f163fd..b7288278c 100644
--- a/app/Resources/static/themes/material/css/nav.scss
+++ b/app/Resources/static/themes/material/css/nav.scss
@@ -131,6 +131,11 @@ nav {
display: none;
}
+.entry-nav-top--sticky {
+ position: sticky;
+ top: 0;
+}
+
@media (min-width: 993px) {
.button-collapse {
display: none;
diff --git a/app/Resources/static/themes/material/index.js b/app/Resources/static/themes/material/index.js
index 2926cad11..e808d75c2 100755
--- a/app/Resources/static/themes/material/index.js
+++ b/app/Resources/static/themes/material/index.js
@@ -17,6 +17,36 @@ import './js/shortcuts/entry';
/* Theme style */
import './css/index.scss';
+const stickyNav = () => {
+ const nav = $('.js-entry-nav-top');
+ $('[data-toggle="actions"]').click(() => {
+ nav.toggleClass('entry-nav-top--sticky');
+ });
+};
+
+const articleScroll = () => {
+ const articleEl = $('#article');
+ if (articleEl.length > 0) {
+ $(window).scroll(() => {
+ const s = $(window).scrollTop();
+ const d = $(document).height();
+ const c = $(window).height();
+ const articleElBottom = articleEl.offset().top + articleEl.height();
+ const scrollPercent = (s / (d - c)) * 100;
+ $('.progress .determinate').css('width', `${scrollPercent}%`);
+ const fixedActionBtn = $('.js-fixed-action-btn');
+ const toggleScrollDataName = 'toggle-auto';
+ if ((s + c) > articleElBottom) {
+ fixedActionBtn.data(toggleScrollDataName, true);
+ fixedActionBtn.openFAB();
+ } else if (fixedActionBtn.data(toggleScrollDataName) === true) {
+ fixedActionBtn.data(toggleScrollDataName, false);
+ fixedActionBtn.closeFAB();
+ }
+ });
+ }
+};
+
$(document).ready(() => {
// sideNav
$('.button-collapse').sideNav();
@@ -36,6 +66,8 @@ $(document).ready(() => {
initFilters();
initExport();
initRandom();
+ stickyNav();
+ articleScroll();
const toggleNav = (toShow, toFocus) => {
$('.nav-panel-actions').hide(100);
@@ -73,12 +105,4 @@ $(document).ready(() => {
$('.nav-panels').css('background', 'transparent');
return false;
});
-
- $(window).scroll(() => {
- const s = $(window).scrollTop();
- const d = $(document).height();
- const c = $(window).height();
- const scrollPercent = (s / (d - c)) * 100;
- $('.progress .determinate').css('width', `${scrollPercent}%`);
- });
});
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 ecd85a84e..70932f215 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
@@ -8,7 +8,7 @@
-