♻️ refactor: use consistent pagination

2 years ago · a8e49cfedf
parent 6938ae42f9
commit a8e49cfedf
4 changed files with 46 additions and 39 deletions
--- a/sass/parts/_pagination.scss
+++ b/sass/parts/_pagination.scss
@ -0,0 +1,30 @@
+.pagination {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 2rem;
+    font-size: 1em;
+    list-style: none;
+    padding: 0;
+
+    li {
+        margin-right: 1rem;
+    }
+
+    .page-link {
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        padding: 0;
+
+        &.disabled {
+            opacity: 0.5;
+            pointer-events: none;
+        }
+    }
+
+    .page-numbers {
+        font-size: 0.9rem;
+        color: var(--meta-color);
+    }
+}
--- a/templates/base.html
+++ b/templates/base.html
@ -4,9 +4,8 @@
 {% import "macros/page_desc.html" as macros_page_desc %}
 {% import "macros/content.html" as macros_content %}
 {% import "macros/cards_posts.html" as macros_cards_posts %}
-{% import "macros/list_title.html" as macros_list_title %}
 {% import "macros/set_title.html" as macros_set_title %}
-
+{% import "macros/paginate.html" as macros_paginate %}

 <!DOCTYPE html>
 <html lang = "en">
--- a/templates/cards.html
+++ b/templates/cards.html
@ -18,18 +18,6 @@
    </main>

    {% if paginator %}
-        <div class="pagination">
-            {% if paginator.previous %}
-                <span class="page-item page-prev">
-                    <a href={{ paginator.previous }} class="page-link" aria-label="Previous"><span aria-hidden="true">← Prev</span></a>
-                </span>
-            {% endif %}
-
-            {% if paginator.next %}
-                <span class="page-item page-next">
-                    <a href={{ paginator.next }} class="page-link" aria-label="Next"><span aria-hidden="true">Next →</span></a>
-                </span>
-            {% endif %}
-            </div>
+        {{ macros_paginate::paginate() }}
    {% endif %}
 {% endblock main_content %}
--- a/templates/section.html
+++ b/templates/section.html
@ -2,39 +2,29 @@

 {% block main_content %}
 {% if section.extra.section_path -%}
-{% set section = get_section(path=section.extra.section_path) %}
+    {% set extra_section = get_section(path=section.extra.section_path) %}
 {% endif -%}

 {%- if section.extra.header %}
-	{{ macros_page_desc::page_desc(desc=section.extra.header, page=section) }}
+    {{ macros_page_desc::page_desc(desc=section.extra.header, page=section) }}
 {% endif -%}

 <main class="list">
-	<div>
-		{{ macros_page_header::page_header(title=section.title) }}
-	</div>
-	{%- if paginator %}
-	{%- set show_pages = paginator.pages -%}
-	{% else %}
-	{%- set show_pages = section.pages -%}
-	{% endif -%}
+    <div>
+        {{ macros_page_header::page_header(title=section.title) }}
+    </div>

-	{{ macros_list_posts::list_posts(pages=show_pages) }}
+    {%- if paginator %}
+        {%- set pages = paginator.pages -%}
+    {% else %}
+        {%- set pages = extra_section.pages -%}
+    {% endif -%}
+
+	{% set max = section.extra.max_posts | default(value=999999) %}
+    {{ macros_list_posts::list_posts(posts=pages, max=max) }}
 </main>

 {% if paginator %}
-<div class="pagination">
-	{% if paginator.previous %}
-	<span class="page-item page-prev">
-		<a href={{ paginator.previous }} class="page-link" aria-label="Previous"><span aria-hidden="true">← Prev</span></a>
-	</span>
-	{% endif %}
-
-	{% if paginator.next %}
-	<span class="page-item page-next">
-		<a href={{ paginator.next }} class="page-link" aria-label="Next"><span aria-hidden="true">Next →</span></a>
-	</span>
-	{% endif %}
-</div>
+    {{ macros_paginate::paginate() }}
 {% endif %}
 {% endblock main_content %}