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

Lookup/petpage converter layout upgrades

Browse source 
Added placeholders, and improved copy styles

I tried a two-column view for desktop, but it's too busy with the long label text. This is clearer!
This commit is contained in:
Emi Matchu 2021-05-25 04:17:09 -07:00
parent 8b3cfe7118
commit 08eee30743
1 changed files with 27 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/app/OutfitUrlsPage.js
View file

@ -272,31 +272,45 @@ function BulkImageConverter() {
<Textarea <Textarea
fontFamily="monospace" fontFamily="monospace"
fontSize="xs" fontSize="xs"
placeholder={`<table> <!-- Example input, paste your HTML here! -->
<tr>
<td><img src="https://openneo-uploads.s3.amazonaws.com/outfits/123/456/700/preview.png"></td>
<td><img src="https://openneo-uploads.s3.amazonaws.com/outfits/123/456/701/preview.png"></td>
<td><img src="https://openneo-uploads.s3.amazonaws.com/outfits/123/456/702/preview.png"></td>
...`}
value={inputHtml} value={inputHtml}
onChange={(e) => setInputHtml(e.target.value)} onChange={(e) => setInputHtml(e.target.value)}
/> />
</FormControl> </FormControl>
<FormControl gridArea="output"> <FormControl gridArea="output">
<Flex alignItems="center"> <Flex alignItems="center" marginBottom="2">
<FormLabel fontSize="sm"> <FormLabel fontSize="sm" margin="0">
Then, use this new HTML for your page instead: Then, use this new HTML for your page instead:
</FormLabel> </FormLabel>
<Box flex="1 0 0" /> <Box width="2" />
<Button size="xs" onClick={onCopy} marginLeft="4"> {outputHtml && (
<Grid templateAreas="the-area"> <Button size="xs" onClick={onCopy}>
<Box gridArea="the-area">{hasCopied ? "Copied!" : "Copy"}</Box> <Grid templateAreas="the-area">
{/* This invisible "Copied!" enforces a min size for the button <Box gridArea="the-area">{hasCopied ? "Copied!" : "Copy"}</Box>
* content, so that the button never changes size. */} {/* This invisible "Copied!" enforces a min size for the button
<Box gridArea="the-area" aria-hidden visibility="hidden"> * content, so that the button never changes size. */}
Copied! <Box gridArea="the-area" aria-hidden visibility="hidden">
</Box> Copied!
</Grid> </Box>
</Button> </Grid>
</Button>
)}
</Flex> </Flex>
<Textarea <Textarea
isReadOnly isReadOnly
fontFamily="monospace" fontFamily="monospace"
fontSize="xs" fontSize="xs"
placeholder={`<table> <!-- Example output, your new HTML will appear here! -->
<tr>
<td><img src="https://impress-outfit-images.openneo.net/outfits/123456700/v/1234/600.png"></td>
<td><img src="https://impress-outfit-images.openneo.net/outfits/123456701/v/5678/600.png"></td>
<td><img src="https://impress-outfit-images.openneo.net/outfits/123456702/v/9012/600.png"></td>
...`}
value={outputHtml} value={outputHtml}
/> />
</FormControl> </FormControl>