Website 38 investigate adding the ability to navigate via calendar in hours view #319
Conversation
…ate-adding-the-ability-to-navigate-via-calendar-in-Hours-View
added calendar expansion on clicking date range heading. Now I need to get the calendar view fixed under the heading, clean up the code, remove the repeated component, and see if we can sticky it on scroll.
moved the previous / next week component to its own component file and render it once at the top of the hours view versus multiple times at the top of each hours location. Also made the component sticky.
made the background color match the maize used throughout the rest of the interface and moved the sticky up 1px so there's not a gap.
…to-navigate-via-calendar-in-Hours-View
…to-navigate-via-calendar-in-Hours-View
User can now select week from calendar view, changed the previous and next week button to a link, added conditional highlighting for border of week.
next / previous week now changes month if moving to a different month. Selecting a week in a different month no longer selects the week index of the current month.
…to-navigate-via-calendar-in-Hours-View
Renamed the file to coincide with naming convention for panels. Added accessibility and keyboard navigation to calendar view. Updated the days positioning (sun, mon, tue, etc.) to better align with the columns.
…ia-calendar-in-Hours-View' of https://github.com/mlibrary/lib.umich.edu into WEBSITE-38-Investigate-adding-the-ability-to-navigate-via-calendar-in-Hours-View
Changed background color for calendar and working on consolidating actions.
refactored common logic into single utility function.
added esc close and instructions.
Moved the isVisible up to encapsulate entire calendar component.
SalazarJosh
had a problem deploying
to
previews
GitHub Actions
Failure
accessibility updates for table view.
There was a problem hiding this comment.
The only blocker is to fix the ESLint error in line 1 in src/components/panels/hours-panel-date-viewer.js.
Everything else are just learning opportunities to reduce code, which is up to you to apply. If you choose to make the changes, I would test the code before committing.
Very nice feature, overall!
| <span css={{ background: 'white', | ||
| border: `solid 1px var(--color-neutral-200)`, | ||
| borderRadius: '4px', | ||
| boxShadow: `0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;`, | ||
| display: 'inline-block', | ||
| fontFamily: 'monospace', | ||
| fontSize: '0.85rem', | ||
| marginBottom: SPACING.S, | ||
| padding: `0 ${SPACING['2XS']}` }} | ||
| > |
There was a problem hiding this comment.
I know that the kbd element is used in src/components/site-search.js. Might be a good opportunity to create a reusable component?
| }; | ||
|
|
||
| const handleInteraction = (event, action) => { | ||
| if (event.type === 'click' || (event.type === 'keydown' && (event.key === 'Enter' || event.key === ' '))) { |
There was a problem hiding this comment.
This same logic is also used in line 42: event.type === 'click' || (event.type === 'keydown' && (event.key === 'Enter' || event.key === ' '))
Might be a good opportunity to create a function?
Co-authored-by: Erin Sullivan <[email protected]>
Co-authored-by: Erin Sullivan <[email protected]>
Co-authored-by: Erin Sullivan <[email protected]>
Co-authored-by: Erin Sullivan <[email protected]>
Co-authored-by: Erin Sullivan <[email protected]>
Co-authored-by: Erin Sullivan <[email protected]>
| > | ||
| <div | ||
| css={{ | ||
| alignItems: 'center', |
There was a problem hiding this comment.
center aligned all items in the HoursPanelNextPrev component
| <div | ||
| key={dayIndex} | ||
| css={{ | ||
| backgroundColor: getColorBasedOnDate(day), |
There was a problem hiding this comment.
I was dynamically setting the color here if the day didn't fall in the current month. UX team found the color wasn't accessible on gold background (which is the case for last / first week of month if there are overlapping days. The suggestion was to make all the numbers the same color so that rule is now gone.
Overview
Users can only navigate one week a time on the Hours View, which makes it tedious to look further ahead.
This PR adds a calendar component to the hours view (deploy URL). The calendar component provides a singular component to give the user the ability to navigate by weeks while also having a monthly calendar display.
The calendar is a sticky header component that scrolls with the user. The previous implementation of having a previous / next week component for each section caused a significant amount of visual information. Hopefully this alleviates some of that.
ChatGPT helped write some of the algorithms for comparing JS
Dateobjects, since those aren't always super intuitive. I gave it all an additional pass to clean up / combine logic and make it more human legible.Anything else?
As part of this work, I was exploring anchor links since the hours view is the only page we support anchor links. For example: https://deploy-preview-319--future-wwwlib-previews.netlify.app/locations-and-hours/hours-view#art-architecture-and-engineering-library
We handle anchor links in the
gatsby-browserfile. I extended the function to offset the anchor position by the height of the sticky header.I also explored fixing the tab order for anchor links. In essence, when a user gets to a page via an anchor link, I want the anchored element to receive focus. Instead of trying to explore that issue within this PR, I broke it out into a separate ticket.
Testing
List instructions on how to test the pull request. Some examples: