Miscs

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.

docs/adrs/0009-remove-asnyc-for-now.md

@@ -31,5 +31,6 @@ It will impact many files, but it should be relatively straightforward.
 - Use `gunicorn` to run the application in production:
   - It’s kind of a default choice for this, and I’ve used it in the past with great success. 
   - Create an incoming HTTP request timeout. Set it to 60s to allow for slow search.
-  - Use 4 workers: from my experience, it’s a good number.
+  - Use 4 workers: from my experience, it’s a good number. It will increase memory usage.
+    - After deploy, I see a 100MB increase for the 4 workers. Acceptable for me.
 - We may need to allow for incoming request timeout and number of workers to be configured.

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">

legadilo/users/tests/snapshots/test_registration/test_registration_success/page_response.html

@@ -343,7 +343,8 @@ <h1 class="modal-title fs-5"></h1>
                     </div>
 
 
-    <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">
@@ -404,7 +405,7 @@ <h1>Unread</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">