Commit graph

25 commits

Author SHA1 Message Date
334d89c101 Add Latest Items section to homepage 2021-01-18 06:31:27 -08:00
1376e95f84 bug fixes for new ItemCard
Oops, I messed up the background color in dark mode! and left in an extra `as` prop
2021-01-14 05:34:13 -08:00
8567f9d4b8 Try a grid-based view for item lists
I took out virtualization for now too, I wanna see how this non-Chakra UI version, with fewer nodes and no tooltips etc, performs on large lists in production.
2021-01-14 04:58:40 -08:00
c9603a40ea tweak site bg color, to let card elements "pop"
This has been bothering me for a long time, but I couldn't really figure out what to do about it. But tweaking the site bg color a smidge has helped us really add texture to the cards I want to have pop out, like the outfit polaroids!

I kinda went all-in in a burst, but tbh I think it looks great :3

I haven't really touched the wardrobe page with it yet though, that'll probably need some tweaking... for now I'm overriding it to keep the old background!
2021-01-04 09:17:54 +00:00
4120c7aa88 fix large-icon visual bug
Looks like there was some kind of runtime conflict when running @emotion/css and @emotion/react at the same time in this app? Some styles would just get clobbered, making things look all weird.

Here, I've removed our @emotion/css dependency, and use the `<ClassNames>` utility element from `@emotion/react` instead. I'm not thrilled about the solution, but it seems okay for now...

...one other thing I tried was passing a `css` prop to Chakra elements, which seemed to work, but to clobber the element's own Emotion-based styles. I assumed that the Babel macro wouldn't help us, and wouldn't convert css props to className props for non-HTML elements... but I suppose I'm not sure!

Anyway, I don't love this syntax... but I'm happy for the site to be working again. I wonder if we can find something better.
2021-01-04 03:11:55 +00:00
91982c60d9 update to new Chakra <Wrap> API 2020-12-25 09:17:24 -08:00
b023cbeaf9 use @emotion/css instead of plain emotion 2020-12-25 09:09:16 -08:00
406849182a update chakra imports 2020-12-25 09:08:33 -08:00
0c2ec4685e use react-virtualized to speed up user items page
There's a known bug that items with a lot of zones will overflow the row… filing that as a separate fix tho!
2020-12-07 18:58:10 -08:00
d02f7ced72 add pb badge to pb items, instead of nc/np badge 2020-11-08 15:13:30 -08:00
d701f51c15 move own/want badges to end of wardrobe items
I saw the short-near-the-front and it just frankly looked awkward? Not sure why I liked it before?

I think this medium at the end of the list is better aesthatically, though it's starting to get a bit messy with the different colors mixed around… but I think there's also a semantic argument that we're keeping the facts about the item together, and the _user-specific_ stuff separate at the end… (putting it at the front would be a good semantic argument too, but I think the NC/NP alignment is too important)
2020-11-03 20:24:56 -08:00
045fb95d69 fix spacing bugs with item badges
In a previous change, I moved the margin for item badges onto an ItemBadge element… but I didn't think through how that would break the spacing for the loading state of ItemPage. Now, the loading skeleton items _contained_ the badge margin, and so the spacing between badges was shiny skeleton-y.

Here, I replace ZoneBadgesList with a function that just returns the elements, and go back to using Chakra's Wrap component. That will apply the margin to direct children, and the zone badges are direct children now.

One option I'm thinking of in hindsight is an idea I had earlier: Chakra hacks the margin onto _React_ children, but could we use CSS direct child selector instead? A bit trickier to resolve the margin size to the theme's value, but plenty doable… something to consider!
2020-11-03 20:11:37 -08:00
4d4d475437 add quick-look trade matches to top of page 2020-10-24 01:06:55 -07:00
5a13959805 fix bug with zone badge wrapping
Oops, the <Wrap> component is nice, but it uses React.Children to apply margin to its _direct_ children, and our badges are not always direct children! (See the new `ZoneBadgeList`.)

I poked my head into how `Wrap` works, and it's honestly pretty simple, so I've applied the same styles manually. Ta da!
2020-10-24 00:32:23 -07:00
274a4f716f add zones to user items page
idk the labels section was feeling empty, and I didn't see a way to streamline it more, so I figured, add info that might be useful! lol
2020-10-23 23:29:54 -07:00
772065815a Badge for animated items, support only
This is really very cute, but too many items it turns out are lod despite not actually being animated 🙃 it's helpful for looking for test cases tho, so I'm keeping it, but support only!

I also ended up really liking the icon-badge+tooltip design as a way to summarize lil things, so I'm trying Own/Want short badges in the same style.
2020-09-22 04:25:41 -07:00
0b724f7509 add own/want badges to items in wardrobe 2020-09-12 20:02:56 -07:00
383d514397 link to new item page from item list & model pages 2020-09-12 18:23:12 -07:00
d29abf5cd1 add skeletons for item page header
It looks nice, but also particularly means we can handle the loading for the preview separately, get that started faster and iterate better on it in dev!
2020-09-12 18:17:23 -07:00
4f6f3640bb start building item page 2020-09-11 23:56:47 -07:00
a52bd3e3bb fix some old lint errors! 2020-09-11 23:27:23 -07:00
0d7efb2357 use 3 columns for grid on wider screens
This isn't as great for modeling cards, but it's fine imo, and it's much better for item list cards (where there's practically no badges)
2020-09-11 22:13:38 -07:00
5546b21c27 use the same ItemCardList in items + modeling
and make the grid items take the full two-column width
2020-09-11 21:53:57 -07:00
8e091b14c6 add own/want compare badges
now you can compare your item lists with other users!
2020-09-11 21:45:38 -07:00
0df57818e3 create ItemCard, use it in ItemsPage too
extracted from modeling page!
2020-09-11 20:41:39 -07:00
Renamed from src/app/components/ItemSummary.js (Browse further)