Skip to content

GitLab

Unverified Commit 45daa280 authored by Gordon Grund's avatar Gordon Grund Committed by GitHub
Browse files

add fade animation (#107)

parent 98ef0ee8
Hide whitespace changes
Inline Side-by-side
src/assets/SCSS/custom.scss
View file @ 45daa280
//Font Definitions
@import '@fortawesome/fontawesome-free/css/solid.min.css';
@import "@fortawesome/fontawesome-free/css/solid.min.css";
// Override default variables before the import
$body-bg: #cfcfcf;
......@@ -22,8 +22,12 @@ $data-card-border-radius: 0px;
$input-border-radius: 4px;
$user-image-width: 39px;
select, option {
font-family: 'Font Awesome 5 Free', 'Arial';
select,
option {
font-family: "Font Awesome 5 Free", "Arial";
}
body {
overflow-y: scroll;
}
hr {
......@@ -60,6 +64,10 @@ hr {
border-radius: $data-card-border-radius;
border: none;
}
#data-body {
padding: 1rem;
padding-bottom: 0px;
}
.data-modal {
background-color: white;
border-radius: $data-card-border-radius;
......@@ -325,6 +333,8 @@ hr {
margin-left: 16px;
display: flex;
align-self: center;
padding-top: 2px;
height: 32px;
}
.bg-gray-1 {
......
src/components/landing-page.component.tsx
View file @ 45daa280
......@@ -19,7 +19,7 @@
* under the License.
*/
import { Button, Container } from 'react-bootstrap'
import { Button, Container, Fade } from 'react-bootstrap'
import '../i18n';
import { useTranslation } from 'react-i18next';
......@@ -41,15 +41,16 @@ const LandingPage = () => {
}, [context.navigation])
return (!isInit ? <Spinner /> :
<Container className='center-content'>
<Fade appear={true} in={true} >
<Container className='center-content'>
<span className='landing-title mx-auto mb-4'>{t('translation:welcome')}</span>
<span className='landing-title mx-auto mb-4'>{t('translation:welcome')}</span>
<Button block className='landing-btn my-2' onClick={context.navigation!.toRecordVac}>{t('translation:record-vaccination-cert-dat')}</Button>
<Button block className='landing-btn my-2' onClick={context.navigation!.toRecordTest}>{t('translation:record-test-cert-dat')}</Button>
<Button block className='landing-btn my-2' onClick={context.navigation!.toRecordRecovery}>{t('translation:record-recovery-cert-dat')}</Button>
<Button block className='landing-btn my-2' onClick={context.navigation!.toRecordVac}>{t('translation:record-vaccination-cert-dat')}</Button>
<Button block className='landing-btn my-2' onClick={context.navigation!.toRecordTest}>{t('translation:record-test-cert-dat')}</Button>
<Button block className='landing-btn my-2' onClick={context.navigation!.toRecordRecovery}>{t('translation:record-recovery-cert-dat')}</Button>
</Container>
</Container>
</Fade>
)
}
......
src/components/modules/card-footer.component.tsx
View file @ 45daa280
......@@ -10,6 +10,8 @@ const CardFooter = (props: any) => {
return (!props ? <></> :
<Card.Footer id='data-footer'>
<hr className='pb-3' />
<Row>
<Col xs='6' md='3' className='pl-0 pr-2'>
<Button
......
src/components/record-recovery-cert-data.component.tsx
View file @ 45daa280
......@@ -20,7 +20,7 @@
*/
import React from 'react';
import { Card, Col, Form, Row } from 'react-bootstrap';
import { Card, Col, Fade, Form, Row } from 'react-bootstrap';
import '../i18n';
import { useTranslation } from 'react-i18next';
......@@ -174,140 +174,141 @@ const RecordRecoveryCertData = (props: any) => {
return (
!(isInit && context && context.valueSets) ? <Spinner /> :
<>
<Card id='data-card'>
<Fade appear={true} in={true} >
<Card id='data-card'>
<Form className='form-flex' onSubmit={handleSubmit} /*validated={validated}*/>
<Form className='form-flex' onSubmit={handleSubmit} /*validated={validated}*/>
{/*
{/*
header with title and id card query
*/}
<CardHeader title={t('translation:record-recovery-cert-dat')} />
<CardHeader title={t('translation:record-recovery-cert-dat')} />
{/*
{/*
content area with patient inputs and check box
*/}
<Card.Body id='data-body' className='p-3'>
{/* name inputs */}
<PersonInputs eudgc={props.eudgc} onChange={setPerson} />
<hr />
{/* combobox disease */}
<FormGroupValueSetSelect controlId='formDiseaseInput' title={t('translation:disease-agent')} placeholder={t('translation:def-disease-agent')}
value={disease}
onChange={(evt: any) => setDisease(evt.target.value)}
required
valueSet={context.valueSets[Value_Sets.DiseaseAgent]}
/>
<hr />
{/* Date of First Positive Test Result */}
<Form.Group as={Row} controlId='formLastDateInput' className='pb-3 mb-0'>
<Form.Label className='input-label ' column xs='5' sm='3'>{t('translation:first-positive-test-date') + '*'}</Form.Label>
<Col xs='7' sm='9' className='d-flex'>
<DatePicker
selected={firstPositiveResultDate}
onChange={handleFirstPositiveResultDate}
dateFormat='yyyy-MM-dd'
isClearable
placeholderText={t('translation:first-positive-test-date')}
className='qt-input form-control'
wrapperClassName='align-self-center'
showMonthDropdown
showYearDropdown
dropdownMode="select"
maxDate={dateValidFrom ? new Date(dateValidFrom.getTime() - timeAfter) : firstPosMaxDate}
minDate={dateValidTo ? new Date(dateValidTo.getTime() - expirationMilSeconds) : firstPosMinDate}
openToDate={firstPositiveResultDate
? firstPositiveResultDate
: dateValidFrom
? new Date(dateValidFrom.getTime() - timeAfter)
: new Date()}
required
/>
</Col>
</Form.Group>
{/* Combobox for the vaccin countries in iso-3166-1-alpha-2 */}
<FormGroupValueSetSelect controlId='formVacCountryInput' title={t('translation:recovery-country')}
value={testCountryCode}
onChange={(evt: any) => setTestCountryCode(evt.target.value)}
required
valueSet={context.valueSets[Value_Sets.CountryCodes]}
/>
<hr />
{/* certificateIssuer */}
<FormGroupInput controlId='formcertificateIssuerInput' title={t('translation:certificateIssuer')} placeholder={t('translation:certificateIssuer')}
value={certificateIssuer}
onChange={(evt: any) => setCertificateIssuer(evt.target.value)}
required
maxLength={80}
/>
{/* Date: Certificate Valid From - To */}
<Form.Group as={Row} controlId='formDateValidFromToInput' className='pb-3 mb-0'>
<Form.Label className='input-label ' column xs='5' sm='3'>{t('translation:cert-valid-from-to') + '*'}</Form.Label>
<Col xs='7' sm='9' className='d-flex'>
<DatePicker
selected={dateValidFrom}
onChange={handleDateValidFrom}
dateFormat='yyyy-MM-dd'
isClearable
placeholderText={t('translation:valid-from')}
className='qt-input form-control'
wrapperClassName='align-self-center'
showMonthDropdown
showYearDropdown
dropdownMode="select"
maxDate={new Date()}
minDate={firstPositiveResultDate
? new Date(firstPositiveResultDate.getTime() + timeAfter)
: dateValidTo
? new Date(dateValidTo.getTime() + timeAfter - expirationMilSeconds)
: new Date(Date.now() + timeAfter - expirationMilSeconds)}
openToDate={dateValidFrom ? dateValidFrom : new Date()}
required
/>
<span className='space-five'>{'-'}</span>
<DatePicker
selected={dateValidTo}
onChange={handleDateValidTo}
dateFormat='yyyy-MM-dd'
isClearable
placeholderText={t('translation:valid-to')}
className='qt-input form-control'
wrapperClassName='align-self-center'
showMonthDropdown
showYearDropdown
dropdownMode="select"
maxDate={firstPositiveResultDate
? new Date(firstPositiveResultDate.getTime() + expirationMilSeconds)
: dateValidFrom
? new Date(dateValidFrom.getTime() - timeAfter + expirationMilSeconds)
: new Date(Date.now() - timeAfter + expirationMilSeconds)}
minDate={new Date()}
openToDate={dateValidTo ? dateValidTo : new Date()}
required
/>
</Col>
</Form.Group>
<hr />
</Card.Body>
{/*
<Card.Body id='data-body'>
{/* name inputs */}
<PersonInputs eudgc={props.eudgc} onChange={setPerson} />
<hr />
{/* combobox disease */}
<FormGroupValueSetSelect controlId='formDiseaseInput' title={t('translation:disease-agent')} placeholder={t('translation:def-disease-agent')}
value={disease}
onChange={(evt: any) => setDisease(evt.target.value)}
required
valueSet={context.valueSets[Value_Sets.DiseaseAgent]}
/>
<hr />
{/* Date of First Positive Test Result */}
<Form.Group as={Row} controlId='formLastDateInput' className='pb-3 mb-0'>
<Form.Label className='input-label ' column xs='5' sm='3'>{t('translation:first-positive-test-date') + '*'}</Form.Label>
<Col xs='7' sm='9' className='d-flex'>
<DatePicker
selected={firstPositiveResultDate}
onChange={handleFirstPositiveResultDate}
dateFormat='yyyy-MM-dd'
isClearable
placeholderText={t('translation:first-positive-test-date')}
className='qt-input form-control'
wrapperClassName='align-self-center'
showMonthDropdown
showYearDropdown
dropdownMode="select"
maxDate={dateValidFrom ? new Date(dateValidFrom.getTime() - timeAfter) : firstPosMaxDate}
minDate={dateValidTo ? new Date(dateValidTo.getTime() - expirationMilSeconds) : firstPosMinDate}
openToDate={firstPositiveResultDate
? firstPositiveResultDate
: dateValidFrom
? new Date(dateValidFrom.getTime() - timeAfter)
: new Date()}
required
/>
</Col>
</Form.Group>
{/* Combobox for the vaccin countries in iso-3166-1-alpha-2 */}
<FormGroupValueSetSelect controlId='formVacCountryInput' title={t('translation:recovery-country')}
value={testCountryCode}
onChange={(evt: any) => setTestCountryCode(evt.target.value)}
required
valueSet={context.valueSets[Value_Sets.CountryCodes]}
/>
<hr />
{/* certificateIssuer */}
<FormGroupInput controlId='formcertificateIssuerInput' title={t('translation:certificateIssuer')} placeholder={t('translation:certificateIssuer')}
value={certificateIssuer}
onChange={(evt: any) => setCertificateIssuer(evt.target.value)}
required
maxLength={80}
/>
{/* Date: Certificate Valid From - To */}
<Form.Group as={Row} controlId='formDateValidFromToInput' className='pb-3 mb-0'>
<Form.Label className='input-label ' column xs='5' sm='3'>{t('translation:cert-valid-from-to') + '*'}</Form.Label>
<Col xs='7' sm='9' className='d-flex'>
<DatePicker
selected={dateValidFrom}
onChange={handleDateValidFrom}
dateFormat='yyyy-MM-dd'
isClearable
placeholderText={t('translation:valid-from')}
className='qt-input form-control'
wrapperClassName='align-self-center'
showMonthDropdown
showYearDropdown
dropdownMode="select"
maxDate={new Date()}
minDate={firstPositiveResultDate
? new Date(firstPositiveResultDate.getTime() + timeAfter)
: dateValidTo
? new Date(dateValidTo.getTime() + timeAfter - expirationMilSeconds)
: new Date(Date.now() + timeAfter - expirationMilSeconds)}
openToDate={dateValidFrom ? dateValidFrom : new Date()}
required
/>
<span className='space-five'>{'-'}</span>
<DatePicker
selected={dateValidTo}
onChange={handleDateValidTo}
dateFormat='yyyy-MM-dd'
isClearable
placeholderText={t('translation:valid-to')}
className='qt-input form-control'
wrapperClassName='align-self-center'
showMonthDropdown
showYearDropdown
dropdownMode="select"
maxDate={firstPositiveResultDate
? new Date(firstPositiveResultDate.getTime() + expirationMilSeconds)
: dateValidFrom
? new Date(dateValidFrom.getTime() - timeAfter + expirationMilSeconds)
: new Date(Date.now() - timeAfter + expirationMilSeconds)}
minDate={new Date()}
openToDate={dateValidTo ? dateValidTo : new Date()}
required
/>
</Col>
</Form.Group>
</Card.Body>
{/*
footer with clear and nex button
*/}
<CardFooter handleCancel={handleCancel} />
<CardFooter handleCancel={handleCancel} />
</Form>
</Card>
</Form>
</Card>
</Fade>
</>
)
}
......
src/components/record-test-cert-data.component.tsx
View file @ 45daa280
......@@ -20,7 +20,7 @@
*/
import React from 'react';
import { Card, Col, Form, Row } from 'react-bootstrap';
import { Card, Col, Fade, Form, Row } from 'react-bootstrap';
import '../i18n';
import { useTranslation } from 'react-i18next';
......@@ -176,124 +176,125 @@ const RecordTestCertData = (props: any) => {
return (
!(isInit && context && context.valueSets) ? <Spinner /> :
<>
<Card id='data-card'>
<Fade appear={true} in={true} >
<Card id='data-card'>
<Form className='form-flex' onSubmit={handleSubmit} /*validated={validated}*/>
<Form className='form-flex' onSubmit={handleSubmit} /*validated={validated}*/>
{/*
{/*
header with title and id card query
*/}
<CardHeader title={t('translation:test-cert')} />
<CardHeader title={t('translation:test-cert')} />
{/*
{/*
content area with patient inputs and check box
*/}
<Card.Body id='data-body' className='p-3'>
<PersonInputs eudgc={props.eudgc} onChange={setPerson} />
<hr />
{/* combobox disease */}
<FormGroupValueSetSelect controlId='formDiseaseInput' title={t('translation:disease-agent')} placeholder={t('translation:def-disease-agent')}
value={disease}
onChange={(evt: any) => setDisease(evt.target.value)}
required
valueSet={context.valueSets[Value_Sets.DiseaseAgent]}
/>
{/* testType input */}
<FormGroupValueSetSelect controlId='formTestTypeInput' title={t('translation:testType')}
value={testType}
onChange={(evt: any) => setTestType(evt.target.value)}
required
valueSet={context.valueSets[Value_Sets.TestType]}
/>
{/* testName input */}
<FormGroupInput controlId='formTestNameInput' title={t('translation:testName')}
value={testName}
onChange={(evt: any) => setTestName(evt.target.value)}
hidden={testType !== 'LP6464-4'}
maxLength={80}
/>
{/* combobox testManufacturers */}
<FormGroupValueSetSelect controlId='formTestManufactorersInput' title={t('translation:testManufacturers')}
value={testManufacturers}
onChange={(evt: any) => setTestManufacturers(evt.target.value)}
hidden={testType !== 'LP217198-3'}
valueSet={context.valueSets[Value_Sets.TestManufacturer]}
/>
<hr />
{/* sampleDateTime */}
<Form.Group as={Row} controlId='formSampleDateTimeInput' className='pb-3 mb-0'>
<Form.Label className='input-label ' column xs='5' sm='3'>{t('translation:sampleDateTime') + '*'}</Form.Label>
<Col xs='7' sm='9' className='d-flex'>
<DatePicker
selected={sampleDateTime}
onChange={handleSampleDateTimeChange}
dateFormat={utils.pickerDateTimeFormat}
placeholderText={t('translation:sampleDateTime')}
className='qt-input form-control'
wrapperClassName='align-self-center'
showMonthDropdown
showYearDropdown
showTimeSelect
dropdownMode="select"
minDate={new Date(2020, 10)}
openToDate={new Date()}
required
/>
</Col>
</Form.Group>
{/* combobox testResult */}
<FormGroupValueSetSelect controlId='formTestResultInput' title={t('translation:testResult')}
value={testResult}
onChange={(evt: any) => setTestResult(evt.target.value)}
required
valueSet={context.valueSets[Value_Sets.TestResult]}
/>
{/* testCenter input */}
<FormGroupInput controlId='formTestCenterInput' title={t('translation:testCenter')}
value={testCenter}
onChange={(evt: any) => setTestCenter(evt.target.value)}
required
maxLength={80}
/>
<hr />
{/* Combobox for the vaccin countries in iso-3166-1-alpha-2 */}
<FormGroupValueSetSelect controlId='formVacCountryInput' title={t('translation:vac-country')}
value={issuerCountryCode}
onChange={(evt: any) => setIssuerCountryCode(evt.target.value)}
required
valueSet={context.valueSets[Value_Sets.CountryCodes]}
/>
{/* certificateIssuer */}
<FormGroupInput controlId='formcertificateIssuerInput' title={t('translation:certificateIssuer')} placeholder={t('translation:certificateIssuer')}
value={certificateIssuer}
onChange={(evt: any) => setCertificateIssuer(evt.target.value)}
required
maxLength={80}
/>
<hr />
</Card.Body>
{/*
<Card.Body id='data-body'>
<PersonInputs eudgc={props.eudgc} onChange={setPerson} />
<hr />
{/* combobox disease */}
<FormGroupValueSetSelect controlId='formDiseaseInput' title={t('translation:disease-agent')} placeholder={t('translation:def-disease-agent')}
value={disease}
onChange={(evt: any) => setDisease(evt.target.value)}
required
valueSet={context.valueSets[Value_Sets.DiseaseAgent]}
/>
{/* testType input */}
<FormGroupValueSetSelect controlId='formTestTypeInput' title={t('translation:testType')}
value={testType}
onChange={(evt: any) => setTestType(evt.target.value)}
required
valueSet={context.valueSets[Value_Sets.TestType]}
/>
{/* testName input */}
<FormGroupInput controlId='formTestNameInput' title={t('translation:testName')}
value={testName}
onChange={(evt: any) => setTestName(evt.target.value)}
hidden={testType !== 'LP6464-4'}
maxLength={80}
/>
{/* combobox testManufacturers */}
<FormGroupValueSetSelect controlId='formTestManufactorersInput' title={t('translation:testManufacturers')}
value={testManufacturers}
onChange={(evt: any) => setTestManufacturers(evt.target.value)}
hidden={testType !== 'LP217198-3'}
valueSet={context.valueSets[Value_Sets.TestManufacturer]}
/>
<hr />
{/* sampleDateTime */}
<Form.Group as={Row} controlId='formSampleDateTimeInput' className='pb-3 mb-0'>
<Form.Label className='input-label ' column xs='5' sm='3'>{t('translation:sampleDateTime') + '*'}</Form.Label>
<Col xs='7' sm='9' className='d-flex'>
<DatePicker
selected={sampleDateTime}
onChange={handleSampleDateTimeChange}
dateFormat={utils.pickerDateTimeFormat}
placeholderText={t('translation:sampleDateTime')}
className='qt-input form-control'
wrapperClassName='align-self-center'
showMonthDropdown
showYearDropdown
showTimeSelect
dropdownMode="select"
minDate={new Date(2020, 10)}
openToDate={new Date()}
required
/>
</Col>
</Form.Group>
{/* combobox testResult */}
<FormGroupValueSetSelect controlId='formTestResultInput' title={t('translation:testResult')}
value={testResult}
onChange={(evt: any) => setTestResult(evt.target.value)}
required
valueSet={context.valueSets[Value_Sets.TestResult]}
/>
{/* testCenter input */}
<FormGroupInput controlId='formTestCenterInput' title={t('translation:testCenter')}
value={testCenter}
onChange={(evt: any) => setTestCenter(evt.target.value)}
required
maxLength={80}
/>
<hr />