Move HTML5Badge to zones area
This commit is contained in:
parent
2d58627bdd
commit
7421f41e58
2 changed files with 17 additions and 15 deletions
|
@ -756,18 +756,7 @@ function ItemPageOutfitPreview({ itemId }) {
|
|||
// This box grows at the same rate as the box on the right, so the
|
||||
// middle box will be centered, if there's space!
|
||||
flex="1 0 0"
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
paddingRight="2"
|
||||
>
|
||||
<HTML5Badge
|
||||
usesHTML5={usesHTML5}
|
||||
// If we're not compatible, act the same as if we're loading:
|
||||
// don't change the badge, but don't show one yet if we don't
|
||||
// have one yet.
|
||||
isLoading={appearance.loading || !isCompatible}
|
||||
/>
|
||||
</Box>
|
||||
/>
|
||||
<SpeciesColorPicker
|
||||
speciesId={petState.speciesId}
|
||||
colorId={petState.colorId}
|
||||
|
@ -840,13 +829,26 @@ function ItemPageOutfitPreview({ itemId }) {
|
|||
isLoading={loadingGQL || loadingValids}
|
||||
/>
|
||||
</Box>
|
||||
<Box gridArea="zones" alignSelf="center" justifySelf="center">
|
||||
<Flex gridArea="zones" justifySelf="center" align="center">
|
||||
{compatibleBodiesAndTheirZones.length > 0 && (
|
||||
<ItemZonesInfo
|
||||
compatibleBodiesAndTheirZones={compatibleBodiesAndTheirZones}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
<Box width="4" />
|
||||
<Flex
|
||||
// Avoid layout shift while loading
|
||||
minWidth="54px"
|
||||
>
|
||||
<HTML5Badge
|
||||
usesHTML5={usesHTML5}
|
||||
// If we're not compatible, act the same as if we're loading:
|
||||
// don't change the badge, but don't show one yet if we don't
|
||||
// have one yet.
|
||||
isLoading={appearance.loading || !isCompatible}
|
||||
/>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -99,7 +99,7 @@ function HTML5BadgeLayout({ children, tooltipLabel, ...props }) {
|
|||
<Tooltip
|
||||
textAlign="center"
|
||||
fontSize="xs"
|
||||
placement="bottom-start"
|
||||
placement="top"
|
||||
label={tooltipLabel}
|
||||
// HACK: Chakra tooltips seem inconsistent about staying open when focus
|
||||
// comes from touch events. But I really want this one to work on
|
||||
|
|
Loading…
Reference in a new issue