Merge pull request #1242 from NASA-IMPACT/1196-arrange-the-show-100-csv-customize-columns-boxes-to-be-in-one-line-on-the-delta-urls-page

Alignment of ‘Show 100’, ‘CSV’, ‘CUSTOMIZE COLUMNS’

Author: CarsonDavis

CHANGELOG.md

@@ -114,6 +114,12 @@ For each PR made, an entry should be added to this changelog. It should contain
     - Added `escapeHtml` function in the `delta_url_list.js` file to handle special character escaping correctly.
     - Called this function while retrieving the titles in `getGeneratedTitleColumn()` and `getCuratedGeneratedTitleColumn()` functions.
 
+- 1196-arrange-the-show-100-csv-customize-columns-boxes-to-be-in-one-line-on-the-delta-urls-page
+  changelog-update-Issue-1001
+  - Description: Formatting the buttons - 'Show 100','CSV' and 'Customize Columns' to be on a single line for an optimal use of space.
+  - Changes:
+    - Updated delta_url_list.css and delta_url_list.js files with necessary modifications
+
 - 1246-minor-enhancement-document-type-pattern-form-require-document-type-or-show-appropriate-error
   - Description: In the Document Type Pattern Form, if the user does not select a Document Type while filling out the form, an appropriate error message is displayed.
   - Changes:

sde_indexing_helper/static/css/delta_url_list.css

@@ -211,8 +211,6 @@
 }
 
 .modalFooter {
-    position: sticky;
-    bottom: 0;
     position: sticky;
     bottom: 0;
     padding: 10px 0;
@@ -255,8 +253,6 @@
     font-weight: 500;
 }
 
-
-
 .custom-select,
 .buttons-csv,
 .customizeColumns,
@@ -440,7 +436,6 @@ div.dt-buttons .btn.processing:after {
 }
 
 
-/* pagination position */
 div.dt-container div.dt-paging ul.pagination {
     position: absolute;
     right: 60px;
@@ -451,3 +446,31 @@ div.dt-container div.dt-paging ul.pagination {
     max-width: 100%;
     min-width: 100%;
 }
+
+#delta_urls_table_wrapper .col-md {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    grid-auto-flow: row;
+    position: relative;
+
+    .dt-info {
+        position:absolute;
+        left: 130px;
+        top: 5px;
+    }
+}
+
+#curated_urls_table_wrapper .col-md {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    grid-auto-flow: row;
+    position: relative;
+
+    .dt-info {
+        position:absolute;
+        left: 130px;
+        top: 5px;
+    }
+}

sde_indexing_helper/static/js/delta_url_list.js

@@ -114,14 +114,15 @@ function initializeDataTable() {
     layout: {
       bottomEnd: "inputPaging",
       topEnd: null,
-      topStart: {
-        info: true,
+      topStart: null,
+      top: {
         pageLength: {
           menu: [
             [25, 50, 100, 500],
             ["Show 25", "Show 50", "Show 100", "Show 500"],
           ],
         },
+        info:true,
         buttons: [
           {
             extend: "csv",
@@ -332,14 +333,15 @@ function initializeDataTable() {
     layout: {
       bottomEnd: "inputPaging",
       topEnd: null,
-      topStart: {
-        info: true,
+      topStart: null,
+      top: {
         pageLength: {
           menu: [
             [25, 50, 100, 500],
             ["Show 25", "Show 50", "Show 100", "Show 500"],
           ],
         },
+        info:true,
         buttons: [
           {
             extend: "csv",