Store item card and navbar components #59
Conversation
I think that's all
Otherwise it be squishi
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
SheepTester
changed the title
There was a problem hiding this comment.
Hey, nice job on this. I really like the implementation of Diamonds and the props setup for the other components 🤑
-
I think it's fine to pass in the credits from the page. Accessing the private profile again in the navbar would probably require an additional API call.
-
One other thing is can you look into modifying the history with the back button instead of just using a link. Currently, clicking the back button will push another page to your history so pushing the custom back button and then pushing the browser back button takes you "forward" to the page you were on. It might be okay to just use
history.back()have the back button mirror the browser back button, with maybe some consideration for not "backing" out of the store.
|
I added an optional I also addressed @raymosun's feedback:
|
|
Hey Sean, thanks for addressing the changes! I think prepping for the component to handle item card and collection card is a good idea. So, the only thing that's still iffy is the back button, but I think it's good enough for now so we can go ahead and merge so the other store pages aren't blocked and maybe address it with a later issue. |
|
|
… faris feedback Based on SignInButton
|
Can you include edge case screenshots of handling an item card with a description too long? |
|
fitting content is a little funky on iPhone SE size, up to you if you want to address it. nobody is going to have 10 million points anytime soon 😮 |
When one card has an insanely long description, the text wraps and the other cards' height match the height of the longest card. I believe this is consistent with the Figma (below), and personally I think it's a bit better than having staggered card heights. However, if having a lot of blank space on shorter cards isn't desirable, then changing it is a single-line change (
|
`picture` can be null; I decided to update the type instead of blaming the backend data I also added `screen and` to media queries and updated some rem values per feedback in #59
* Create store item card component * Add card background and "out of stock" support * Turn card into link; allow image to be squished on mobile * Card hover effect I think that's all * Create navbar * Commit the correct index.tsx * Make "xyz diamonds" its own component * Back icon; screen-reader accessible diamond icon * Load balance from user profile * Make the shadow less harsh in light mode * Shrink navbar on mobile, per Figma Otherwise it be squishi * Storefront hero content * Attempt making a l o n g rainbow * A bit of mobile support for the hero * Move Hero to its own component * Help modal * Mobile help modal Pure CSS pagination! However, for some reason scrollbars appear in the desktop help modal and idk why * ayo?? gradient text outline in CSS is possible?? * Add description prop to item cards so they can be used for storefront collection cards as well * Move back icon into assets/, navbar URLs to config * Change back link to `history.back()` button * Make rainbow stretch across page * Try making the rainbow fit mobile * Move rainbow to its own component You know it's bad when you start prefixing class names when you have a library that does that for you * The tilted rainbow looks fine on mobile now 🎉 * Get collections from store API * Create Title component The heading is similar on the leaderboard and storefront pages, and Trevor suggested making a component out of it. Here it is! #42 (comment) * Finish storefront collections view * Browse all items view * Clean up files * Adjust heading sizes They somewhat match the Figma, but not really. Maybe moving the heading to a separate component was a bad idea if the font sizes are going to be different every time * Hero animations and interactive decorations 🎥😎 * Require that an item card be EITHER a store item or a collection, per faris feedback Based on SignInButton * Address Faris' feedback * Show costs under items * Add Imgur etc to image host allowlist (dev only) `picture` can be null; I decided to update the type instead of blaming the backend data I also added `screen and` to media queries and updated some rem values per feedback in #59 * Remove <Title> because each use required overriding the font size * Image load animation So when it loads, it's not as jarring when it appears * Remove redundant useEffect --------- Co-authored-by: Faris Ashai <[email protected]>
* Create store item card component * Add card background and "out of stock" support * Turn card into link; allow image to be squished on mobile * Card hover effect I think that's all * Create navbar * Commit the correct index.tsx * Make "xyz diamonds" its own component * Back icon; screen-reader accessible diamond icon * Load balance from user profile * Make the shadow less harsh in light mode * Shrink navbar on mobile, per Figma Otherwise it be squishi * Storefront hero content * Attempt making a l o n g rainbow * A bit of mobile support for the hero * Move Hero to its own component * Help modal * Mobile help modal Pure CSS pagination! However, for some reason scrollbars appear in the desktop help modal and idk why * ayo?? gradient text outline in CSS is possible?? * Add description prop to item cards so they can be used for storefront collection cards as well * Move back icon into assets/, navbar URLs to config * Change back link to `history.back()` button * Make rainbow stretch across page * Try making the rainbow fit mobile * Move rainbow to its own component You know it's bad when you start prefixing class names when you have a library that does that for you * The tilted rainbow looks fine on mobile now 🎉 * Get collections from store API * Create Title component The heading is similar on the leaderboard and storefront pages, and Trevor suggested making a component out of it. Here it is! #42 (comment) * Finish storefront collections view * Browse all items view * Clean up files * Adjust heading sizes They somewhat match the Figma, but not really. Maybe moving the heading to a separate component was a bad idea if the font sizes are going to be different every time * Hero animations and interactive decorations 🎥😎 * Require that an item card be EITHER a store item or a collection, per faris feedback Based on SignInButton * Address Faris' feedback * Show costs under items * Add Imgur etc to image host allowlist (dev only) `picture` can be null; I decided to update the type instead of blaming the backend data I also added `screen and` to media queries and updated some rem values per feedback in #59 * Remove <Title> because each use required overriding the font size * Image load animation So when it loads, it's not as jarring when it appears * Remove redundant useEffect * Various nitpicks + store view mode in URL - Lined up first card with left edge of content without clipping card shadow - Added border around card so a white image doesn't blend into the light theme background - Store view mode in URL - Add spacing in storefront subheading * Improve accessibility in navbar * Show store and signed-in navbar on 404 page * Use compact number format for numbers >= 1M * Fix height of 404 page under /store * Decrease minimum for compact diamond format Co-authored-by: Faris Ashai <[email protected]> * Fix typo on 404 Co-authored-by: Faris Ashai <[email protected]> --------- Co-authored-by: Faris Ashai <[email protected]>
Info
Closes #53 and closes #54, which are blockers for most of the store page issues.
Description
What changes did you make? List all distinct problems that this PR addresses. Explain any relevant
motivation or context.
I added a store item card component and a store navbar component.
Changes
Added an
ItemCardcomponent which takes animageURL,title, andcost. Presumably, these cards will link you to the item page, so there's also an optionalhrefprop. I noticed that the designs had a hidden "Out of stock" message, so I also added an optionalinStockprop which defaults to true that, when set to false, will show "Out of stock" next to the price.rgba(228, 228, 228, 0.5)as the card's shadow color, but this looks like a very unpleasant light grey shadow in dark mode. However, in themes.scss,--theme-accent-line-2-transparentis still the same light grey shadow. I could instead use--theme-accent-line-1-transparent, which looks fine in dark mode, but in light mode the shadow is very jarring. I added a CSS variable--theme-shadowthat uses a light grey shadow in light mode and the black shadow in dark mode.Added a
Navbarcomponent which takes the user'sbalanceand optionally,backUrl. If there is no page to go back to, then leavingbackUrlunspecified will make the back button go away.Ideally,
Navbarwould be able to get the user's balance by itself, but I don't know if it can access theuser: PrivateProfileon its own.I also added a helper component
Diamondswhich renders the number of diamonds with a comma (using the Internationalization API) and includes the little blue diamond. The diamond icon has a hidden "diamond" text inside it so screenreaders can read it out loud.Type of Change
expected)
linting/formatting)
workflows)
Testing
I have tested that my changes fully resolve the linked issue ...
Checklist
src/libfunctions and commented hard to understand areasanywhere else.
Screenshots
Please include a screenshot of your Cypress testing suite passing successfully. no
If you made any visual changes to the website, please include relevant screenshots below.
I put the components on the storefront page just to demo them; the storefront page isn't done yet
Dark mode, desktop:
Light mode, mobile: