change row/col to table

eu-digital-green-certificates · Sep 30, 2021 · 3b5c259 · 3b5c259
1 parent d8bdb8b
commit 3b5c259
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 71 deletions.
diff --git a/src/assets/SCSS/custom.scss b/src/assets/SCSS/custom.scss
@@ -113,7 +113,7 @@ $container-max-widths: (
  display: flex;
  height: 100%;
  flex-direction: column;
- 
+
  @include media-breakpoint-up(md) {
  padding-left: 7rem;
  padding-right: 7rem;
@@ -145,7 +145,7 @@ $container-max-widths: (
 }
 .col-item {
  background-color: #ccc;
- margin:auto;
+ margin: auto;
  border: #707070 solid 1px;
  max-width: 300px;
  height: 301px;
@@ -176,7 +176,7 @@ $container-max-widths: (
  margin: 0px;
  width: 100%;
  color: #262626;
- 
+
  @include media-breakpoint-up(md) {
  padding-left: 7rem;
  padding-right: 7rem;
@@ -324,20 +324,18 @@ $container-max-widths: (
  &:active {
  background: #ffd617;
  color: #262626;
- width: 100px;
  border: none;
  font-weight: bold;
  }
- 
+
  @include media-breakpoint-up(sm) {
  margin-top: 0rem;
  }
 }
 
-.upload-botton {
+.upload-button {
  background: transparent;
  color: #262626;
- width: 100px;
  border: 1px solid #262626;
  font-weight: bold;
  &:focus,
@@ -346,7 +344,6 @@ $container-max-widths: (
  &:active {
  background: transparent;
  color: #262626;
- width: 100px;
  border: 1px solid #262626;
  font-weight: bold;
  }
@@ -429,6 +426,10 @@ $container-max-widths: (
  align-items: center;
 }
 
+.text-right{
+ text-align: right;
+}
+
 .no-grow {
  flex: 0 1 0 !important;
 }
@@ -467,3 +468,48 @@ $container-max-widths: (
  display: flex;
  align-items: center;
 }
+
+td,
+th {
+ padding: 0.75rem !important;
+}
+
+.tbl-auto {
+ // width: 16.66%;
+ width: auto;
+}
+
+.tbl-1 {
+ // width: 16.66%;
+ width: calc(100% * (1 / 12));
+}
+
+.tbl-2 {
+ // width: 16.66%;
+ width: calc(100% * (2 / 12));
+}
+
+.tbl-3 {
+ // width: 16.66%;
+ width: calc(100% * (3 / 12));
+}
+
+.tbl-4 {
+ // width: 16.66%;
+ width: calc(100% * (4 / 12));
+}
+
+.tbl-5 {
+ // width: 41.66%;
+ width: calc(100% * (5 / 12));
+}
+
+.tbl-result {
+ min-width: 800px;
+}
+#qr-code-container {
+ background-color: white;
+ padding: 12px;
+ position: relative;
+ display: inline-flex;
+}
diff --git a/src/components/landing-page.component.tsx b/src/components/landing-page.component.tsx
@@ -122,7 +122,7 @@ const LandingPage = (props: any) => {
  />
  </Col>
  <Col sm="3" className='d-grid'>
- <Button className="next-button" type="submit">Next</Button>
+ <Button className="next-button" >Next</Button>
  </Col>
  </Form.Group>
  </Form>

diff --git a/src/components/record-checkin-page.component.tsx b/src/components/record-checkin-page.component.tsx
@@ -20,7 +20,7 @@
  */
 
 import React, { Fragment } from 'react';
-import { Fade, Container, Row, Col, Button, Collapse, Spinner } from 'react-bootstrap';
+import { Fade, Container, Row, Col, Button, Collapse, Spinner, Table } from 'react-bootstrap';
 
 import '../i18n';
 import { useTranslation } from 'react-i18next';
@@ -291,81 +291,73 @@ const RecordCheckinPage = (props: any) => {
  </Col>
 
  </Row>
- <Row className="bold">
-
- <Col xs={12} sm={2}>
- <span className="text-vertical-center">
- {t('translation:conditionFulfilled')}
- </span>
- </Col>
-
- <Col xs={12} sm={5}>
- <span className="text-vertical-left">
- {t('translation:name')}
- </span>
- </Col>
-
- {/* <Col xs={12} sm={2} lg={2} className="shrink-grow">
- <span className="text-vertical-center">
- {t('translation:lblUpload')}
- </span>
- </Col>
- <Col xs={12} sm={1} lg={1} className="no-grow">
- <span className="text-vertical-center">
- {t('translation:or')}
- </span>
- </Col> */}
-
- <Col xs={12} sm={5} lg={5} className="shrink-grow">
- <span className="text-vertical-left">{t('translation:lblScan')}</span>
- </Col>
- </Row>
- <hr />
  <div className='flex-fill'>
  {!(displayPassengers.length > 0)
  ? <DemoSpinner />
  : <Collapse appear={true} in={true} >
  <div>
- {
- displayPassengers.map((passenger: DisplayPassenger) =>
- <Fragment key={passenger.id}>
- <Row>
- <Col xs={12} sm={2}>
- <span className="text-vertical-center">
- {getStatusIcon(passenger)}
- </span>
- </Col>
- <Col xs={12} sm={5}>
+ <Table className='tbl-result' responsive>
+ <thead>
+ <tr>
+ <th>{t('translation:conditionFulfilled')}</th>
+ <th>{t('translation:name')}</th>
+ <th className='text-center align-middle'>{t('translation:lblUpload')}</th>
+ <th className='text-center p-0 align-middle'><strong>OR</strong></th>
+ <th className='text-center align-middle'>{t('translation:lblScan')}</th>
+ </tr>
+ </thead>
+ <tbody>{
+ displayPassengers.map((passenger: DisplayPassenger, i: number) =>
+ <tr key={i}>
+ <td className='tbl-2'>{getStatusIcon(passenger)}</td>
+ <td className='tbl-5'>
  <span>
  <strong>{passenger.forename + ' ' + passenger.lastname}</strong>
  </span>
  {
  !(passenger.result?.results && passenger.result?.results.length > 0)
  ? <></>
  : <Container className={(passenger.result?.result === 'NOK' ? 'error-information' : 'warning-information') + ' column-container p-1 my-3'} >
- {passenger.result.results.map((result: Result) =>
- <span>
- {result.details}
- </span>)}
+ {
+ passenger.result.results.map((result: Result) =>
+ <span>
+ {result.details}
+ </span>)
+ }
  </Container>
  }
- </Col>
- {/* <Col xs={12} sm={2} lg={2} className="shrink-grow"><Button className="upload-botton">{t('translation:upload')}</Button>
- </Col>
- //Colum for or
- <Col xs={12} sm={1} lg={1} className="no-grow">
- &nbsp;
- </Col> */}
- <Col xs={12} sm={5} lg={5} className="shrink-grow qr-code-container">
+ </td>
+ <td className='tbl-auto bg-light align-middle text-center'>
  {
- passenger.qrCode ? <> <QRCode id='qr-code-pdf' size={256} renderAs='canvas' value={passenger.qrCode} />
- </> : <></>
+ <div className='d-grid'>
+ <Button className=""
+ variant='outline-secondary'
+ size='sm'
+ >
+ {t('translation:upload')}
+ </Button>
+ </div>
+ }
+ </td>
+ <td className='tbl-auto p-0 bg-light'></td>
+ <td className='tbl-2 bg-light text-right'>
+ {
+ !passenger.qrCode
+ ? <></>
+ : <div id='qr-code-container'>
+ <QRCode id='qr-code-pdf'
+ size={256}
+ renderAs='svg'
+ value={passenger.qrCode}
+ />
+ </div>
  }
- </Col>
- </Row>
- <hr />
- </Fragment>
- )}
+ </td>
+ </tr>
+ )
+ }
+ </tbody>
+ </Table>
  </div>
  </Collapse>
  }
@@ -383,10 +375,11 @@ const RecordCheckinPage = (props: any) => {
  </Col>
  <Col sm='6' className='d-grid'>
  <Button
- className="ml-3 buttons-line-button"
+ className="ml-3"
  disabled={false}
+ variant='info'
  >
- {t('translation:submitCheckin')}
+ <strong>{t('translation:submitCheckin')}</strong>
  </Button>
  </Col>
  </Row>