feat(reading): Show reading list title and reading list actions when scrolling up

Close #386

Author: Jenselme

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+- Show reading list title and reading list actions when scrolling up.
+
 ## 25.04.1
 
 - Remove async functions to simplify the code.

legadilo/static/js/list_of_articles.js

@@ -173,10 +173,36 @@
     window.addEventListener("scrollend", runRefresh);
   };
 
+  const setupMobileScroll = () => {
+    const headerHeight = getComputedStyle(document.body).getPropertyValue(
+      "--content-header-height",
+    );
+    const readingListTitleContainer = document.getElementById("reading-list-title-container");
+    readingListTitleContainer.style.top = headerHeight;
+    const titleHeight = readingListTitleContainer.getBoundingClientRect().height;
+    const readingListActionsContainer = document.getElementById("reading-list-actions-container");
+    readingListActionsContainer.style.top = `calc(${headerHeight} + ${titleHeight}px)`;
+
+    let currentOffset = window.scrollY;
+
+    window.addEventListener("scroll", () => {
+      if (currentOffset > window.scrollY) {
+        readingListTitleContainer.classList.add("sticky-top");
+        readingListActionsContainer.classList.add("sticky-top");
+      } else {
+        readingListTitleContainer.classList.remove("sticky-top");
+        readingListActionsContainer.classList.remove("sticky-top");
+      }
+
+      currentOffset = window.scrollY;
+    });
+  };
+
   window.addEventListener("load", () => {
     jsCfg = JSON.parse(document.head.querySelector("#js-cfg").textContent);
     setupReadAction();
     setupReadOnScroll();
     setupRefresh();
+    setupMobileScroll();
   });
 })();

legadilo/templates/reading/list_of_articles.html

@@ -53,7 +53,8 @@
     </div>
 {% endblock center_navbar %}
 {% block content %}
-    <div class="container-fluid px-md-3">
+    <div id="reading-list-title-container"
+         class="container-fluid px-md-3 bg-body z-1">
         <div class="row">
             <div class="col col-md-3 d-none d-md-block"></div>
             <div class="col col-12 col-md-7 col-md-8 px-1 px-md-3">
@@ -70,7 +71,7 @@ <h1>{{ page_title }}</h1>
                 </nav>
             </div>
             <div class="col col-12 col-md-8 px-1 px-md-3 mx-0">
-                <div class="row px-0 mx-0">
+                <div id="reading-list-actions-container" class="row px-0 mx-0 bg-body z-1">
                     {% if count_articles_of_current_reading_list > 0 %}
                         <h2 class="fs-6 col-6 col-md-2 align-middle d-flex align-items-center px-0 mx-0">
                             <span id="articles-in-total">