refresh layer support icon, always show on mobile
This commit is contained in:
parent
7bddb7f67e
commit
0e09510c54
1 changed files with 37 additions and 24 deletions
|
@ -277,7 +277,6 @@ function ItemSupportAppearanceLayer({
|
|||
width="150px"
|
||||
textAlign="center"
|
||||
fontSize="xs"
|
||||
position="relative"
|
||||
onClick={onOpen}
|
||||
>
|
||||
<Box
|
||||
|
@ -286,26 +285,31 @@ function ItemSupportAppearanceLayer({
|
|||
marginBottom="1"
|
||||
boxShadow="md"
|
||||
borderRadius="md"
|
||||
position="relative"
|
||||
>
|
||||
<OutfitLayers visibleLayers={[...biologyLayers, itemLayer]} />
|
||||
</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 > & {
|
||||
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="rgba(255, 255, 255, 0.8)"
|
||||
background="green.100"
|
||||
borderRadius="full"
|
||||
boxShadow="sm"
|
||||
position="absolute"
|
||||
top="2"
|
||||
bottom="2"
|
||||
right="2"
|
||||
padding="2"
|
||||
alignItems="center"
|
||||
|
@ -313,8 +317,17 @@ function ItemSupportAppearanceLayer({
|
|||
width="32px"
|
||||
height="32px"
|
||||
>
|
||||
<EditIcon boxSize="16px" position="relative" top="-2px" right="-1px" />
|
||||
<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>
|
||||
<ItemLayerSupportModal
|
||||
item={item}
|
||||
itemLayer={itemLayer}
|
||||
|
|
Loading…
Reference in a new issue