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

safari layout fix

Browse source
This commit is contained in:
Matt Dunn-Rankin 2020-04-24 00:46:24 -07:00
parent d9e4b8cb59
commit cf2d76023c
1 changed files with 48 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
src/WardrobePage.js
View file

@ -44,56 +44,59 @@ function WardrobePage() {
}, [error, toast]); }, [error, toast]);
return ( return (
<Grid <Box position="absolute" top="0" bottom="0" left="0" right="0">
// Fullscreen, split into a vertical stack on smaller screens <Grid
// or a horizontal stack on larger ones! // Fullscreen, split into a vertical stack on smaller screens
templateAreas={{ // or a horizontal stack on larger ones!
base: `"outfit" templateAreas={{
base: `"outfit"
"search" "search"
"items"`, "items"`,
lg: `"outfit search" lg: `"outfit search"
"outfit items"`, "outfit items"`,
}} }}
templateRows={{ templateRows={{
base: "minmax(100px, 1fr) auto minmax(300px, 1fr)", base: "minmax(100px, 1fr) auto minmax(300px, 1fr)",
lg: "auto 1fr", lg: "auto 1fr",
}} }}
templateColumns={{ templateColumns={{
base: "100%", base: "100%",
lg: "50% 50%", lg: "50% 50%",
}} }}
position="absolute" height="100%"
top="0" width="100%"
bottom="0" >
left="0" <Box gridArea="outfit" backgroundColor="gray.900">
right="0" <OutfitPreview
> itemIds={data.wornItemIds}
<Box gridArea="outfit" backgroundColor="gray.900"> speciesId="54"
<OutfitPreview itemIds={data.wornItemIds} speciesId="54" colorId="75" /> colorId="75"
</Box> />
<Box gridArea="search" boxShadow="sm">
<Box px="5" py="3">
<SearchToolbar query={searchQuery} onChange={setSearchQuery} />
</Box> </Box>
</Box> <Box gridArea="search" boxShadow="sm">
<Box gridArea="items" overflow="auto"> <Box px="5" py="3">
<Box px="5" py="5"> <SearchToolbar query={searchQuery} onChange={setSearchQuery} />
{searchQuery ? ( </Box>
<SearchPanel
query={searchQuery}
wornItemIds={data.wornItemIds}
onWearItem={wearItem}
/>
) : (
<ItemsPanel
zonesAndItems={data.zonesAndItems}
loading={loading}
onWearItem={wearItem}
/>
)}
</Box> </Box>
</Box> <Box gridArea="items" overflow="auto">
</Grid> <Box px="5" py="5">
{searchQuery ? (
<SearchPanel
query={searchQuery}
wornItemIds={data.wornItemIds}
onWearItem={wearItem}
/>
) : (
<ItemsPanel
zonesAndItems={data.zonesAndItems}
loading={loading}
onWearItem={wearItem}
/>
)}
</Box>
</Box>
</Grid>
</Box>
); );
} }