feat(reading): can refresh a reading list no mobile easily

No more need to scroll to the top of the page or to open the reading list selector.

Close #354

Author: Jenselme

Diff for: CHANGELOG.md

@@ -7,6 +7,7 @@
 - Allow you to add a custom script.
 - Can fetch feed without an explicit full site URL.
 - Can force feeds to refresh in the admin.
+- Can refresh a reading list no mobile easily, without going to the top of the page or opening the reading list selector.
 
 ## 24.12.4
 

Diff for: legadilo/static/css/base.css

@@ -90,6 +90,14 @@ html {
     max-height 1s ease-out;
 }
 
+.refresh-btn {
+  right: 0.5rem;
+  bottom: 0.5rem;
+  width: max-content;
+  margin-left: auto;
+  display: block;
+}
+
 @media (width >= 768px) {
   .article-card-container {
     max-height: 500px;

Diff for: legadilo/templates/reading/list_of_articles.html

@@ -164,4 +164,8 @@ <h2 class="fs-6 col-6 col-md-2 align-middle d-flex align-items-center px-0 mx-0"
                value="{{ displayed_reading_list.id }}" />
         <input type="hidden" name="from_url" value="{{ from_url }}" />
     </form>
+    <a class="btn btn-outline-primary sticky-bottom refresh-btn bg-secondary-subtle"
+       aria-label="{% translate 'Refresh current reading list' %}"
+       role="button"
+       href="{{ request.get_full_path }}">{% include "core/partials/bs-icons/refetch.html" %}</a>
 {% endblock content %}

Diff for: legadilo/users/tests/snapshots/test_registration/test_registration_success/page_response.html

@@ -435,6 +435,15 @@ <h1>Unread</h1>
                value="2" />
         <input type="hidden" name="from_url" value="/reading/" />
     </form>
+    <a class="btn btn-outline-primary sticky-bottom refresh-btn bg-secondary-subtle"
+       aria-label="Refresh current reading list"
+       role="button"
+       href="/reading/">
+
+<img class="bi"
+     src="/static/images/bs/arrow-clockwise.svg"
+     alt="Refetch" />
+</a>
 
             </div>
         </div>