sul-dlss / earthworks

Geospatial discovery application for Stanford University Libraries.
https://earthworks.stanford.edu
Other
21 stars 3 forks source link

Remove extra border around facets on mobile view #1277

Closed dbranchini closed 1 week ago

dbranchini commented 2 weeks ago

Each facet has a border, so we do not need to wrap all of them with another border. It's only happening on mobile view. Also, I think we need to center "Limit your search" and the "Show/Hide facets" button vertically. And lastly, if possible, the button should be a primary outline button instead of the default gray.

hudajkhan commented 2 weeks ago

The border line appears to come in from Blacklight: https://github.com/projectblacklight/blacklight/blob/main/app/assets/stylesheets/blacklight/_facets.scss#L52

hudajkhan commented 2 weeks ago

For the border color for the button, would you mind providing a similar example or the color you like? I assume you want btn-primary-outline (or similar) but just want to confirm.

Also, I am applying the spacing changes only to the mobile version. Is the correct? Or would you like to change the border color for all window sizes, not just mobile?

hudajkhan commented 2 weeks ago

The PR above addresses the section border and spacing, but not the button itself. It might be good to do a different PR overriding the button as a whole/using the component as opposed to just CSS changes.

hudajkhan commented 2 weeks ago

Also, the button doesn't exist in the desktop version, so that answers one of my questions above.

dbranchini commented 2 weeks ago

It should use the primary blue outline button seen here - https://sul-dlss.github.io/component-library/button/. Pick a size that's closest to the button that's there now.

hudajkhan commented 2 weeks ago

Thanks. For reference, the code for the "show/hide facets" button is here: https://github.com/projectblacklight/blacklight/blob/main/app/components/blacklight/response/facet_group_component.html.erb

jcoyne commented 2 weeks ago

This may have been an inadvertent change in Blacklight https://github.com/projectblacklight/blacklight/commit/32373178d88f529855adbb73df3630865a8e53ba. Can we fix it there?

jcoyne commented 2 weeks ago

Actually, it's just easer to set

.facets-header {
  --bl-facets-smallish-border: none;
  --bs-navbar-toggler-border-color: var(--stanford-digital-blue);
  --bs-navbar-color: var(--stanford-digital-blue);
}
hudajkhan commented 2 weeks ago

Closed by #1309