Add gallery hub filter panel#15954
Conversation
…gallery-hub-filter-panel # Conflicts: # foundation_cms/static/js/components/gallery_hub/overlay.js # foundation_cms/static/scss/components/gallery_hub/_modals.scss # foundation_cms/static/scss/components/gallery_hub/_settings.scss
…gallery-hub-filter-panel
…gallery-hub-filter-panel
There was a problem hiding this comment.
Hi @ramram-mf this is looking great! Some issues though:
- the program, country and year filters should actually be styled with check boxes (since they are not topic tags and that pill style is particular to topic tags):
-
I also can't scroll on mobile when I test the page on my phone?
-
The 'display results' button should also having 1rem of padding all around it:
…gallery-hub-filter-panel
…gallery-hub-filter-panel
…gallery-hub-filter-panel
mmmavis
left a comment
mmmavis
left a comment
There was a problem hiding this comment.
Love it! Functionality and UX/UI are all very sleek I left a few inline comments for small things. I did find one bug - when the filter panel is open, the site nav and search are still expandable but their dropdowns appear behind the filter overlay. @beccaklam , what should the expected behaviour be? My instinct is the filter should close when the user opens the nav or search, but will rely on your expertise to settle on the decision
…t-modal' into TP1-3892-gallery-hub-filter-panel # Conflicts: # foundation_cms/static/js/components/gallery_hub/overlay.js # foundation_cms/templates/patterns/pages/gallery_hub/gallery_page.html
…gallery-hub-filter-panel
There was a problem hiding this comment.
Hi @ramram-mf , thank you for making those changes! Just a few more requests upon a second inspection:
- The icons in the filter should be 32x32 instead of 24x24
- On desktop can we decrease the spacing between topic tags (gallery-hub-filter__options) to
gap: 1rem .5remfromgap: 1.5rem 1rem - Can we also decrease the gap between the check boxes on desktop from 1.5rem to 1rem?
- Also, my apologies, I should have specified that moving the 'Project List' and 'Filter' buttons pertained only to Mobile. Mobile looks good now but Desktop should look like this (note the red lines for alignment):
…gallery-hub-filter-panel
…gallery-hub-filter-panel
3 participants
Description
This PR implements the filter feature for the Gallery Hub landing page
Gallery page filter feature
Link to sample test page: https://foundation-s-tp1-3892-g-gqcovp.mofostaging.net/en/gallery/
Related PRs/issues: Jira Ticket