Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 10 commits into
base: dev
Choose a base branch
from
Open

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

Changes from 2 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
7a83380
Fixes issue_#1196
Mar 2, 2025
9131057
Merge branch 'dev' into 1196-arrange-the-show-100-csv-customize-colum…
CarsonDavis Mar 6, 2025
9d68d85
Remove old styling after updating new styling
Mar 7, 2025
dead9e6
Merge branch '1196-arrange-the-show-100-csv-customize-columns-boxes-t…
Mar 7, 2025
45176d8
Merge branch 'dev' into 1196-arrange-the-show-100-csv-customize-colum…
saifrk Mar 7, 2025
65cf30d
Updated Changelog
Mar 7, 2025
6a68fbb
Merge branch '1196-arrange-the-show-100-csv-customize-columns-boxes-t…
Mar 7, 2025
a48c9a7
Latest Updated Changes
Mar 8, 2025
7479bb6
Merge branch 'dev' into 1196-arrange-the-show-100-csv-customize-colum…
saifrk Mar 8, 2025
f47aba8
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] Mar 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 59 additions & 3 deletions sde_indexing_helper/static/css/delta_url_list.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,8 +211,6 @@
}

.modalFooter {
position: sticky;
bottom: 0;
position: sticky;
bottom: 0;
padding: 10px 0;
Expand Down Expand Up @@ -440,7 +438,6 @@ div.dt-buttons .btn.processing:after {
}


/* pagination position */
div.dt-container div.dt-paging ul.pagination {
position: absolute;
right: 60px;
Expand All @@ -451,3 +448,62 @@ div.dt-container div.dt-paging ul.pagination {
max-width: 100%;
min-width: 100%;
}

.dt-container {
position: relative;
}

.dt-container div.dt-buttons {
display: flex !important;
gap: 10px !important;
align-items: center !important;
justify-content: flex-end;
position: absolute;
right: 0;
top: 0;
}

.buttons-csv,
.customizeColumns,
.addPattern {
border-style: solid !important;
border-color: #A7BACD !important;
border-width: 1px !important;
color: #A7BACD !important;
border-radius: 5px !important;
padding: 11px 15px !important;
margin: 0 !important;
height: 43px !important;
display: flex !important;
align-items: center !important;
}

#exclude_patterns_table_wrapper,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you explain these additional css modifications? How do they affect the ordering of Show 100, CSV, and Customize Columns?

Copy link
Collaborator Author

@saifrk saifrk Mar 7, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Brief description of all modifications made:

  • The .dt-container sets 'position: relative' on the .dt-container element which establishes the container as the positional reference for any child elements that are positioned absolutely(Any child with 'position: absolute' will be positioned relative to the boundaries of .dt-container, not the entire page)
  • The .dt-container div.dt-buttons handles the alignment of the "Show 100" "CSV" and "Customize CSV" buttons. It uses 'flexbox' to arrange the buttons in a row, spaces them with 'gap', centers them vertically with 'align-items: center' and positions the group at the top right corner of its container with 'position: absolute' and 'justify-content: flex-end'
  • The Updated styling includes modifications to properties like margin and display settings
  • The subsequent code is associated with adjusting spacing and positioning as needed, due to the absolute positioning of .dt-buttons affecting the original placement of 'Add Pattern' and 'Customize Columns' in the Exclude/Include/Title pattern sections.

#include_patterns_table_wrapper,
#document_type_patterns_table_wrapper,
#title_patterns_table_wrapper {
margin-top: 15px !important;
}

#exclude_patterns_table_wrapper table,
#include_patterns_table_wrapper table,
#document_type_patterns_table_wrapper table,
#title_patterns_table_wrapper table {
margin-top: 15px !important;
}

#exclude_patterns_table_wrapper .addPattern,
#include_patterns_table_wrapper .addPattern,
#document_type_patterns_table_wrapper .addPattern,
#title_patterns_table_wrapper .addPattern,
#exclude_patterns_table_wrapper .customizeColumns,
#include_patterns_table_wrapper .customizeColumns,
#document_type_patterns_table_wrapper .customizeColumns,
#title_patterns_table_wrapper .customizeColumns {
margin-top: -10px !important;
}

#delta_urls_table_wrapper .dt-buttons,
#curated_urls_table_wrapper .dt-buttons {
gap: 3px !important;
}