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

refresh layer support icon, always show on mobile

Browse source
This commit is contained in:
Emi Matchu 2020-08-04 23:00:31 -07:00
parent 7bddb7f67e
commit 0e09510c54
1 changed files with 37 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
src/app/WardrobePage/support/ItemSupportDrawer.js
View file

@ -277,7 +277,6 @@ function ItemSupportAppearanceLayer({
width="150px"
textAlign="center"
fontSize="xs"
position="relative"
onClick={onOpen}
>
<Box
@ -286,35 +285,49 @@ function ItemSupportAppearanceLayer({
marginBottom="1"
boxShadow="md"
borderRadius="md"
position="relative"
>
<OutfitLayers visibleLayers={[...biologyLayers, itemLayer]} />
<Box
className={css`
opacity: 0;
transition: opacity 0.2s;
button:hover &,
button:focus & {
opacity: 1;
}
/* On touch devices, always show the icon, to clarify that this is
* an interactable object! (Whereas I expect other devices to
* discover things by exploratory hover or focus!) */
@media (hover: none) {
opacity: 1;
}
`}
background="green.100"
borderRadius="full"
boxShadow="sm"
position="absolute"
bottom="2"
right="2"
padding="2"
alignItems="center"
justifyContent="center"
width="32px"
height="32px"
>
<EditIcon
boxSize="16px"
position="relative"
top="-2px"
right="-1px"
/>
</Box>
</Box>
<Box fontWeight="bold">{itemLayer.zone.label}</Box>
<Box>Zone ID: {itemLayer.zone.id}</Box>
<Box>DTI ID: {itemLayer.id}</Box>
<Box
className={css`
opacity: 0;
transition: opacity 0.2s;
button:hover > &,
button:focus > & {
opacity: 1;
}
`}
background="rgba(255, 255, 255, 0.8)"
borderRadius="full"
position="absolute"
top="2"
right="2"
padding="2"
alignItems="center"
justifyContent="center"
width="32px"
height="32px"
>
<EditIcon boxSize="16px" position="relative" top="-2px" right="-1px" />
</Box>
<ItemLayerSupportModal
item={item}
itemLayer={itemLayer}