From 94e0f09c7c134a0b6ece1cc78fe1bbd3fd78496f Mon Sep 17 00:00:00 2001
From: janpaulo <janpaulobinaluyo@gmail.com>
Date: Tue, 8 Feb 2022 16:55:39 +0800
Subject: [PATCH] Enhance ui for pagination

---
 .../pagination_component/pagination_component.html.erb   | 6 +++---
 app/javascript/src/application.scss                      | 7 +++++++
 app/javascript/src/application/pagination.scss           | 9 +++++++++
 app/views/kaminari/_first_page.html.erb                  | 2 +-
 app/views/kaminari/_last_page.html.erb                   | 2 +-
 app/views/kaminari/_next_page.html.erb                   | 2 +-
 app/views/kaminari/_paginator.html.erb                   | 2 +-
 app/views/kaminari/_prev_page.html.erb                   | 2 +-
 8 files changed, 24 insertions(+), 8 deletions(-)
 create mode 100644 app/javascript/src/application/pagination.scss

diff --git a/app/components/pagination_component/pagination_component.html.erb b/app/components/pagination_component/pagination_component.html.erb
index 1625876..eeb56cf 100644
--- a/app/components/pagination_component/pagination_component.html.erb
+++ b/app/components/pagination_component/pagination_component.html.erb
@@ -1,6 +1,6 @@
 <div class="col col-md-12">
   <header class="header bg-white b-b clearfix">
-    <div class="row m-t-sm">
+    <div class="row m-t-sm align-items-end pagination-body">
       <div class="col-md-6">
         <% if opts[:is_subject_breadcrums].present? && subjects.present? %>
           <ol class="breadcrumb">
@@ -9,7 +9,7 @@
                 <li class="breadcrumb-item d-inline-flex"> 
                   <h4> <%= link_to ancestor.name, subject_index_path(ancestor), class: "text-decoration-none" %> </h4> 
                 </li>
-              <% end %>
+              <% end %> 
 
               <li class="breadcrumb-item d-inline-flex active"> 
                 <h4> <%= subject.name %> </h4> 
@@ -17,7 +17,7 @@
             <% end %>
           </ol>
         <% else %>
-          <h4 style="color: darkred">Search Results</h4>
+          <h4 style="color: darkred" class="m-0">Search Results</h4>
           <small style="color: darkred">
             <%= page_entries_info data, entry_name: 'records' if data.present? %>
           </small>
diff --git a/app/javascript/src/application.scss b/app/javascript/src/application.scss
index 53ca036..2bd369f 100644
--- a/app/javascript/src/application.scss
+++ b/app/javascript/src/application.scss
@@ -1,6 +1,8 @@
 @import "~bootstrap/scss/bootstrap";
 @import "./application/sidenav";
 @import "./application/sessions";
+@import "./application/pagination";
+@import "./application/table";
 
 .tableFixHead { 
     overflow: auto;
@@ -33,3 +35,8 @@
 .accordion-button::after {
 	margin-right: 10px;
 }
+
+.main-content-body {
+  min-height: 100vh !important;
+  overflow: auto;
+}
\ No newline at end of file
diff --git a/app/javascript/src/application/pagination.scss b/app/javascript/src/application/pagination.scss
new file mode 100644
index 0000000..e1915f9
--- /dev/null
+++ b/app/javascript/src/application/pagination.scss
@@ -0,0 +1,9 @@
+.pagination-body .pagination .page-item a{
+    color: darkred;
+  }
+  
+.pagination-body .pagination span.page-item.page.current.page-link {
+border: darkred;
+background: darkred !important;
+color: #fff !important;
+}
\ No newline at end of file
diff --git a/app/views/kaminari/_first_page.html.erb b/app/views/kaminari/_first_page.html.erb
index 936ff4b..93e9e07 100644
--- a/app/views/kaminari/_first_page.html.erb
+++ b/app/views/kaminari/_first_page.html.erb
@@ -7,5 +7,5 @@
     remote:        data-remote
 -%>
 <span class="page-item first">
-  <%= link_to_unless current_page.first?, t('views.pagination.first').html_safe, url, remote: remote, class: "page-link" %>
+  <%= link_to_unless current_page.first?, '<i class="fas fa-angle-double-left"></i>'.html_safe, url, remote: remote, class: "page-link" %>
 </span>
diff --git a/app/views/kaminari/_last_page.html.erb b/app/views/kaminari/_last_page.html.erb
index 5e86ca6..c5bfc68 100644
--- a/app/views/kaminari/_last_page.html.erb
+++ b/app/views/kaminari/_last_page.html.erb
@@ -7,5 +7,5 @@
     remote:        data-remote
 -%>
 <span class="page-item last">
-  <%= link_to_unless current_page.last?, t('views.pagination.last').html_safe, url, remote: remote, class: "page-link" %>
+  <%= link_to_unless current_page.last?, '<i class="fas fa-angle-double-right"></i>'.html_safe, url, remote: remote, class: "page-link" %>
 </span>
diff --git a/app/views/kaminari/_next_page.html.erb b/app/views/kaminari/_next_page.html.erb
index 89fead1..edc2e96 100644
--- a/app/views/kaminari/_next_page.html.erb
+++ b/app/views/kaminari/_next_page.html.erb
@@ -7,5 +7,5 @@
     remote:        data-remote
 -%>
 <span class="page-item next">
-  <%= link_to_unless current_page.last?, t('views.pagination.next').html_safe, url, rel: 'next', remote: remote, class: "page-link" %>
+  <%= link_to_unless current_page.last?, '<i class="fas fa-angle-right"></i>'.html_safe, url, rel: 'next', remote: remote, class: "page-link" %>
 </span>
diff --git a/app/views/kaminari/_paginator.html.erb b/app/views/kaminari/_paginator.html.erb
index 5525f48..4917e0b 100644
--- a/app/views/kaminari/_paginator.html.erb
+++ b/app/views/kaminari/_paginator.html.erb
@@ -7,7 +7,7 @@
     paginator:     the paginator that renders the pagination tags inside
 -%>
 <%= paginator.render do -%>
-  <nav class="pagination" role="navigation" aria-label="pager">
+  <nav class="pagination pagination-sm" role="navigation" aria-label="pager">
     <%= first_page_tag unless current_page.first? %>
     <%= prev_page_tag unless current_page.first? %>
     <% each_page do |page| -%>
diff --git a/app/views/kaminari/_prev_page.html.erb b/app/views/kaminari/_prev_page.html.erb
index db63d91..9cd134a 100644
--- a/app/views/kaminari/_prev_page.html.erb
+++ b/app/views/kaminari/_prev_page.html.erb
@@ -7,5 +7,5 @@
     remote:        data-remote
 -%>
 <span class="page-item prev">
-  <%= link_to_unless current_page.first?, t('views.pagination.previous').html_safe, url, rel: 'prev', remote: remote, class: "page-link" %>
+  <%= link_to_unless current_page.first?, '<i class="fas fa-angle-left"></i>'.html_safe, url, rel: 'prev', remote: remote, class: "page-link" %>
 </span>