From dbb746981ab0a0d6ffec03e63ed51e05cc0fb1f5 Mon Sep 17 00:00:00 2001
From: Joxit <joxit972@gmail.com>
Date: Sat, 15 Jun 2019 22:37:24 +0200
Subject: [PATCH] fix(pagination): Improve spacing for page next and first page
 buttons

---
 src/scripts/utils.js    | 12 +++++++++---
 src/style.css           | 18 ++++++++++++++++++
 src/tags/pagination.tag |  2 +-
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/scripts/utils.js b/src/scripts/utils.js
index 878685e..4aece62 100644
--- a/src/scripts/utils.js
+++ b/src/scripts/utils.js
@@ -84,11 +84,17 @@ registryUI.getPageLabels = function(page, nPages) {
   var maxItems = 10;
   if (nPages === 1) { return pageLabels; }
   if (page !== 1 && nPages >= maxItems) {
-    pageLabels.push({'icon': 'first_page', page: 0});
+    pageLabels.push({'icon': 'first_page', page: 1});
     pageLabels.push({'icon': 'chevron_left', page: page - 1});
   }
-  for (var i = Math.max(1, page - maxItems); i <= Math.min(nPages, page + maxItems); i++) {
-    pageLabels.push({page: i, current: i === page});
+  var start = Math.round(Math.max(1, Math.min(page - maxItems / 2, nPages - maxItems + 1)));
+  for (var i = start; i < Math.min(nPages + 1, start + maxItems); i++) {
+    pageLabels.push({
+      page: i,
+      current: i === page,
+      'space-left': page === 1 && nPages > maxItems,
+      'space-right': page === nPages && nPages > maxItems
+    });
   }
   if (page !== nPages && nPages >= maxItems) {
     pageLabels.push({'icon': 'chevron_right', page: page + 1});
diff --git a/src/style.css b/src/style.css
index 3630f98..ca3b8ac 100644
--- a/src/style.css
+++ b/src/style.css
@@ -527,6 +527,24 @@ pagination material-button {
   padding: 0.2em 0.75em;
 }
 
+pagination material-button .content {
+  display: flex;
+  align-content: center;
+  line-height: 1.9em;
+}
+
 pagination material-button.current {
   border: 1px solid rgba(0, 0, 0, .12);
+}
+
+pagination material-button.current.space-left {
+  margin-left: 85px;
+}
+
+pagination material-button.current.space-right {
+  margin-right: 85px;
+}
+
+pagination material-button .content i.material-icons {
+  color: #000;
 }
\ No newline at end of file
diff --git a/src/tags/pagination.tag b/src/tags/pagination.tag
index ee9df82..1263a9e 100644
--- a/src/tags/pagination.tag
+++ b/src/tags/pagination.tag
@@ -18,7 +18,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
   <!-- Begin of tag -->
   <div class="conatianer">
     <div class="pagination-centered">
-      <material-button waves-color="rgba(158,158,158,.4)" each="{p in this.opts.pages}" class="{ current: p.current }">
+      <material-button waves-color="rgba(158,158,158,.4)" each="{p in this.opts.pages}" class="{ current: p.current, space-left: p['space-left'], space-right: p['space-right']}">
         <i show="{ p.icon }" class="material-icons">{ p.icon }</i>
         <div hide="{ p.icon }">{ p.page }</div>
       </material-button>