Clean up pagination controls (CMF-55) (#5)

* Clean up pagination controls (CMF-55) * Set pagination limit form to same values as Registry 4.x (CMF-55)
COmanage · Jan 14, 2022 · dac7bd5 · dac7bd5
1 parent 3dfee4a
commit dac7bd5
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 15 deletions.
diff --git a/app/resources/locales/en_US/operation.po b/app/resources/locales/en_US/operation.po
@@ -88,10 +88,10 @@ msgid "next"
 msgstr "Next"
 
 msgid "page.display"
-msgstr "Display"
+msgstr "Display records"
 
 msgid "page.goto"
-msgstr "Go To Page"
+msgstr "Go to page"
 
 msgid "previous"
 msgstr "Previous"

diff --git a/app/templates/element/pagination.php b/app/templates/element/pagination.php
@@ -63,14 +63,15 @@ class="pagination-form"
             return false;">
       <label for="pageNum"><?= __d('operation', 'page.goto'); ?></label>
       <input type="text" size="3" name="pageNum" id="pageNum"/>
-      <input type="submit" value="<?= __d('operation', 'op.go'); ?>"/>
+      <input type="submit" value="<?= __d('operation', 'go'); ?>"/>
     </form>
   <?php endif; ?>
 
   <?php
-    if($this->Paginator->counter('{{pages}}') > 25) {
+  // XXX Change this test to 25 when the default is 25
+  if($this->Paginator->counter('{{count}}') > 20) {
       // Provide a form for setting the page limit.
-      // Default is 25 records, current maximum is 100.
+      // Default is 20 records (XXX but will be 25), maximum is 100.
       // For now we will simply hard-code the options from 25 - 100.
 
       print $this->Form->create(null, [ 'type' => 'get', 'class' => 'pagination-form' ]);
@@ -96,10 +97,10 @@ class="pagination-form"
         'type' => 'select',
         'label' => __d('operation', 'page.display'),
         'value' => $this->request->getQuery('limit'),
-        'options' => [25 => 25, 50 => 50, 100 => 100],
-        'onChange' => 'this.form.submit()'
+        'options' => [25 => 25, 50 => 50, 75 => 75, 100 => 100]
       ]);
 
+      print $this->Form->submit(__d('operation', 'go'));
       print $this->Form->end();
     }
   ?>

diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
@@ -828,7 +828,9 @@ th.actions {
 }
 #pagination .pagination-form {
   display: inline-block;
-  margin-left: 2em;
+}
+#pagination #goto-page {
+  margin: 0 2em;
 }
 #pagination .pagination-form label {
   margin-bottom: 0;
@@ -840,24 +842,27 @@ th.actions {
   padding: 2px;
   font-size: 0.9em;
   background-color: var(--cmg-color-lightgray-004);
-  border: 1px solid var(--cmg-color-green-005);
+  border: 1px solid var(--cmg-color-lightgray-004);
+  border-radius: 0.25rem;
   text-align: center;
 }
 #pagination .pagination-form select {
-  margin: 0 0.5rem;
-  padding: 0 0.25rem;
+  margin: 0 0.25rem 0 0.5rem;
+  padding: 0 2rem 0 0.25rem;
   font-size: 0.9em;
   display: inline-block;
   line-height: unset;
   width: unset;
   height: unset;
+  border: 1px solid var(--cmg-color-lightgray-001);
+  background-color: var(--cmg-color-lightgray-001);
 }
 #pagination .pagination-form option {
   padding: 0;
 }
 #pagination .pagination-form input[type="submit"] {
   width: auto;
-  margin: 0 0 0 2px;
+  margin: -3px 0 0 2px;
   padding: 0 4px;
   min-width: 0;
   min-height: 0;
@@ -871,13 +876,19 @@ th.actions {
   top: 1px;
 }
 #pagination .btn-primary {
-  background-color: var(--cmg-color-green-006);
-  border-color: var(--cmg-color-green-005);
+  background-color: var(--cmg-color-blue-003);
+  border-color: var(--cmg-color-blue-002);
 }
-#pagination .btn-primary:hover {
+#pagination .btn-primary:hover,
+#pagination .btn-primary:focus,
+#pagination .btn-primary:active {
   background-color: var(--cmg-color-gray-001) !important;
   border-color: var(--cmg-color-black);
 }
+#pagination div.submit,
+#pagination div.select {
+  display: inline-block;
+}
 ::-webkit-input-placeholder,
 ::-moz-placeholder,
 :-ms-input-placeholder,