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

align item elements to the ~top of the row

Browse source 
Essentially I want the center-y visual balance around the image, and the name and _one_ line of tags. If there are extra tags, I want that to go down on its own, rather than bringing down the image+buttons to center against them.

The single-line-of-tags case is the most common, and I think it makes things feel more consistent for all the items to stick to that basic layout, while trying to keep that layout feeling center-y
This commit is contained in:
Emi Matchu 2020-09-02 01:03:51 -07:00
parent 62629865d8
commit f0c50eecb7
1 changed files with 3 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -73,7 +73,7 @@ function Item({
isDisabled={isDisabled} isDisabled={isDisabled}
/> />
</Box> </Box>
<Box flex="1 1 0" minWidth="0"> <Box flex="1 1 0" minWidth="0" marginTop="1px">
<ItemName id={itemNameId} isWorn={isWorn} isDisabled={isDisabled}> <ItemName id={itemNameId} isWorn={isWorn} isDisabled={isDisabled}>
{item.name} {item.name}
</ItemName> </ItemName>
@ -109,7 +109,7 @@ function Item({
))} ))}
</Wrap> </Wrap>
</Box> </Box>
<Box flex="0 0 auto"> <Box flex="0 0 auto" marginTop="5px">
{isInOutfit && ( {isInOutfit && (
<ItemActionButton <ItemActionButton
icon={<DeleteIcon />} icon={<DeleteIcon />}
@ -159,7 +159,7 @@ function ItemSkeleton() {
<ItemContainer isDisabled> <ItemContainer isDisabled>
<Skeleton width="50px" height="50px" /> <Skeleton width="50px" height="50px" />
<Box width="3" /> <Box width="3" />
<Skeleton height="1.5rem" width="12rem" /> <Skeleton height="1.5rem" width="12rem" alignSelf="center" />
</ItemContainer> </ItemContainer>
); );
} }
@ -195,7 +195,6 @@ function ItemContainer({ children, isDisabled = false }) {
my="1" my="1"
borderRadius="lg" borderRadius="lg"
d="flex" d="flex"
alignItems="center"
cursor={isDisabled ? undefined : "pointer"} cursor={isDisabled ? undefined : "pointer"}
border="1px" border="1px"
borderColor="transparent" borderColor="transparent"