Closed davesteinberg closed 3 years ago
vercel[bot]
commented
3 years ago This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.
🔍 Inspect: https://vercel.com/my-covid-story/www/7Vv6gtyKHQxQyN5K3MKtmEHwhcfm
✅ Preview: https://www-git-dsnav-my-covid-story.vercel.app
silent1mezzo
commented
3 years ago | / |
|---|
 (view full size) |
Commit 989220d703ceb3b415343b42c97bc60ca359776b (https://www-pwfwlvbpw-my-covid-story.vercel.app).
davesteinberg
commented
3 years ago This is on hold, pending the resolution of the font problem caused by PR #164.
JamiesonRoberts
commented
3 years ago @davesteinberg this is great! I saw the same issue with the nav once the social icons got added in.
The thing that keeps weirding my eye out is when the drawer closes and the word story on the button flashes past the logo wordmark and the word story, and it seems like something is jumping out of alignment for a split second.
curtis-vdg
commented
3 years ago It's all looking great from my perspective! It's not the full screen on small screens, but I get the limitations around that and I'm not that picky. 👍
davesteinberg
commented
3 years ago @davesteinberg this is great! I saw the same issue with the nav once the social icons got added in.
The thing that keeps weirding my eye out is when the drawer closes and the word story on the button flashes past the logo wordmark and the word story, and it seems like something is jumping out of alignment for a split second.
Good spot! Hmm...It looks to me like the button gets stuck for a moment as it's passing over the nav bar. I wonder if we're just describing or perceiving it slightly differently or if it's actually manifesting differently in our browsers. In any case, maybe it's a bug in Chakra UI, or maybe there's something else in our site's setup that is interfering with the animation and making it not smooth? Apparently Chakra is using framer-motion, which I don't know at all.
I did try using motionPreset="none" on the drawer, which interestingly disabled the exit animation only. I think it looks better with the jank than with no exit animation at all. I'm going to merge this now and open an issue about the animation problem to look into separately.
I noticed that the nav bar wraps when your viewport is towards the bottom of the md range, and also that the menu/close button in sm isn't keyboard accessible and doesn't match with the close button on the individual story page. So, I set about fixing those problems, and then kept polishing, and fixing other little issues I found. For example, did you notice that on the home page (where the nav is sticky), if you open the menu when you're at the very top of the page, it pushes down the content, but if you scroll down one pixel so that it sticks, then the menu overlays the content?
In the end, I used the Chakra Drawer component for the menu so that it always overlays, darkens and disables the content behind it, and closes the menu if you click outside of it. I also updated the layout of the menu to increase sizes to make it more easily touchable and more similar to Curtis's original design. I stopped short of making it fill the viewport because I couldn't achieve a layout that looked good with the fewer links (with shorter text) that we have and on various screen sizes/aspects.