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

Fix mobile layout for outift URLs no-op message

Browse source 
Copied styles from the similar layout in the bulk converter tool! The status will flush to the right of the field header on desktop, and move below the input on mobile.
This commit is contained in:
Emi Matchu 2021-06-01 17:35:29 -07:00
parent 9191a5a65a
commit e1d6981274
1 changed files with 44 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
src/app/OutfitUrlsPage.js
View file

@ -193,37 +193,52 @@ function SingleImageConverter() {
<FormErrorMessage>{parseError?.message || null}</FormErrorMessage> <FormErrorMessage>{parseError?.message || null}</FormErrorMessage>
</FormControl> </FormControl>
<FormControl gridArea="output"> <FormControl gridArea="output">
<Flex marginBottom="2"> <Grid
<FormLabel fontSize="sm" margin="0"> templateAreas={{
base: `
"header"
"input"
"status"
`,
md: `
"header status"
"input input"
`,
}}
alignItems="center"
rowGap="2"
>
<FormLabel gridArea="header" fontSize="sm" margin="0">
Then, use this new URL in your layouts instead: Then, use this new URL in your layouts instead:
</FormLabel> </FormLabel>
<Box flex="1 0 auto" width="2" /> <InputGroup gridArea="input" size="sm">
{isAlreadyConverted && ( <Input
<Flex alignItems="center" fontSize="sm" opacity="0.8"> placeholder="https://impress-outfit-images.openneo.net/outfits/123456789/600.png"
<CheckIcon marginRight="1.5" /> isReadOnly
<Box>{parseError.message}</Box> value={outputUrl || ""}
</Flex> />
)} {outputUrl && (
</Flex> <InputRightElement width="4rem" paddingRight="1">
<InputGroup size="sm"> <Button
<Input height="calc(100% - .5rem)"
placeholder="https://impress-outfit-images.openneo.net/outfits/123456789/600.png" size="xs"
isReadOnly minWidth="100%"
value={outputUrl || ""} onClick={onCopy}
/> >
{outputUrl && ( {hasCopied ? "Copied!" : "Copy"}
<InputRightElement width="4rem" paddingRight="1"> </Button>
<Button </InputRightElement>
height="calc(100% - .5rem)" )}
size="xs" </InputGroup>
minWidth="100%" <Box gridArea="status" textAlign="right" justifySelf="end">
onClick={onCopy} {isAlreadyConverted && (
> <Flex alignItems="center" fontSize="sm" opacity="0.8">
{hasCopied ? "Copied!" : "Copy"} <CheckIcon marginRight="1.5" />
</Button> <Box>{parseError.message}</Box>
</InputRightElement> </Flex>
)} )}
</InputGroup> </Box>
</Grid>
</FormControl> </FormControl>
<AspectRatio <AspectRatio
gridArea="preview" gridArea="preview"