From d6e950e4463fa7d5c86d6b2d0d291bf351471643 Mon Sep 17 00:00:00 2001
From: steven-y-e <steven@mineral.town>
Date: Tue, 21 Sep 2021 15:37:40 -0400
Subject: [PATCH] feat(pagination): responsive styles

- removed linkless ellipses between page numbers and next/previous links
- hide first/previous/next/last text labels on smaller views
- hide non active page specific links on even smaller views
---
 .../mineral/layouts/partials/pagination.html  | 17 +++------
 blog/themes/mineral/static/css/mineral.css    | 37 ++++++++++++++-----
 2 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/blog/themes/mineral/layouts/partials/pagination.html b/blog/themes/mineral/layouts/partials/pagination.html
index 52b480a..c11badc 100644
--- a/blog/themes/mineral/layouts/partials/pagination.html
+++ b/blog/themes/mineral/layouts/partials/pagination.html
@@ -3,35 +3,30 @@
     {{ $paginator = .Data }}
 {{ end }}
 {{ if gt $paginator.TotalPages 1 }}
-{{ $.Scratch.Set "dot_rendered" false }}
 <nav aria-label="page navigation">
     <ul class="pagination">
     {{ if and (ne $paginator.PageNumber 1) (ne $paginator.PageNumber 2) }}
-        <li class="page-item"><a href="{{ $paginator.First.URL }}" rel="first" class="page-link">« First</a></li>
+        <a href="{{ $paginator.First.URL }}" rel="first" class="page-link"><li class="page-item">«<span class="tablet-hidden"> First</span></li></a>
     {{ end }}
 
     {{ if $paginator.HasPrev  }}
-        <li class="page-item"><a href="{{ $paginator.Prev.URL }}" rel="prev" class="page-link">‹ Prev</a></li>
+        <a href="{{ $paginator.Prev.URL }}" rel="prev" class="page-link"><li class="page-item">‹<span class="tablet-hidden"> Prev</span></li></a>
     {{ end }}
 
 {{ range $paginator.Pagers }}
     {{ if eq . $paginator }}
-        <li class="page-item active"><a href="{{ .URL }}" class="page-link">{{ .PageNumber }}</a></li>
+        <a href="{{ .URL }}" class="page-link"><li class="page-item active">{{ .PageNumber }}</li></a>
     {{ else if and (ge .PageNumber (sub $paginator.PageNumber 2)) (le .PageNumber (add $paginator.PageNumber 2)) }}
-    {{ $.Scratch.Set "dot_rendered" false }}
-        <li class="page-item"><a href="{{ .URL }}" class="page-link">{{ .PageNumber }}</a></li>
-    {{ else if eq ($.Scratch.Get "dot_rendered") false }}
-    {{ $.Scratch.Set "dot_rendered" true }}
-        <li class="page-item disabled"><a class="page-link">...</a></li>
+        <a href="{{ .URL }}" class="page-link mobile-hidden"><li class="page-item">{{ .PageNumber }}</li></a>
     {{ end }}
 {{ end }}
 
     {{ if $paginator.HasNext }}
-        <li class="page-item"><a href="{{ $paginator.Next.URL }}" rel="next" class="page-link">Next ›</a></li>
+        <a href="{{ $paginator.Next.URL }}" rel="next" class="page-link"><li class="page-item"><span class="tablet-hidden">Next </span>›</li></a>
     {{ end }}
 
     {{ if and (ne $paginator.PageNumber $paginator.TotalPages) ((ne $paginator.PageNumber (sub $paginator.TotalPages 1))) }}
-        <li class="page-item"><a href="{{ $paginator.Last.URL }}" rel="last" class="page-link">Last »</a></li>
+        <a href="{{ $paginator.Last.URL }}" rel="last" class="page-link"><li class="page-item"><span class="tablet-hidden">Last </span>»</li></a>
     {{ end }}
     </ul>
 </nav>
diff --git a/blog/themes/mineral/static/css/mineral.css b/blog/themes/mineral/static/css/mineral.css
index 2d2a864..44202f0 100644
--- a/blog/themes/mineral/static/css/mineral.css
+++ b/blog/themes/mineral/static/css/mineral.css
@@ -7,8 +7,7 @@ article p img {
 .pagination {
     display: flex;
     list-style: none;
-    border-radius: .25rem;
-    margin: 20px 0;
+    margin: 20px -1px;
     padding: 0;
     justify-content: center;
 }
@@ -17,22 +16,42 @@ article p img {
     position: relative;
     display: block;
     padding: 0.5em;
-    margin: 0.25em;
+    margin: 0.15em;
     line-height: 1.25;
-    border: 1px dashed;
+    border: 1px dashed #6c757d;
     background: #fff;
 }
-
 .page-item.active {
     background: #1EAEDB;
 }
-
-.page-item.active .page-link {
+.page-item.active {
     color: #fff;
 }
-
-.page-item.disabled .page-link {
+.page-item.disabled {
     color: #6c757d;
     pointer-events: none;
     cursor: auto;
 }
+
+/* hide some pagination links on tablet/mobile-width views */
+@media (max-width: 420px) {
+    .mobile-hidden {
+        display: none;
+    }
+    .page-item {
+        margin: 0.08em;
+    }
+}
+@media (max-width: 550px) {
+    .tablet-hidden {
+        display: none;
+    }
+}
+
+/* automatically hyphenate long words in summaries on list pages */
+.summary {
+    -webkit-hyphens: auto;
+    -ms-hyphens: auto;
+    hyphens: auto;
+}
+