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

Jump to bottom

I142 home page themes #2439

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

I142 home page themes #2439

wants to merge 10 commits into from
+112 −120

Conversation

sjproctor
Copy link
Collaborator

Story: [i142] Home Page on All Themes

Ref:

Expected Behavior Before Changes

Many of the themes needed styling clean ups and more streamlined transitions between screen sizes.

Expected Behavior After Changes

  • Default Theme
    • Spacing around the search bar in mobile view
  • Cultural Theme
    • Facet search in header will be more consistent across all viewports
    • Setting the major breakpoint at 992 for header styles
  • Institutional Theme
    • Application name will be on the left side next to the logo with the search bar on the right
    • In mobile view, the name will be centered and the search bar sits below, no need for a hamburger menu
  • Neutral Theme
    • Home page body will adjust into a single column that takes up the full width of the browser in mobile view
  • Footer
    • The footer will drop into a single column in mobile view

Screenshots / Video

Default theme in mobile view

image

Cultural theme in mobile view with open hamburger menu

image

Institutional theme in mobile view

image

Neutral theme in mobile view

image

Notes

  • Opted for using Bootstrap styling whenever possible to avoid unknown styling changes in other areas of the application
  • Additional styling to the Default and Neutral theme header will require overrides from Hyrax

@samvera/hyku-code-reviewers

@sjproctor
🐛 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
🐛 Restructures footer layout and responsiveness
0236543 
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
@sjproctor
🐛 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
🐛 Cultural Theme home page header layout
a11c5c6 
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
@sjproctor
🐛 Institutional Theme home page layout fixes
be9945b 
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
@sjproctor
🐛 Default Theme home page layout fixes
10921b2 
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
@sjproctor
🐛 Search bar padding only at smallest breakpoint
2645c31 
Ref:
- notch8/palni_palci_knapsack#142
@sjproctor sjproctor added the ignore-for-release ignore this for release notes label Jan 30, 2025
@github-actions GitHub Actions
Copy link

github-actions bot commented Jan 30, 2025 •
edited
Loading

Test Results

    3 files  ±0      3 suites  ±0   17m 35s ⏱️ -13s
2 059 tests +2  2 003 ✅ +2  56 💤 ±0  0 ❌ ±0 
2 086 runs  +2  2 028 ✅ +2  58 💤 ±0  0 ❌ ±0 

Results for commit 5642859. ± Comparison against base commit 0f7c56c.

This pull request removes 42 and adds 44 tests. Note that renamed tests count towards both. 
spec.abilities.work_ability_spec ‑ Hyrax::Ability::WorkAbility when work depositor Etd permissions is expected not to be able to destroy c7da57d7-937a-4ddd-9a23-208c22015e1b
spec.abilities.work_ability_spec ‑ Hyrax::Ability::WorkAbility when work depositor Etd permissions is expected not to be able to edit 9046121f-0994-4c0b-bc60-91187a89c796
spec.abilities.work_ability_spec ‑ Hyrax::Ability::WorkAbility when work depositor Etd permissions is expected not to be able to read 020914f8-d172-45e5-869b-779d1c50dffd
spec.abilities.work_ability_spec ‑ Hyrax::Ability::WorkAbility when work depositor Etd permissions is expected not to be able to update 085f506c-70b8-46a9-aeb8-e59d3eb593cb
spec.abilities.work_ability_spec ‑ Hyrax::Ability::WorkAbility when work depositor FileSet permissions is expected not to be able to destroy 3ffc6fbc-637e-4954-82cf-9978251ee508
spec.abilities.work_ability_spec ‑ Hyrax::Ability::WorkAbility when work depositor FileSet permissions is expected not to be able to edit ccb7a113-5dd3-48e2-8a14-019810bf2302
spec.abilities.work_ability_spec ‑ Hyrax::Ability::WorkAbility when work depositor FileSet permissions is expected not to be able to read 67708e2e-e5d5-4523-9462-3e98e26ea3c2
spec.abilities.work_ability_spec ‑ Hyrax::Ability::WorkAbility when work depositor FileSet permissions is expected not to be able to update 889c8c0b-e96a-4d8f-b6d6-21c78cb8f520
spec.abilities.work_ability_spec ‑ Hyrax::Ability::WorkAbility when work depositor GenericWork permissions is expected not to be able to destroy b68ea7bd-8cde-45f0-951d-d1b305f3bbb4
spec.abilities.work_ability_spec ‑ Hyrax::Ability::WorkAbility when work depositor GenericWork permissions is expected not to be able to edit 8ce0abfd-9674-4d61-86b9-cd07e7d519be
…

