From cfd77d1c2abca28c346af4697fb92db98a42f40a Mon Sep 17 00:00:00 2001
From: Simounet <contact@simounet.net>
Date: Sun, 19 Jan 2020 12:50:08 +0100
Subject: Sticky nav on entry action button click

---
 app/Resources/static/themes/material/css/nav.scss | 5 +++++
 app/Resources/static/themes/material/index.js     | 8 ++++++++
 2 files changed, 13 insertions(+)

(limited to 'app')

diff --git a/app/Resources/static/themes/material/css/nav.scss b/app/Resources/static/themes/material/css/nav.scss
index 147f163f..b7288278 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 2926cad1..4b194d00 100755
--- a/app/Resources/static/themes/material/index.js
+++ b/app/Resources/static/themes/material/index.js
@@ -17,6 +17,13 @@ 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');
+  });
+};
+
 $(document).ready(() => {
   // sideNav
   $('.button-collapse').sideNav();
@@ -36,6 +43,7 @@ $(document).ready(() => {
   initFilters();
   initExport();
   initRandom();
+  stickyNav();
 
   const toggleNav = (toShow, toFocus) => {
     $('.nav-panel-actions').hide(100);
-- 
cgit v1.2.3


From dc23bf9f29b2cff5c27ee8d2d251f435d00e6652 Mon Sep 17 00:00:00 2001
From: Simounet <contact@simounet.net>
Date: Sun, 19 Jan 2020 17:49:54 +0100
Subject: Entry action buttons displayed on page end reached

---
 .../static/themes/material/css/article.scss        |  1 +
 app/Resources/static/themes/material/index.js      | 32 ++++++++++++++++------
 2 files changed, 25 insertions(+), 8 deletions(-)

(limited to 'app')

diff --git a/app/Resources/static/themes/material/css/article.scss b/app/Resources/static/themes/material/css/article.scss
index f1a11da0..755372c9 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/index.js b/app/Resources/static/themes/material/index.js
index 4b194d00..e808d75c 100755
--- a/app/Resources/static/themes/material/index.js
+++ b/app/Resources/static/themes/material/index.js
@@ -24,6 +24,29 @@ const stickyNav = () => {
   });
 };
 
+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();
@@ -44,6 +67,7 @@ $(document).ready(() => {
   initExport();
   initRandom();
   stickyNav();
+  articleScroll();
 
   const toggleNav = (toShow, toFocus) => {
     $('.nav-panel-actions').hide(100);
@@ -81,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}%`);
-  });
 });
-- 
cgit v1.2.3