kamp/pingvin-share
1
0
Fork 0
mirror of https://github.com/stonith404/pingvin-share.git synced 2024-07-02 23:40:41 +02:00
Code

fix: wrong layout if button text is too long in modals

Browse Source
This commit is contained in:
Elias Schneider 2023-07-22 16:23:04 +02:00
parent 231a2e95b9
commit f4c88aeb08
No known key found for this signature in database
GPG Key ID: 07E623B294202B6C
3 changed files with 53 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/components/account/showEnableTotpModal.tsx
View File

@ -1,8 +1,7 @@
import { import {
Button, Button,
Center, Center,
Col, Group,
Grid,
Image, Image,
Stack, Stack,
Text, Text,
@ -114,21 +113,23 @@ const CreateEnableTotpModal = ({
.catch(toast.axiosError); .catch(toast.axiosError);
})} })}
> >
<Grid align="flex-end"> <Group align="end">
<Col xs={9}>
<TextInput <TextInput
style={{ flex: "1" }}
variant="filled" variant="filled"
label={t("account.modal.totp.code")} label={t("account.modal.totp.code")}
placeholder="******" placeholder="******"
{...form.getInputProps("code")} {...form.getInputProps("code")}
/> />
</Col>
<Col xs={3}> <Button
<Button variant="outline" type="submit"> style={{ flex: "0 0 auto" }}
variant="outline"
type="submit"
>
<FormattedMessage id="account.modal.totp.verify" /> <FormattedMessage id="account.modal.totp.verify" />
</Button> </Button>
</Col> </Group>
</Grid>
</form> </form>
</Stack> </Stack>
</Center> </Center>

22
frontend/src/components/upload/modals/showCreateUploadModal.tsx
View File

@ -5,6 +5,7 @@ import {
Checkbox, Checkbox,
Col, Col,
Grid, Grid,
Group,
MultiSelect, MultiSelect,
NumberInput, NumberInput,
PasswordInput, PasswordInput,
@ -135,17 +136,16 @@ const CreateUploadModalBody = ({
})} })}
> >
<Stack align="stretch"> <Stack align="stretch">
<Grid align={form.errors.link ? "center" : "flex-end"}> <Group align="end">
<Col xs={9}>
<TextInput <TextInput
style={{ flex: "1" }}
variant="filled" variant="filled"
label="Link" label="Link"
placeholder="myAwesomeShare" placeholder="myAwesomeShare"
{...form.getInputProps("link")} {...form.getInputProps("link")}
/> />
</Col>
<Col xs={3}>
<Button <Button
style={{ flex: "0 0 auto" }}
variant="outline" variant="outline"
onClick={() => onClick={() =>
form.setFieldValue( form.setFieldValue(
@ -158,8 +158,7 @@ const CreateUploadModalBody = ({
> >
<FormattedMessage id="common.button.generate" /> <FormattedMessage id="common.button.generate" />
</Button> </Button>
</Col> </Group>
</Grid>
<Text <Text
italic italic
@ -173,6 +172,17 @@ const CreateUploadModalBody = ({
{!options.isReverseShare && ( {!options.isReverseShare && (
<> <>
<Grid align={form.errors.link ? "center" : "flex-end"}> <Grid align={form.errors.link ? "center" : "flex-end"}>
<Col xs={6}>
<NumberInput
min={1}
max={99999}
precision={0}
variant="filled"
label={t("upload.modal.expires.label")}
disabled={form.values.never_expires}
{...form.getInputProps("expiration_num")}
/>
</Col>
<Col xs={6}> <Col xs={6}>
<Select <Select
disabled={form.values.never_expires} disabled={form.values.never_expires}

2
frontend/src/i18n/translations/en-US.ts
View File

@ -260,8 +260,6 @@ export default {
"upload.modal.expires.never-long": "Never Expires", "upload.modal.expires.never-long": "Never Expires",
"upload.modal.link.label": "Link", "upload.modal.link.label": "Link",
"upload.modal.link.placeholder": "myAwesomeShare",
"upload.modal.expires.label": "Expiration", "upload.modal.expires.label": "Expiration",
"upload.modal.expires.minute-singular": "Minute", "upload.modal.expires.minute-singular": "Minute",
"upload.modal.expires.minute-plural": "Minutes", "upload.modal.expires.minute-plural": "Minutes",