add fade animation (#107)

eu-digital-green-certificates · Jul 5, 2021 · 45daa28 · 45daa28
1 parent 98ef0ee
commit 45daa28
Show file tree

Hide file tree

Showing 9 changed files with 462 additions and 434 deletions.
diff --git a/src/assets/SCSS/custom.scss b/src/assets/SCSS/custom.scss
@@ -1,5 +1,5 @@
 //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 {

diff --git a/src/components/landing-page.component.tsx b/src/components/landing-page.component.tsx
@@ -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>
     )
 }
 

diff --git a/src/components/modules/card-footer.component.tsx b/src/components/modules/card-footer.component.tsx
@@ -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

diff --git a/src/components/record-recovery-cert-data.component.tsx b/src/components/record-recovery-cert-data.component.tsx
diff --git a/src/components/record-test-cert-data.component.tsx b/src/components/record-test-cert-data.component.tsx
@@ -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 />
+
+                                {/* 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}
+                                />
+                            </Card.Body>
+
+                            {/*
                             footer with clear and nex button
                         */}
-                        <CardFooter handleCancel={handleCancel} />
+                            <CardFooter handleCancel={handleCancel} />
 
-                    </Form>
-                </Card>
+                        </Form>
+                    </Card>
+                </Fade>
             </>
     )
 }