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

EDSC-4421: Fixing styling discrepancies from bootstrap upgrade #1870

Merged
merged 8 commits into from
Feb 28, 2025
+12 −3
Merged

EDSC-4421: Fixing styling discrepancies from bootstrap upgrade #1870

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
dfa7cb1
EDSC-4421 Fixing Facet text cutoff
dpesall Feb 26, 2025
0577ebe
EDSC-4421 Fixing additional filters text wrapping
dpesall Feb 26, 2025
f3806b8
EDSC-4421 Fixing shapefile 'x' button. Aligning subscription action b…
dpesall Feb 26, 2025
8fefa6f
EDSC-4421 Fixing test
dpesall Feb 26, 2025
b4beaa7
EDSC-4421 Adjusting modal header
dpesall Feb 28, 2025
a04bdfc
EDSC-4421 Simplifying css fixes
dpesall Feb 28, 2025
4439c1f
EDSC-4421 PR feedback
dpesall Feb 28, 2025
ca118af
EDSC-4421 simplifying css fix
dpesall Feb 28, 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
1 change: 1 addition & 0 deletions static/src/js/components/Facets/FacetsItem.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@
display: flex;
align-items: center;
flex: 1;
overflow: hidden;
}

&__title {
Expand Down
4 changes: 4 additions & 0 deletions static/src/js/components/ShapefileUploadModal/ShapefileUploadModal.scss
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

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

@dpesall / @eudoroolivares2016, I played around with this and a better way to fix it would be to add the following in the &:before on line 37

&:before {
    ...
    user-select: none;

    .is-dragging & {
        ....
    }
}

This will prevent that pseudo element from intercepting the click events 😄

Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,10 @@
margin-right: calc(bootstrap.$spacer / 2);
}

&__header {
z-index: 0;
}

Copy link
Collaborator

Choose a reason for hiding this comment

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

Suggested change
&__header {
z-index: 0;
}

.modal-content {
position: relative;
padding: 0.55rem;
Expand Down
1 change: 1 addition & 0 deletions static/src/js/components/Sidebar/SidebarFiltersItem.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
&__body {
padding: 0.75rem 0.75rem 1rem;
border-bottom: 1px solid utils.$color__carbon--20;
font-size: 0.825rem;

.sidebar-filters-item--no-padding & {
padding: 0;
Expand Down
2 changes: 1 addition & 1 deletion static/src/js/components/SubscriptionsList/SubscriptionsListTable.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ export const SubscriptionsListTable = ({
)
}
>
<EDSCIcon icon={AlertInformation} className="subscriptions-list__button" />
<EDSCIcon icon={AlertInformation} className="subscriptions-list__button align-middle" />
</OverlayTrigger>
<PortalLinkContainer
className="subscriptions-list__button subscriptions-list__button--edit"
Expand Down
5 changes: 5 additions & 0 deletions static/src/js/components/SubscriptionsList/SubscriptionsListTable.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,11 @@

&__actions {
text-align: center;
div {
Copy link
Collaborator

Choose a reason for hiding this comment

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

We need to avoid doing nested selectors if we can. If you cant avoid nesting then maybe theres a class you can use instead of an element selector.

Copy link
Contributor

Choose a reason for hiding this comment

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

Shouldn't need this at all with the addition of the align-middle bootstrap class in SubscriptionListTable.jsx

display: flex;
align-items: center;
justify-content: center;
}
}

&__name,
Expand Down
2 changes: 1 addition & 1 deletion tests/e2e/tour/tour.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -349,7 +349,7 @@ test.describe('When not logged in', () => {
left: -10,
top: 189,
width: 338,
height: 742
height: 720
}, 10, 6)

// Step 7: Refine Search by Category
Expand Down
Loading