Home Page Themes #142

jillpe · 2024-10-01T21:26:36Z

Summary

As much as possible, changes should be made in Hyku as issues also exist there.

Details of issues (some have already been resolved)

Default Theme

The Recently Uploade works are displaying as code rather than thumbnails.

Screenshots

Currently Looks Like

It should look like

Cultural Theme

Recent Works section is not responsive. Users have to horizontally scroll when using a smaller screen size.

Video

Screen.Recording.2024-10-02.at.8.31.07.AM.mov

The featured Collections do not span the entire container like hykucommons. See screenshots.

Screenshots

Currently

HykuCommons

Institutional Theme

Does not carousel work types smoothly - moved to separate ticket
The footer is not the standard footer and forces the user to horizontally scroll. See screenshots.

Screenshots

[Currently](https://demo.palni-palci-staging.notch8.cloud/?locale=en)

Screen.Recording.2024-10-02.at.8.39.51.AM.mov

HykuCommons Example

The Work Type banner has some funky behavior when you click the arrows to scroll. See video.

Video

[Currently](https://demo.palni-palci-staging.notch8.cloud/?locale=en)

Screen.Recording.2024-10-02.at.8.43.46.AM.mov

HykuCommons

Screen.Recording.2024-10-02.at.8.44.40.AM.mov

Neutral Theme Home Page

Line with buttons below image should apparently overlay image
No outline around featured collections
The footer has a white bar underneath it. See video.

Video

Currently

Screen.Recording.2024-10-02.at.8.48.28.AM.mov

HykuCommons
https://github.com/user-attachments/assets/c36d1dcd-26d2-4439-a502-07c9dcfa4971

Acceptance Criteria

Default Theme Home Page

'Recently Uploaded' items display as thumbnails and title like hykucommons

Cultural Theme Home Page

Recent Works Section is responsive
Featured Collections span the entire container like HykuCommons

Institutional Theme Home Page

Footer is the standard footer (example: hykucommons)
~~The work types banner behaves like the HykuCommons version~~ Moved to Institutional Repository carousel does not work #189

Neutral Theme Home Page

The footer resembles the HykuCommons footer

Color behavior

Go, Advanced, and All button colors behave consistently among all homepage themes

Notes:

There are expected revisions to the previous button color behavior.
Primary button behavior:

hover color option now controls background, border, and hover color of all primary buttons, such as homepage go button. This is new behavior, as previously the primary button color could not be modified. The hover color will be a darker version of the background.
primary button text color can now be set.

Default button behavior:

default button background color appears consistently on all "Secondary" button classes. The hover color is a darker version of the background.
default button text now applies consistently to secondary button class, and hover color remains the same
default button border color can also be set.

Testing Instructions (Current, use me!)

Test in staging
Check footer in all screen sizes
Default theme: check header in mobile view
Cultural theme: check header in all screen sizes
Institutional theme: check header in all screen sizes
Neutral theme: check page body in mobile view

Testing (Old: rework was added but leaving this here for context)

In admin menu, set to theme: and compare to Demo Site.

Verify behavior for each of the 4 homepage themes: default, cultural, institutional, and neutral, specifically watching for items noted in the Acceptance Criteria section. Note: Due to hyrax, bootstrap and blacklight updates, as well as bug fixes, there will be some minor variations but overall look and feel should be similar and work correctly.

Header looks as expected
Footer looks as expected
Content looks as expected
Responsive behavior works correctly

Completes #142

Complete #142

sjproctor · 2025-01-23T23:40:39Z

QA Results: Rework Needed

Rework Needed

Neutral Theme [mobile view]: layout issues

Rework Suggested (Not strictly outlined in acceptance criteria, but may apply to this ticket)

Default Theme [mobile view]: add some space between the nav menu and search bar

All themes [mobile view]: footer text is scrunched and does not adjust to a column format like in HykuCommons

HykuCommons mobile view footer for comparison

Process

Tested on Pals staging
Compared to Hyku Commons
Logged in > Dashboard > set themes > looked at homepage

Default Theme

✅ Confirmed the Recently Upload works are displaying as thumbnails not as code
✅ Confirmed Header looks as expected
✅ Confirmed Footer looks as expected - except in mobile
✅ Confirmed Content looks as expected
**❌ Responsive behavior works correctly - nav bar menu and footer spacing + footer in all themes
✅ Confirmed Go, Advanced, and All button colors behave consistently

Cultural Theme

✅ Confirmed Recent Works section is now responsive
✅ Featured Collections span the entire container like HykuCommons
✅ Confirmed Header looks as expected - except in mobile
✅ Confirmed Footer looks as expected - except in mobile
✅ Content looks as expected
**❌ Responsive behavior works correctly - footer in all themes
✅ Confirmed Go, Advanced, and All button colors behave consistently

Institutional Theme

✅ Confirmed the footer is the standard footer, no horizontal scroll
✅ Confirmed Header looks as expected - except in mobile
✅ Confirmed Footer looks as expected - except in mobile
✅ Confirmed Content looks as expected
**❌ Responsive behavior works correctly - footer in all themes
✅ Confirmed Go, Advanced, and All button colors behave consistently

Neutral Theme

✅ Confirmed line with buttons below image overlays image
✅ Confirm there is an outline around featured collections
✅ Confirmed the footer does not have a white bar underneath it
✅ Confirmed Header looks as expected
✅ Confirmed Footer looks as expected - except in mobile
✅ Confirmed Content looks as expected
**❌ Responsive behavior works correctly - footer in all themes, right side section does not drop as expected, some horizontal scroll
✅ Confirmed Go, Advanced, and All button colors behave consistently

This commit fixes the mobile layout of the Neutral Theme by adding a media query to disable the flex property while in mobile view. Ref: - notch8/palni_palci_knapsack#142

This commit refactors the footer in all four Hyku themes to allow for a uniform layout on all pages addressing all five Bootstrap breakpoints. Ref: - notch8/palni_palci_knapsack#142

This commit ensures the home page of the Neutral Theme is fully responsive at all five Bootstrap breakpoints. Ref: - notch8/palni_palci_knapsack#142

This commit addresses header layout issues on the Cultural Theme home page by: - creating consistency in the size of the search bar across all break points - moving the hamburger menu to the right of the page when in mobile view - creating more consistency in styling of the facet "Browse by" across all breakpoints Ref: - notch8/palni_palci_knapsack#142

This commit addresses layout issues on the home page of the Institutional Theme by: - removing the hamburger menu since it was only holding the search bar - centering the application name in smaller breakpoints - setting the application name to the left next to the logo in larger breakpoints Ref: - notch8/palni_palci_knapsack#142

This commit fixes the layout of the home page for the Default Theme in mobile view by adding spacing around the search form and aligning the user utility links to the right. Any changes to the page navigation section would require an override from Hyrax. Ref: - notch8/palni_palci_knapsack#142

Ref: - notch8/palni_palci_knapsack#142

This commit: - adds in the classes to the header that allowed for custom colorization and refined the responsive layout - Removes some of the padding in the footer to make it more compact in mobile view to account for the height of the body being set in Hyrax which assumes a footer height of 118px Ref: - notch8/palni_palci_knapsack#142

This commit removes a negative margin on the featured collections column and removes a margin from the file img on the featured collections card to ensure the featured works and featured collections are aligned on the logged in home page and the logged out home page. Ref: - notch8/palni_palci_knapsack#142

jillpe added this to PalsKnapsack Oct 1, 2024

jillpe converted this from a draft issue Oct 1, 2024

jillpe changed the title ~~Site defaults to Spanish~~ Epic: Broken Themes Oct 1, 2024

jillpe changed the title ~~Epic: Broken Themes~~ Default Theme Oct 1, 2024

jillpe changed the title ~~Default Theme~~ Default Home Page Theme Oct 1, 2024

jillpe changed the title ~~Default Home Page Theme~~ Home Page Themes Oct 2, 2024

jillpe added the High Priority label Oct 9, 2024

laritakr mentioned this issue Dec 2, 2024

☄ Epic: UI Issues #170

Open

19 tasks

laritakr self-assigned this Jan 13, 2025

This was referenced Jan 16, 2025

Homepage fixes samvera/hyku#2417

Merged

Search Dropdown #156

Open

laritakr moved this from Ready for Development to Code Review in PalsKnapsack Jan 21, 2025

laritakr closed this as completed in samvera/hyku#2417 Jan 21, 2025

github-project-automation bot moved this from Code Review to Done in PalsKnapsack Jan 21, 2025

laritakr moved this from Done to In Development in PalsKnapsack Jan 21, 2025

laritakr reopened this Jan 21, 2025

github-project-automation bot moved this from In Development to Ready for Development in PalsKnapsack Jan 21, 2025

laritakr pushed a commit that referenced this issue Jan 21, 2025

Homepage fixes

4a75d64

Completes #142

laritakr pushed a commit that referenced this issue Jan 21, 2025

Homepage fixes

2b7a829

Complete #142

laritakr mentioned this issue Jan 21, 2025

Homepage fixes #195

Merged

laritakr moved this from Ready for Development to Code Review in PalsKnapsack Jan 21, 2025

laritakr moved this from Code Review to Deploy to Staging in PalsKnapsack Jan 23, 2025

laritakr moved this from Deploy to Staging to SoftServ QA in PalsKnapsack Jan 23, 2025

sjproctor moved this from SoftServ QA to Ready for Development in PalsKnapsack Jan 23, 2025

sjproctor added the needs rework issue needs additional work label Jan 23, 2025

ShanaLMoore assigned sjproctor Jan 27, 2025

sjproctor moved this from Ready for Development to In Development in PalsKnapsack Jan 27, 2025

sjproctor added a commit to samvera/hyku that referenced this issue Jan 30, 2025

🐛 Neutral Theme mobile layout

da47175

This commit fixes the mobile layout of the Neutral Theme by adding a media query to disable the flex property while in mobile view. Ref: - notch8/palni_palci_knapsack#142

sjproctor added a commit to samvera/hyku that referenced this issue Jan 30, 2025

🐛 Neutral Theme home page responsive layout

b058888

This commit ensures the home page of the Neutral Theme is fully responsive at all five Bootstrap breakpoints. Ref: - notch8/palni_palci_knapsack#142

sjproctor added a commit to samvera/hyku that referenced this issue Jan 30, 2025

🐛 Search bar padding only at smallest breakpoint

2645c31

Ref: - notch8/palni_palci_knapsack#142

sjproctor mentioned this issue Jan 30, 2025

I142 home page themes samvera/hyku#2439

Open

sjproctor added a commit to samvera/hyku that referenced this issue Jan 31, 2025

✅ update institutional repository theme spec

4c92402

Ref: - notch8/palni_palci_knapsack#142

laritakr moved this from In Development to Code Review in PalsKnapsack Jan 31, 2025

laritakr moved this from Code Review to Deploy to Staging in PalsKnapsack Jan 31, 2025

laritakr moved this from Deploy to Staging to Code Review in PalsKnapsack Jan 31, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Home Page Themes #142

Home Page Themes #142

jillpe commented Oct 1, 2024 •

edited by sjproctor

Loading

sjproctor commented Jan 23, 2025 •

edited

Loading

Home Page Themes #142

Home Page Themes #142

Comments

jillpe commented Oct 1, 2024 • edited by sjproctor Loading

Summary

Details of issues (some have already been resolved)

Default Theme

Cultural Theme

Institutional Theme

Neutral Theme Home Page

Acceptance Criteria

Notes:

Testing Instructions (Current, use me!)

Testing (Old: rework was added but leaving this here for context)

sjproctor commented Jan 23, 2025 • edited Loading

QA Results: Rework Needed

Rework Needed

Rework Suggested (Not strictly outlined in acceptance criteria, but may apply to this ticket)

Process

Default Theme

Cultural Theme

Institutional Theme

Neutral Theme

jillpe commented Oct 1, 2024 •

edited by sjproctor

Loading

sjproctor commented Jan 23, 2025 •

edited

Loading