From 8396f2d987020116694dcb5b2e46a7b3735afa46 Mon Sep 17 00:00:00 2001
From: Andrey Pham <andrey.pham@move.com>
Date: Sun, 13 Feb 2022 16:46:24 -0800
Subject: [PATCH] fix(eda.plot): fix pagination styling issues

---
 dataprep/eda/templates/grid_base.html    | 13 ++---
 dataprep/eda/templates/grid_scripts.html |  2 -
 dataprep/eda/templates/grid_styles.html  | 74 ++++++++++++++++--------
 3 files changed, 55 insertions(+), 34 deletions(-)

diff --git a/dataprep/eda/templates/grid_base.html b/dataprep/eda/templates/grid_base.html
index 8cbfc4424..57cdd86bb 100644
--- a/dataprep/eda/templates/grid_base.html
+++ b/dataprep/eda/templates/grid_base.html
@@ -123,6 +123,12 @@
         {% endfor %}
     </div>
     {% endif %}
+    <div class="num-of-plots-{{ context.rnd }}">
+        <p>Number of plots per page: </p>
+	    <input type="button" id="decrease-num-per-page-{{ context.rnd }}" value="-" class="num-of-plots-minus-{{ context.rnd }}" onclick="decreaseNum()">
+        <input type="number" id="num-per-page-{{ context.rnd }}" value="3" onchange="changeNum()"/>
+        <input type="button" id="increase-num-per-page-{{ context.rnd }}" value="+" class="num-of-plots-plus-{{ context.rnd }}" onclick="increaseNum()">
+    </div>
     <div class="plot-{{ context.rnd }}">
         {% for fig in context.components[1] %}
         <div class="fig-{{ context.rnd }}">
@@ -170,13 +176,6 @@
         {% endfor %}
     </div>
     <div class="pagination-{{ context.rnd }}"></div>
-    <form class="pagination-form-{{ context.rnd }}" onsubmit="return false">
-        <p>Number of plots per page</p>
-        <div class="pagination-button-{{ context.rnd }}" id="decrease-num-per-page-{{ context.rnd }}" onclick="decreaseNum()" value="Decrease Num">-</div>
-        <input type="number" id="num-per-page-{{ context.rnd }}" value="3" onchange="changeNum()"/>
-        <div class="pagination-button-{{ context.rnd }}" id="increase-num-per-page-{{ context.rnd }}" onclick="increaseNum()" value="Increase Num">+</div>
-    </form>
-    <br/><br/>
 </body>
 
 </html>
diff --git a/dataprep/eda/templates/grid_scripts.html b/dataprep/eda/templates/grid_scripts.html
index 5216bd442..3ad02bba1 100644
--- a/dataprep/eda/templates/grid_scripts.html
+++ b/dataprep/eda/templates/grid_scripts.html
@@ -159,6 +159,4 @@
             checkFragment();
         });
     }
-
-
 </script>
\ No newline at end of file
diff --git a/dataprep/eda/templates/grid_styles.html b/dataprep/eda/templates/grid_styles.html
index b5e8e4fd1..735b4743b 100644
--- a/dataprep/eda/templates/grid_styles.html
+++ b/dataprep/eda/templates/grid_styles.html
@@ -686,14 +686,10 @@
         cursor: default;
     }
 
-    .pagination-form-{{ context.rnd }} {
-        text-align: center;
-        padding-top: 50px;
-    }
-
     .pagination-{{ context.rnd }} {
         text-align: center;
         padding-top: 50px;
+        padding-bottom: 50px;
     }
 
     .pagination-button-{{ context.rnd }} {
@@ -718,26 +714,19 @@
         cursor: pointer;
     }
 
-    form #decrease-num-per-page-{{ context.rnd }} {
-        margin-right: -4px;
-        border-radius: 8px 0 0 8px;
-    }
-
-    form #increase-num-per-page-{{ context.rnd }} {
-        margin-left: -4px;
-        border-radius: 0 8px 8px 0;
+    html {
+        display: table;
+        margin: auto;
     }
 
-    form #input-wrap {
-        margin: 0px;
-        padding: 0px;
+    body {
+        display: table-cell;
+        vertical-align: middle;
     }
 
     input#num-per-page-{{ context.rnd }} {
         text-align: center;
-        border: none;
-        border-top: 1px solid #ddd;
-        border-bottom: 1px solid #ddd;
+        border: 1px solid #ddd;
         margin: 0px;
         width: 40px;
         height: 40px;
@@ -749,13 +738,48 @@
         margin: 0;
     }
 
-    html {
-        display: table;
-        margin: auto;
+    .num-of-plots-{{ context.rnd }} {
+         text-align: center;
+         padding-top: 30px;
     }
 
-    body {
-        display: table-cell;
-        vertical-align: middle;
+    .num-of-plots-{{ context.rnd }} input,
+    .num-of-plots-{{ context.rnd }} p {
+         display: inline-block;
+         margin: 0;
+         vertical-align: middle;
+         box-shadow: none;
+         font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
+         font-size: 15px;
+    }
+
+    .num-of-plots-minus-{{ context.rnd }},
+    .num-of-plots-plus-{{ context.rnd }} {
+         padding: 7px 10px 8px;
+         height: 41px;
+         background-color: #ffffff;
+         border: 1px solid #ddd;
+         cursor:pointer;
+    }
+
+    .num-of-plots-minus-{{ context.rnd }} {
+        margin-right: -4px;
+        border-radius: 8px 0 0 8px;
+    }
+
+    .num-of-plots-plus-{{ context.rnd }} {
+        margin-left: -4px;
+        border-radius: 0 8px 8px 0;
     }
+
+    .num-of-plots-minus-{{ context.rnd }}:hover,
+    .num-of-plots-plus-{{ context.rnd }}:hover {
+        background: #eeeeee;
+    }
+
+    .num-of-plots-minus-{{ context.rnd }}:focus,
+    .num-of-plots-plus-{{ context.rnd }}:focus {
+        outline: none;
+    }
+
 </style>