From 50403f06fb318cf713ec1bc64984c19e9cc866ec Mon Sep 17 00:00:00 2001
From: Nicolas Humblot <contact@nicolashumblot.fr>
Date: Tue, 27 Apr 2021 20:52:47 +0200
Subject: [PATCH 1/2] #99 Display a fixed footer inviting to respect
 eligibility criteria

---
 src/views/vmd-rdv.view.scss | 15 +++++++++++++++
 src/views/vmd-rdv.view.ts   |  3 +++
 2 files changed, 18 insertions(+)

diff --git a/src/views/vmd-rdv.view.scss b/src/views/vmd-rdv.view.scss
index 495e87ba3..eafef0183 100644
--- a/src/views/vmd-rdv.view.scss
+++ b/src/views/vmd-rdv.view.scss
@@ -76,6 +76,21 @@
 
 }
 
+.eligibility-criteria {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    color: $red;
+    width: 100%;
+    background-color: $pink-100;
+    text-align: center;
+    vertical-align: center;
+
+    p {
+        margin: .5em;
+    }
+}
+
 vmd-appointment-card {
     display: block;
     opacity: 1;
diff --git a/src/views/vmd-rdv.view.ts b/src/views/vmd-rdv.view.ts
index 6645c6950..a35d65ea9 100644
--- a/src/views/vmd-rdv.view.ts
+++ b/src/views/vmd-rdv.view.ts
@@ -244,6 +244,9 @@ export abstract class AbstractVmdRdvView extends LitElement {
                         />`;
                     })}
                 </div>
+                <div class="eligibility-criteria">
+                    <p>Les critères d'éligibilité sont vérifiés lors de la prise de rendez-vous</p>
+                </div>
             `}
         `;
     }

From fd16462c4b65dd7855da3f9f81eb17df02dea21d Mon Sep 17 00:00:00 2001
From: Nicolas Humblot <contact@nicolashumblot.fr>
Date: Thu, 29 Apr 2021 22:26:25 +0200
Subject: [PATCH 2/2] #99 Fade in then fade out with css

---
 src/views/vmd-rdv.view.scss | 11 +++++++++++
 src/views/vmd-rdv.view.ts   |  2 +-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/views/vmd-rdv.view.scss b/src/views/vmd-rdv.view.scss
index eafef0183..e6f85ba73 100644
--- a/src/views/vmd-rdv.view.scss
+++ b/src/views/vmd-rdv.view.scss
@@ -91,6 +91,17 @@
     }
 }
 
+.fade-in-then-fade-out {
+    animation-name: fade-in-then-fade-out;
+    animation-duration: 10s;
+    animation-fill-mode: forwards;
+}
+
+@keyframes fade-in-then-fade-out {
+    0%, 100% {opacity: 0}
+    10%, 90% {opacity: 1}
+}
+
 vmd-appointment-card {
     display: block;
     opacity: 1;
diff --git a/src/views/vmd-rdv.view.ts b/src/views/vmd-rdv.view.ts
index a35d65ea9..579284ae1 100644
--- a/src/views/vmd-rdv.view.ts
+++ b/src/views/vmd-rdv.view.ts
@@ -244,7 +244,7 @@ export abstract class AbstractVmdRdvView extends LitElement {
                         />`;
                     })}
                 </div>
-                <div class="eligibility-criteria">
+                <div class="eligibility-criteria fade-in-then-fade-out">
                     <p>Les critères d'éligibilité sont vérifiés lors de la prise de rendez-vous</p>
                 </div>
             `}