Skip to content
Snippets Groups Projects
Commit 8c60a408 authored by Tore.Brede's avatar Tore.Brede
Browse files

Merge branch 'GREG-190_contact_information_box_scaling' into 'master' 

GREG-190: Making table scale a bit better on small screens

See merge request !280
parents 385aab45 ef4f8c8f
No related branches found
No related tags found
1 merge request!280GREG-190: Making table scale a bit better on small screens
Pipeline #115784 passed
Stage: venv update
    Stage: tests and linting
      Hide whitespace changes
      Inline Side-by-side
      frontend/src/components/identityLine/index.tsx
      + 51
      − 28
      View file @ 8c60a408
      import { Button, TableRow, Typography } from '@mui/material' import { Box, Button, TableRow, Typography } from '@mui/material'
      import ConfirmDialog from 'components/confirmDialog' import ConfirmDialog from 'components/confirmDialog'
      import { Identity } from 'interfaces' import { Identity } from 'interfaces'
      import { useState } from 'react' import { useState } from 'react'
      ...@@ -46,33 +46,56 @@ const IdentityLine = ({ ...@@ -46,33 +46,56 @@ const IdentityLine = ({
      return ( return (
      <TableRow> <TableRow>
      <TableCell align="left">{text}</TableCell> <TableCell align="left">{text}</TableCell>
      <TableCell align="left">{identity ? identity.value : ''}</TableCell> <TableCell align="left">
      <TableCell> <Box
      {!identity.verified_at ? ( sx={{
      <Typography> display: 'flex',
      <Button flexDirection: { xs: 'column', md: 'row' },
      aria-label={t('button.verify')} justifyContent: 'flex-start',
      onClick={() => setConfirmOpen(true)} }}
      disabled={ >
      !identity || {/* Setting flex grow to 1 to push the verify button to the right on large screens */}
      (disableNinVerification && <Box
      identity.type === 'norwegian_national_id_number') sx={{
      } flexGrow: 1,
      > }}
      {t('button.verify')} >
      </Button> {identity ? identity.value : ''}
      <ConfirmDialog </Box>
      title={t('confirmationDialog.confirmIdentityTitle')}
      open={confirmOpen} {!identity.verified_at ? (
      setOpen={setConfirmOpen} <Box>
      onConfirm={verifyIdentity(identity.id)} <Typography>
      > <Button
      {getDialogText()} aria-label={t('button.verify')}
      </ConfirmDialog> sx={{
      </Typography> alignSelf: { xs: 'auto', md: 'flex-end' },
      ) : ( marginLeft: { xs: '0rem', md: '1rem' },
      <CheckIcon sx={{ fill: (theme) => theme.palette.success.main }} /> 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> </TableCell>
      </TableRow> </TableRow>
      ) )
      ......
      frontend/src/routes/sponsor/guest/guestInfo/index.tsx
      + 13
      − 7
      View file @ 8c60a408
      ...@@ -180,11 +180,9 @@ export default function GuestInfo({ ...@@ -180,11 +180,9 @@ export default function GuestInfo({
      <Table sx={{ minWidth: 650 }} aria-label="simple table"> <Table sx={{ minWidth: 650 }} aria-label="simple table">
      <TableHead> <TableHead>
      <TableRow> <TableRow>
      <TableHeadCell align="left"> <TableHeadCell align="left" colSpan={2}>
      {t('guestInfo.contactInfoTableText')} {t('guestInfo.contactInfoTableText')}
      </TableHeadCell> </TableHeadCell>
      <TableHeadCell />
      <TableHeadCell />
      </TableRow> </TableRow>
      </TableHead> </TableHead>
      <TableBody> <TableBody>
      ...@@ -201,7 +199,7 @@ export default function GuestInfo({ ...@@ -201,7 +199,7 @@ export default function GuestInfo({
      <Box <Box
      sx={{ sx={{
      display: 'flex', display: 'flex',
      flexDirection: 'row', flexDirection: { xs: 'column', md: 'row' },
      justifyContent: 'flex-start', justifyContent: 'flex-start',
      }} }}
      > >
      ...@@ -230,19 +228,27 @@ export default function GuestInfo({ ...@@ -230,19 +228,27 @@ export default function GuestInfo({
      sx={{ sx={{
      display: 'flex', display: 'flex',
      flexDirection: 'row', flexDirection: 'row',
      justifyContent: 'flex-end', justifyContent: { xs: 'flex-start', md: 'flex-end' },
      }} }}
      > >
      <Button <Button
      color="secondary" 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} onClick={resend}
      > >
      {t('button.resendInvitation')} {t('button.resendInvitation')}
      </Button> </Button>
      <Button <Button
      color="secondary" color="secondary"
      sx={{ maxHeight: '2.3rem', marginLeft: '0.5rem' }} sx={{
      maxHeight: '2.3rem',
      marginLeft: '0.5rem',
      marginTop: { xs: '0.3rem', md: '0rem' },
      }}
      onClick={handleCancel} onClick={handleCancel}
      > >
      {t('button.cancelInvitation')} {t('button.cancelInvitation')}
      ......
      0% or .
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment