From 8e44b3b74bb0b91658715207f757b5778c5af5f7 Mon Sep 17 00:00:00 2001
From: Jenn Giardino <jgiardin@redhat.com>
Date: Wed, 22 Jul 2020 16:50:33 -0400
Subject: [PATCH] pagination: adjust spacing

Some styles included for pagination don't work for the context in which
this component is used. Updates include removing padding, hiding the
options menu at smaller viewports, and removing the box shadow.

Also includes some refactoring that was needed as part of #1034
---
 pages/blueprintEdit/index.css | 29 ++++++++++++++++++---
 pages/blueprintEdit/index.js  |  2 +-
 public/custom.css             | 47 +++--------------------------------
 3 files changed, 31 insertions(+), 47 deletions(-)

diff --git a/pages/blueprintEdit/index.css b/pages/blueprintEdit/index.css
index 5fb24203b..ce04b4c1c 100644
--- a/pages/blueprintEdit/index.css
+++ b/pages/blueprintEdit/index.css
@@ -1,10 +1,33 @@
 #cmpsr-blueprint-input-filter {
-  min-width: 45%;
+  min-width: 60%;
+}
+
+.pf-c-pagination.pf-m-bottom .pf-c-options-menu {
+  display: none;
+}
+
+.pf-c-pagination.pf-m-bottom {
+  --pf-c-pagination--m-bottom--BoxShadow: none;
+}
+
+/* The base size for smaller viewports in patternfly-cockpit.scss is too small
+/* for this context. Using the size defined for larger viewports instead. */
+.toolbar-pf-results ul {
+  line-height: 40px;
 }
 
 @media screen and (min-width: 768px) {
-  /* this is when the pagination changes to just previous/next buttons, and at this size, 45% is too small for the input */
+  /* this is when the pagination changes from just previous/next buttons to the full control
+  /* at this size and above, 45% is large enough for the input */
   #cmpsr-blueprint-input-filter {
-    min-width: 60%;
+    min-width: 45%;
+  }
+
+  .pf-c-pagination.pf-m-bottom {
+    padding: 0;
+  }
+
+  .pf-c-pagination.pf-m-bottom .pf-c-options-menu {
+    display: block;
   }
 }
diff --git a/pages/blueprintEdit/index.js b/pages/blueprintEdit/index.js
index dcc11a173..92fba49c9 100644
--- a/pages/blueprintEdit/index.js
+++ b/pages/blueprintEdit/index.js
@@ -575,7 +575,7 @@ class EditBlueprintPage extends React.Component {
                   onKeyPress={(e) => this.getFilteredInputs(e)}
                 />
                 <Pagination
-                  className="pf-m-flex-1 pf-u-flex-nowrap-on-lg pf-u-ml-md"
+                  className="pf-m-flex-1 pf-u-flex-nowrap-on-lg pf-u-ml-md-on-md"
                   itemCount={inputs.totalInputs}
                   perPage={this.state.pageSize}
                   page={this.state.page}
diff --git a/public/custom.css b/public/custom.css
index 0599c13da..92c2f774c 100644
--- a/public/custom.css
+++ b/public/custom.css
@@ -83,7 +83,10 @@
 .cmpsr-panel__body  .toolbar-pf .toolbar-pf-actions {
   padding-top: 10px;
 }
-.cmpsr-panel__body--sidebar .pf-c-pagination {
+.cmpsr-panel__body--sidebar .toolbar-pf .toolbar-pf-actions {
+  margin-bottom: 0;
+}
+.cmpsr-panel__body--sidebar .toolbar-pf .toolbar-pf-actions > *:last-child {
   margin-bottom: 10px;
 }
 .toolbar-pf-results {
@@ -257,48 +260,6 @@ h1.cmpsr-title__item {
     flex-basis: calc(50% - 20px);
   }
 }
-/* pagination */
-.toolbar-pf-results .content-view-pf-pagination {
-  margin-bottom: 5px;
-  margin-top: 5px;
-  background-color: transparent;
-  border: none;
-  -webkit-box-pack: end;
-          justify-content: flex-end;
-  -webkit-box-align: baseline;
-          align-items: baseline;
-}
-.toolbar-pf-results .pagination {
-  align-self: center;
-}
-.toolbar-pf-results .pagination-pf-page,
-.toolbar-pf-results .pagination.pagination-pf-forward {
-  margin-left: 5px;
-}
-.toolbar-pf-results .pagination-pf-page {
-  display: inline;
-}
-.pagination-cmpsr-pages {
-  display: -webkit-box;
-  display: flex;
-}
-/* given complexity of this component related to sr a11y and i18n, 
-this applies sr-only styles to the child span, which includes 
-the translated screenreader text, while the next line provides 
-the "-" that would display instead of the sr-only "to" */
-.pagination-cmpsr-to > span {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0,0,0,0);
-  border: 0;
-}
-.pagination-cmpsr-to:before {
-  content: "\2013";
-}
 
 /* sidebar */
 .cmpsr-panel__body--sidebar .toolbar-pf-actions .toolbar-pf-filter {