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

better NC badge, with name text wrapping

Browse source 
a bit unfortunate to be wrapping long item names on mobile now, but heck there's an info button, should be fine
This commit is contained in:
Emi Matchu 2020-08-31 23:54:54 -07:00
parent f79379e3d3
commit 8f9f1a14de
1 changed files with 6 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -51,16 +51,11 @@ function Item({ item, itemNameId, isWorn, isInOutfit, dispatchToOutfit }) {
isWorn={isWorn} isWorn={isWorn}
/> />
</Box> </Box>
<Box <Box flex="1 1 0" minWidth="0">
flex="1 1 auto" <ItemName id={itemNameId} isWorn={isWorn}>
display="flex"
flexDirection="row"
alignItems="center"
>
<ItemName id={itemNameId} isWorn={isWorn} marginRight="2">
{item.name} {item.name}
</ItemName> </ItemName>
{item.isNc && <Badge colorScheme="cyan">NC</Badge>} <Box>{item.isNc && <Badge colorScheme="cyan">NC</Badge>}</Box>
</Box> </Box>
<Box flex="0 0 auto"> <Box flex="0 0 auto">
<SupportOnly> <SupportOnly>
@ -237,6 +232,9 @@ function ItemName({ children, ...props }) {
<Box <Box
fontSize="md" fontSize="md"
transition="all 0.15s" transition="all 0.15s"
overflow="hidden"
whiteSpace="nowrap"
textOverflow="ellipsis"
className={css` className={css`
${containerHasFocus} { ${containerHasFocus} {
opacity: 0.9; opacity: 0.9;