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

never wrap item action buttons on mobile

Browse source 
The button section was capable of flex-shrinking, and having those wrap pretty much always looks bad imo. Here, we get more precise about the areas and their flex rules, including only letting the name area grow/shrink. (If the screen is too small for the name to wrap further, the panel area container gains a horizontal scrollbar, which feels like a really good compromise imo)
This commit is contained in:
Emi Matchu 2020-08-04 22:48:14 -07:00
parent f18ddc1385
commit 7bddb7f67e
1 changed files with 3 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -40,20 +40,18 @@ export function Item({ item, itemNameId, outfitState, dispatchToOutfit }) {
return ( return (
<> <>
<ItemContainer> <ItemContainer>
<Box> <Box flex="0 0 auto" marginRight="3">
<ItemThumbnail <ItemThumbnail
src={safeImageUrl(item.thumbnailUrl)} src={safeImageUrl(item.thumbnailUrl)}
isWorn={isWorn} isWorn={isWorn}
/> />
</Box> </Box>
<Box width="3" /> <Box flex="1 1 auto">
<Box>
<ItemName id={itemNameId} isWorn={isWorn}> <ItemName id={itemNameId} isWorn={isWorn}>
{item.name} {item.name}
</ItemName> </ItemName>
</Box> </Box>
<Box flexGrow="1" /> <Box flex="0 0 auto">
<Box>
<SupportOnly> <SupportOnly>
<ItemActionButton <ItemActionButton
icon={<EditIcon />} icon={<EditIcon />}