HARMONY-1492: Center the paging links toward the bottom middle

nasa · Jul 3, 2023 · 9608e1e · 9608e1e
1 parent ff0444b
commit 9608e1e
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git a/app/views/workflow-ui/job/work-items-table.mustache.html b/app/views/workflow-ui/job/work-items-table.mustache.html
@@ -26,7 +26,7 @@
         {{/workItems}}
     </tbody>
 </table>
-<nav aria-label="Page navigation" class="d-flex flex-column align-items-center">
+<nav id="page-nav" aria-label="Page navigation" class="d-flex flex-column align-items-center">
     <ul class="pagination px-0 mx-auto">
         {{#links}}
         <li class="page-item {{linkDisabled}}">

diff --git a/app/views/workflow-ui/jobs/index.mustache.html b/app/views/workflow-ui/jobs/index.mustache.html
@@ -77,7 +77,7 @@
             </div>
             <div class="col-10">
                 {{> workflow-ui/jobs/jobs-table}}
-                <nav aria-label="Page navigation" class="d-flex flex-column align-items-center">
+                <nav id="page-nav" aria-label="Page navigation" class="d-flex flex-column align-items-center">
                     <ul class="pagination px-0 mx-auto">
                         {{#links}}
                         <li class="page-item {{linkDisabled}}">

diff --git a/public/css/workflow-ui/default.css b/public/css/workflow-ui/default.css
@@ -26,4 +26,18 @@ body {
 .z-1050 {
     /* Ensures that toast elements appear above most elements */
     z-index: 1050;
+}
+
+#page-nav {
+    /* Center the paging links toward the bottom middle */
+    bottom: 40px;
+    position: fixed;
+    left: 50%;
+    transform: translate(-50%, 0);   
+}
+
+#page-nav > ul > li > a {
+    box-shadow: 2px 3px 3px #c2bbbb;
+    -moz-box-shadow: 2px 3px 3px #c2bbbb;
+    -webkit-box-shadow: 2px 3px 3px #c2bbbb;
 }