Gallery hub project list modal#15951
Conversation
ramram-mf
changed the base branch from
main
to
TP1-3744-gallery-hub-landing-page-frontend
…e-frontend' into TP1-3891-gallery-hub-project-list-modal # Conflicts: # foundation_cms/static/js/components/gallery_hub/config.js # foundation_cms/static/js/components/gallery_hub/overlay.js
ramram-mf
changed the title
…91-gallery-hub-project-list-modal
There was a problem hiding this comment.
Hi @ramram-mf great work on this too! Some change requests:
- My fault, can we update the 'Close' button to match the 'Project List' and 'Filter' buttons? So on desktop the font-size should be 1.25rem and bolded and the padding should be 24px left/right and 16px top/bottom. On mobile the font-size should be 1 rem and bolded and the padding (which needs to be edited on the 'Project List' and 'Filter' buttons too) should be 16px padding left/right and 8px top/bottom
- Can we also remove the extra spacing on the left side of the 'Project List' button and the right side of the 'Filter' button. They should be flush against the sides of the screen (but maintaining the 16px margin)
- For the project list view can we increase the width of project image from 2rem to 3rem and increase the gap between the image and title to 1.5rem
- Can we also increase the font-size of the titles from 0.75rem to 0.875rem?
Thank you!!
…91-gallery-hub-project-list-modal
…91-gallery-hub-project-list-modal
There was a problem hiding this comment.
Thanks @ramram-mf . PR is looking good. Just some minor issues need to be addressed. Also flagging all the new line-height overrides in _modals.scss. They go against the design system. cc @beccaklam in case this is worth a note in the design specs too.
| <span class="gallery-hub-project-list__image gallery-hub-project-list__image--slot-{{ forloop.counter }} {% cycle 'gallery-hub-project-list__image--shape-3' 'gallery-hub-project-list__image--shape-1' 'gallery-hub-project-list__image--shape-7' 'gallery-hub-project-list__image--shape-4' 'gallery-hub-project-list__image--shape-6' 'gallery-hub-project-list__image--shape-8' %}"> | ||
| <img src="{{ list_img.url }}" | ||
| alt="" | ||
| width="{{ list_img.width }}" | ||
| height="{{ list_img.height }}" | ||
| loading="lazy"> | ||
| </span> | ||
| {% else %} | ||
| <span class="gallery-hub-project-list__image gallery-hub-project-list__image--fallback gallery-hub-project-list__image--slot-{{ forloop.counter }} {% cycle 'gallery-hub-project-list__image--shape-3' 'gallery-hub-project-list__image--shape-1' 'gallery-hub-project-list__image--shape-7' 'gallery-hub-project-list__image--shape-4' 'gallery-hub-project-list__image--shape-6' 'gallery-hub-project-list__image--shape-8' %}"></span> |
There was a problem hiding this comment.
These two {% cycle %} tags (lines 154 and 162) are in separate {% if %}/{% else %} branches, so Django treats them as independent counters. This means the first project without a hero image will always gets shape-3 instead of continuing the sequence from the previous item.
| projectMarker: "[data-gallery-hub-project-marker]", | ||
| modalLayer: "[data-gallery-hub-modal-layer]", | ||
| modal: "[data-gallery-hub-modal]", | ||
| modalScrollable: ".gallery-hub-modal__body", |
There was a problem hiding this comment.
Could we target this node by a data attribute like other nodes in GALLERY_HUB_SELECTORS?
| const isVisible = visibleProjectIds.has(projectId); | ||
| const isActive = projectId === activeProjectId; | ||
|
|
||
| item.closest(".gallery-hub-project-list__item").hidden = !isVisible; |
There was a problem hiding this comment.
Could we add a data attribute to this and target that attribute instead of .gallery-hub-project-list__item? This will maintain existing pattern in this file as well as prevent things from breaking if the class is renamed.
| document.addEventListener("keydown", (event) => { | ||
| trapModalFocus(event, modals, getGalleryHubState().modalOpen); | ||
| }); |
There was a problem hiding this comment.
Let's merge the two document.addEventListener("keydown", (event) => { together.
| data-gallery-hub-project-list-item | ||
| data-project-id="{{ project.id }}"> | ||
| {% if project.hero_image %} | ||
| {% image project.hero_image fill-160x120 as list_img %} |
There was a problem hiding this comment.
Should image be rendered as square?
| {% image project.hero_image fill-160x120 as list_img %} | |
| {% image project.hero_image fill-98x98 as list_img %} |
3 participants
Description
This PR implements the Project List modal inside the Gallery Hub landing page.
Project list modal
Link to sample test page: https://foundation-s-tp1-3891-g-ibj4sl.mofostaging.net/en/gallery/
Related PRs/issues: Jira Ticket