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