OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

move own/want badges to end of wardrobe items

Browse source 
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)
This commit is contained in:
Emi Matchu 2020-11-03 20:24:56 -08:00
parent 045fb95d69
commit d701f51c15
2 changed files with 12 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/app/WardrobePage/Item.js
View file

@ -229,10 +229,10 @@ function ItemBadges({ item }) {
// on the additional empty child.
isMaybeAnimated && isSupportUser && <MaybeAnimatedBadge />
}
{item.currentUserOwnsThis && <YouOwnThisBadge variant="short" />}
{item.currentUserWantsThis && <YouWantThisBadge variant="short" />}
{getZoneBadges(occupiedZones, { variant: "occupies" })}
{getZoneBadges(restrictedZones, { variant: "restricts" })}
{item.currentUserOwnsThis && <YouOwnThisBadge variant="medium" />}
{item.currentUserWantsThis && <YouWantThisBadge variant="medium" />}
</ItemBadgeList>
);
}

14
src/app/components/ItemCard.js
View file

@ -248,12 +248,15 @@ export function YouOwnThisBadge({ variant = "long" }) {
minHeight="1.5em"
>
<CheckIcon aria-label="Check" />
{variant === "medium" && <Box marginLeft="1">Own</Box>}
{variant === "long" && <Box marginLeft="1">You own this!</Box>}
</Badge>
);
if (variant === "short") {
badge = <ItemBadgeTooltip label="You own this">{badge}</ItemBadgeTooltip>;
if (variant === "short" || variant === "medium") {
badge = (
<ItemBadgeTooltip label="You own this item">{badge}</ItemBadgeTooltip>
);
}
return badge;
@ -268,12 +271,15 @@ export function YouWantThisBadge({ variant = "long" }) {
minHeight="1.5em"
>
<StarIcon aria-label="Star" />
{variant === "medium" && <Box marginLeft="1">Want</Box>}
{variant === "long" && <Box marginLeft="1">You want this!</Box>}
</Badge>
);
if (variant === "short") {
badge = <ItemBadgeTooltip label="You want this">{badge}</ItemBadgeTooltip>;
if (variant === "short" || variant === "medium") {
badge = (
<ItemBadgeTooltip label="You want this item">{badge}</ItemBadgeTooltip>
);
}
return badge;