From cbf75fd7ae8a09f87a13aefbaac43407af827ec1 Mon Sep 17 00:00:00 2001
From: Arlen Johnson <arlen@dogenmedia.com>
Date: Mon, 29 Jul 2019 15:22:13 -0400
Subject: [PATCH 1/2] Fix up pagination styles and interactions for Cake 3
 (CO-1764)

---
 app/src/Template/Element/pagination.ctp | 39 +++++++++---------
 app/webroot/css/co-base.css             | 53 +++++++++++++++++++------
 app/webroot/css/co-responsive.css       |  5 ++-
 app/webroot/js/comanage.js              |  8 +++-
 4 files changed, 71 insertions(+), 34 deletions(-)

diff --git a/app/src/Template/Element/pagination.ctp b/app/src/Template/Element/pagination.ctp
index c894efb16..84f81ae34 100644
--- a/app/src/Template/Element/pagination.ctp
+++ b/app/src/Template/Element/pagination.ctp
@@ -29,41 +29,44 @@
  * THIS FILE IS MASTERED IN THE COMMON REPOSITORY.
  */
 
-// Which product are we?
-$product = __('product.code');
+  // Which product are we?
+  $product = __('product.code');
+  $paginationClass = "without-pagination-elements";
+  if($this->Paginator->hasPage(2)) {
+    $paginationClass = "with-pagination-elements";
+  }
 ?>
 
-<div id="pagination">
+<div id="pagination" class="<?php print $paginationClass; ?>">
   <span class="paginationCounter">
     <?= $this->Paginator->counter(['format' => __($product.'.in.pagination.format')]); ?>
   </span>
-  <?php if($this->paginator->hasPage(2)): ?>
-    <span class="paginationFirst">
+  <?php if($this->Paginator->hasPage(2)): ?>
+    <!-- show the pagination elements if there is more than 1 page -->
+    <ul class="paginationFirst">
       <?= $this->Paginator->first(__($product.'.op.first')); ?>
-    </span>
-    <span class="paginationPrev">
+    </ul>
+    <ul class="paginationPrev">
       <?= $this->Paginator->prev(__($product.'.op.previous'), ['class' => 'disabled']); ?>
-    </span>
-    <span class="paginationNumbers">
+    </ul>
+    <ul class="paginationNumbers">
       <?= $this->Paginator->numbers(); ?>
-    </span>
-    <span class="paginationNext">
+    </ul>
+    <ul class="paginationNext">
       <?= $this->Paginator->next(__($product.'.op.next'), ['class' => 'disabled']); ?>
-    </span>
-    <span class="paginationLast">
+    </ul>
+    <ul class="paginationLast">
       <?= $this->Paginator->last(__($product.'.op.last')); ?>
-    </span>
-  <?php endif; ?>
+    </ul>
 
-  <?php if($this->paginator->hasPage(2)): ?>
-    <!-- show the Goto page form if there is more than 1 page -->
     <form id="goto-page"
           class="pagination-form"
           method="get"
           onsubmit="gotoPage(this.pageNum.value,
             <?= $this->Paginator->counter('{{pages}}');?>,
             '<?= __($product.'.er.pagenum.nan');?>',
-            '<?= __($product.'.er.pagenum.exceeded', [$this->Paginator->counter('{{pages}}')]);?>');
+            '<?= __($product.'.er.pagenum.exceeded', [$this->Paginator->counter('{{pages}}')]);?>',
+            '<?= $this->Paginator->generateUrl(); ?>');
             return false;">
       <label for="pageNum"><?= __($product.'.op.page.goto'); ?></label>
       <input type="text" size="3" name="pageNum" id="pageNum"/>
diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
index 420e17e0c..22bd67341 100644
--- a/app/webroot/css/co-base.css
+++ b/app/webroot/css/co-base.css
@@ -118,9 +118,9 @@ a {
   box-shadow: 0 0 3px #999;
   background-color: #0b6623;
   /* gradients */
-  background: -moz-linear-gradient(top, #0b6623 0%, #0e872c 100%);
-  background: -webkit-linear-gradient(top, #0b6623 0%,#0e872c 100%);
-  background: linear-gradient(to bottom, #0b6623 0%,#0e872c 100%);
+  background: #0b6623 -moz-linear-gradient(top, #0b6623 0%, #0e872c 100%);
+  background: #0b6623 -webkit-linear-gradient(top, #0b6623 0%,#0e872c 100%);
+  background: #0b6623 linear-gradient(to bottom, #0b6623 0%,#0e872c 100%);
   color: white;
 }
 .mdl-layout--fixed-drawer > .mdl-layout__header .mdl-layout__header-row {
@@ -1046,18 +1046,31 @@ body.co_petitions .ui-dialog {
 #pagination {
   margin: 0;
   min-height: 1.5em;
-  padding: 0.5em;
-  /*background-color: #9FC6E2;*/
-  background-color: #186696;
+  padding: 0.5em 1em;
+  background-color: #0b6623;
   color: white;
   text-align: center;
 }
+#pagination ul,
+#pagination li { /* override defaults */
+  display: inline-block;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
 #pagination a {
   color: white;
 }
+#pagination a:hover {
+  color: #f8f8f8;
+  text-decoration: underline;
+}
+#pagination .paginationNumbers a {
+  display: inline-block;
+  padding: 0 4px;
+}
 #pagination .paginationCounter {
   display: block;
-  margin: 0.4em 0.5em 0.4em 0;
 }
 #pagination .paginationFirst,
 #pagination .paginationPrev {
@@ -1073,11 +1086,18 @@ body.co_petitions .ui-dialog {
   display: inline-block;
   margin-left: 2em;
 }
+#pagination .pagination-form label {
+  margin-bottom: 0;
+}
 #pagination .pagination-form input[type=text] {
-  height: 1em;
-  width: 1.5em;
+  height: 1.4em;
+  width: 2em;
   margin: 0;
+  padding: 2px;
   font-size: 0.9em;
+  background-color: #f2f2f2;
+  border: 1px solid #030;
+  text-align: center;
 }
 #pagination .pagination-form select {
   margin: 0;
@@ -1089,19 +1109,27 @@ body.co_petitions .ui-dialog {
 }
 #pagination .pagination-form input[type="submit"] {
   width: auto;
-  height: 2em;
+  margin: 0 0 0 2px;
   padding: 0 4px;
   min-width: 0;
   min-height: 0;
   line-height: initial;
   font-size: 0.9em;
 }
-#pagination span.current {
+#pagination li.active {
   font-weight: bold;
   font-size: 120%;
   position: relative;
   top: 1px;
 }
+#pagination .btn-primary {
+  background-color: #040;
+  border-color: #030;
+}
+#pagination .btn-primary:hover {
+  background-color: #222 !important;
+  border-color: #000;
+}
 /********************************/
 /* My Population - People Index */
 /********************************/
@@ -1986,7 +2014,6 @@ td.indented {
   border-color: #4da3e1;
 }
 .btn-primary:hover {
-  background-color: #222 !important;
   color: white !important;
   text-decoration: none !important;
 }
@@ -1995,7 +2022,7 @@ td.indented {
 }
 .btn-secondary {
   background-color: #c33; /* red */
-  color: #white;
+  color: white;
 }
 .mdl-data-table th,
 .mdl-data-table td {
diff --git a/app/webroot/css/co-responsive.css b/app/webroot/css/co-responsive.css
index 0680a8bcf..cef3e8e60 100644
--- a/app/webroot/css/co-responsive.css
+++ b/app/webroot/css/co-responsive.css
@@ -203,10 +203,13 @@
   /* PAGINATION */
   #pagination {
     text-align: left;
+    min-height: 2.5em;
   }
   #pagination .paginationCounter {
     float: right;
-    margin-right: 0.5em;
+  }
+  #pagination.with-pagination-elements .paginationCounter {
+    margin-top: 2px;
   }
 }
 
diff --git a/app/webroot/js/comanage.js b/app/webroot/js/comanage.js
index 850a75ecc..493f6220d 100644
--- a/app/webroot/js/comanage.js
+++ b/app/webroot/js/comanage.js
@@ -157,7 +157,8 @@ function js_confirm_generic(txt, url, confirmbtxt, cancelbtxt, titletxt, tokenRe
 // maxPage            - largest page number allowed (int, required)
 // intErrMsg          - error message for entering a non-integer value (string, required)
 // maxErrMsg          - error message for entering a page number greater than last page (string, required)
-function gotoPage(pageNumber,maxPage,intErrMsg,maxErrMsg) {
+// paginationUrl      - pagination URL used to build request  (string, required)
+function gotoPage(pageNumber,maxPage,intErrMsg,maxErrMsg,paginationUrl) {
   // Just return if no value
   if (pageNumber == "") {
     stopSpinner();
@@ -186,8 +187,11 @@ function gotoPage(pageNumber,maxPage,intErrMsg,maxErrMsg) {
     pageNum = 1;
   }
 
+  // Build pagination URL (this assumes the URL will always contain an existing ? in the path)
+  var url = paginationUrl.replace(new RegExp('&page=[0-9]*', 'g'), '')+'&page=' + pageNum;
+
   // Redirect to the new page:
-  window.location = window.location.pathname.replace(new RegExp('\/page:[0-9]*', 'g'), '')+'/page:' + pageNum;
+  window.location = url
 }
 
 // Generic limit page form handling for setting the page size (records shown on a page).

From ff65d27eca240fb2d9714ad8ddce87fac4f4138c Mon Sep 17 00:00:00 2001
From: Arlen Johnson <arlen@dogenmedia.com>
Date: Mon, 29 Jul 2019 16:04:20 -0400
Subject: [PATCH 2/2] Further fix up pagination styles and interactions for
 Cake 3 - specifically fix up page size form control (CO-1764)

---
 app/src/Template/Element/pagination.ctp | 8 +++++---
 app/webroot/css/co-base.css             | 8 ++++++--
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/app/src/Template/Element/pagination.ctp b/app/src/Template/Element/pagination.ctp
index 84f81ae34..ec485f31c 100644
--- a/app/src/Template/Element/pagination.ctp
+++ b/app/src/Template/Element/pagination.ctp
@@ -80,12 +80,14 @@
       // Default is 25 records, current maximum is 100.
       // For now we will simply hard-code the options from 25 - 100.
       
-      print $this->Form->create(null, [ 'type' => 'get' ]);
+      print $this->Form->create(null, [ 'type' => 'get', 'class' => 'pagination-form' ]);
       
       // This is similar to Paginator->limitControl, but we have to manually
       // re-insert query params that we want to maintain through the limit adjustment
-      
-      $queryParams = ['page', 'sort', 'direct'];
+
+      // Note: we specifically do NOT retain the 'page' param, because we should always go
+      // back to page one when using this form; otherwise we can easily get a page/limit mismatch that breaks.
+      $queryParams = ['sort', 'direct'];
       
       if(!empty($vv_primary_link)) {
         $queryParams[] = $vv_primary_link;
diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
index 22bd67341..8c1b86921 100644
--- a/app/webroot/css/co-base.css
+++ b/app/webroot/css/co-base.css
@@ -1100,9 +1100,13 @@ body.co_petitions .ui-dialog {
   text-align: center;
 }
 #pagination .pagination-form select {
-  margin: 0;
-  padding: 0;
+  margin: 0 0.5rem;
+  padding: 0 0.25rem;
   font-size: 0.9em;
+  display: inline-block;
+  line-height: unset;
+  width: unset;
+  height: unset;
 }
 #pagination .pagination-form option {
   padding: 0;