spec.abilities.work_ability_spec ‑ Hyrax::Ability::WorkAbility when work depositor Etd permissions is expected not to be able to destroy c1ae99b6-ecf5-4b15-ba29-37355279aa1d
spec.abilities.work_ability_spec ‑ Hyrax::Ability::WorkAbility when work depositor Etd permissions is expected not to be able to edit 552a932c-51ee-4d00-bbb0-8119775393d9
spec.abilities.work_ability_spec ‑ Hyrax::Ability::WorkAbility when work depositor Etd permissions is expected not to be able to read 1761d346-c4a2-4c23-b1bc-5d725f8f98c1
spec.abilities.work_ability_spec ‑ Hyrax::Ability::WorkAbility when work depositor Etd permissions is expected not to be able to update 9036de34-4c24-45a3-b3ee-0017b67660b9
spec.abilities.work_ability_spec ‑ Hyrax::Ability::WorkAbility when work depositor FileSet permissions is expected not to be able to destroy ffc27530-b2fa-4a18-ad2f-e14eda78ef22
spec.abilities.work_ability_spec ‑ Hyrax::Ability::WorkAbility when work depositor FileSet permissions is expected not to be able to edit b062aea3-4dbd-47e6-9274-0ebd65da70cc
spec.abilities.work_ability_spec ‑ Hyrax::Ability::WorkAbility when work depositor FileSet permissions is expected not to be able to read 213ac8a0-763f-4da6-8c61-8c1846d731f2
spec.abilities.work_ability_spec ‑ Hyrax::Ability::WorkAbility when work depositor FileSet permissions is expected not to be able to update f235547c-56b8-4129-8592-ad49d3b492f0
spec.abilities.work_ability_spec ‑ Hyrax::Ability::WorkAbility when work depositor GenericWork permissions is expected not to be able to destroy 70ac4d0d-99ab-4114-b637-91273e7d1dd8
spec.abilities.work_ability_spec ‑ Hyrax::Ability::WorkAbility when work depositor GenericWork permissions is expected not to be able to edit a5e191fe-2cce-47fb-9d80-62e8e006aa3e
…

♻️ This comment has been updated with latest results.

laritakr
laritakr reviewed Jan 31, 2025
View reviewed changes
Copy link
Collaborator

@laritakr laritakr left a comment •
edited
Loading

Choose a reason for hiding this comment

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

I am wondering whether any of these changes affect the appearance color behavior. Whenever classes are modified, colors can be affected... see app/views/shared/_appearance_styles.html.erb for classes used. I'm doing some local testing to make sure nothing broke because of these changes before approving.

@laritakr
Copy link
Collaborator

After precompiling assets successfully, most of it looks good.

There are a few broken color behaviors because of these changes:

  • cultural repository has a fixed facet color and should not use the appearance facet color or facet border color setting.
  • institutional repository header color is not using the appearance header color setting.

@sjproctor
🐛 Fixes header color change and footer height
5fc86dd 
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
laritakr
laritakr previously approved these changes Jan 31, 2025
View reviewed changes
@sjproctor
🐛 Aligned featured collection and works
5642859 
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@kirkkwang kirkkwang kirkkwang approved these changes

@laritakr laritakr laritakr left review comments

Assignees
No one assigned
Labels
ignore-for-release ignore this for release notes
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@sjproctor @laritakr @kirkkwang