From ef4f8c8f8de10ad1b0a7d5377706be51bb6e8af0 Mon Sep 17 00:00:00 2001
From: Tore Brede <Tore.Brede@uib.no>
Date: Thu, 10 Feb 2022 11:14:20 +0100
Subject: [PATCH] GREG-190: Making table scale a bit better on small screens
---
.../src/components/identityLine/index.tsx | 79 ++++++++++++-------
.../routes/sponsor/guest/guestInfo/index.tsx | 20 +++--
2 files changed, 64 insertions(+), 35 deletions(-)
diff --git a/frontend/src/components/identityLine/index.tsx b/frontend/src/components/identityLine/index.tsx
index 8c8a2f82..bd90134c 100644
--- a/frontend/src/components/identityLine/index.tsx
+++ b/frontend/src/components/identityLine/index.tsx
@@ -1,4 +1,4 @@
-import { Button, TableRow, Typography } from '@mui/material'
+import { Box, Button, TableRow, Typography } from '@mui/material'
import ConfirmDialog from 'components/confirmDialog'
import { Identity } from 'interfaces'
import { useState } from 'react'
@@ -46,33 +46,56 @@ const IdentityLine = ({
return (
<TableRow>
<TableCell align="left">{text}</TableCell>
- <TableCell align="left">{identity ? identity.value : ''}</TableCell>
- <TableCell>
- {!identity.verified_at ? (
- <Typography>
- <Button
- aria-label={t('button.verify')}
- onClick={() => setConfirmOpen(true)}
- disabled={
- !identity ||
- (disableNinVerification &&
- identity.type === 'norwegian_national_id_number')
- }
- >
- {t('button.verify')}
- </Button>
- <ConfirmDialog
- title={t('confirmationDialog.confirmIdentityTitle')}
- open={confirmOpen}
- setOpen={setConfirmOpen}
- onConfirm={verifyIdentity(identity.id)}
- >
- {getDialogText()}
- </ConfirmDialog>
- </Typography>
- ) : (
- <CheckIcon sx={{ fill: (theme) => theme.palette.success.main }} />
- )}
+ <TableCell align="left">
+ <Box
+ sx={{
+ display: 'flex',
+ flexDirection: { xs: 'column', md: 'row' },
+ justifyContent: 'flex-start',
+ }}
+ >
+ {/* Setting flex grow to 1 to push the verify button to the right on large screens */}
+ <Box
+ sx={{
+ flexGrow: 1,
+ }}
+ >
+ {identity ? identity.value : ''}
+ </Box>
+
+ {!identity.verified_at ? (
+ <Box>
+ <Typography>
+ <Button
+ aria-label={t('button.verify')}
+ sx={{
+ alignSelf: { xs: 'auto', md: 'flex-end' },
+ marginLeft: { xs: '0rem', md: '1rem' },
+ marginTop: { xs: '0.3rem', md: '0rem' },
+ }}
+ onClick={() => setConfirmOpen(true)}
+ disabled={
+ !identity ||
+ (disableNinVerification &&
+ identity.type === 'norwegian_national_id_number')
+ }
+ >
+ {t('button.verify')}
+ </Button>
+ <ConfirmDialog
+ title={t('confirmationDialog.confirmIdentityTitle')}
+ open={confirmOpen}
+ setOpen={setConfirmOpen}
+ onConfirm={verifyIdentity(identity.id)}
+ >
+ {getDialogText()}
+ </ConfirmDialog>
+ </Typography>
+ </Box>
+ ) : (
+ <CheckIcon sx={{ fill: (theme) => theme.palette.success.main }} />
+ )}
+ </Box>
</TableCell>
</TableRow>
)
diff --git a/frontend/src/routes/sponsor/guest/guestInfo/index.tsx b/frontend/src/routes/sponsor/guest/guestInfo/index.tsx
index 3aee82c6..28c1cd68 100644
--- a/frontend/src/routes/sponsor/guest/guestInfo/index.tsx
+++ b/frontend/src/routes/sponsor/guest/guestInfo/index.tsx
@@ -180,11 +180,9 @@ export default function GuestInfo({
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow>
- <TableHeadCell align="left">
+ <TableHeadCell align="left" colSpan={2}>
{t('guestInfo.contactInfoTableText')}
</TableHeadCell>
- <TableHeadCell />
- <TableHeadCell />
</TableRow>
</TableHead>
<TableBody>
@@ -201,7 +199,7 @@ export default function GuestInfo({
<Box
sx={{
display: 'flex',
- flexDirection: 'row',
+ flexDirection: { xs: 'column', md: 'row' },
justifyContent: 'flex-start',
}}
>
@@ -230,19 +228,27 @@ export default function GuestInfo({
sx={{
display: 'flex',
flexDirection: 'row',
- justifyContent: 'flex-end',
+ justifyContent: { xs: 'flex-start', md: 'flex-end' },
}}
>
<Button
color="secondary"
- sx={{ maxHeight: '2.3rem', marginLeft: '1rem' }}
+ sx={{
+ maxHeight: '2.3rem',
+ marginLeft: { xs: '0rem', md: '1rem' },
+ marginTop: { xs: '0.3rem', md: '0rem' },
+ }}
onClick={resend}
>
{t('button.resendInvitation')}
</Button>
<Button
color="secondary"
- sx={{ maxHeight: '2.3rem', marginLeft: '0.5rem' }}
+ sx={{
+ maxHeight: '2.3rem',
+ marginLeft: '0.5rem',
+ marginTop: { xs: '0.3rem', md: '0rem' },
+ }}
onClick={handleCancel}
>
{t('button.cancelInvitation')}
--
GitLab