Merge branch 'dev' into main, symbolizing MEP 20210815_01

.github/workflows/deploy-branches-and-prs.yml

@@ -15,7 +15,7 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
           node-version: "14.12"
       - run: npm ci

.github/workflows/deploy.yml

@@ -11,7 +11,7 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
           node-version: "14.12"
       - run: npm ci

PULL_REQUEST_TEMPLATE.md

@@ -1,7 +1,7 @@
 Cette Pull Request est
 
-- [ ] Un correctif
-- [ ] Une nouvelle fonctionnalité
+- Un correctif
+- Une nouvelle fonctionnalité
 
 ### Checklist
 
@@ -11,5 +11,6 @@ Cette Pull Request est
 
 ### Description
 
-> <Ajouter une description de ce que fait cette PR>
+> Ajouter une description de ce que fait cette PR
+> 
 > Avec une capture d'écran si pertinent.

index.html

@@ -96,7 +96,7 @@ <h2 id="apropos" class="text-primary pt-5 mb-5">
                 <h2 class="h5">Quel est l’intérêt de Vite Ma Dose de Vaccin&nbsp;?</h2>
                 <p>
                     Vite Ma Dose est une plateforme qui permet de trouver un rendez-vous de vaccination rapidement dans son département. Sont actuellement recensés les créneaux de vaccination des plateformes de santé
-                    Doctolib, Keldoc, Maiia, Ordoclic, MaPharma, AvecMonDoc, Clikodoc et MeSoigner. La réservation d’un créneau d’injection de vaccin dans un centre de vaccination s’effectue via les pages de ces plateformes de santé.
+                    Doctolib, Keldoc, Maiia, Ordoclic, MaPharma, AvecMonDoc, Clikodoc, MeSoigner et Bimedoc. La réservation d’un créneau d’injection de vaccin dans un centre de vaccination s’effectue via les pages de ces plateformes de santé.
                 </p>
 
                 <hr />
@@ -140,7 +140,7 @@ <h2 class="h5">Où se faire vacciner&nbsp;?</h2>
                 <h2 class="h5">Comment réserver un rendez-vous de vaccination&nbsp;?</h2>
                 <p>
                     On peut se faire vacciner contre le coronavirus en réservant un rendez-vous grâce à Vite Ma Dose.
-                    On peut aussi prendre rendez-vous directement via les plateformes Doctolib, Keldoc, Maiia, Ordoclic, MaPharma, AvecMonDoc, Clikodoc ou MeSoigner, ainsi que chez son médecin généraliste ou en pharmacie.
+                    On peut aussi prendre rendez-vous directement via les plateformes Doctolib, Keldoc, Maiia, Ordoclic, MaPharma, AvecMonDoc, Clikodoc, MeSoigner ou Bimedoc, ainsi que chez son médecin généraliste ou en pharmacie.
                 </p>
 
                 <hr />

public/autocomplete-cache/vmd_75.json

@@ -1 +1 @@
-{"query":"75","communes":[{"c":"75056","z":"75001","n":"Paris","d":"75","g":"2.3752,48.845"},{"c":"75056","z":"75002","n":"Paris","d":"75","g":"2.3752,48.845"},{"c":"75056","z":"75003","n":"Paris","d":"75","g":"2.3752,48.845"},{"c":"75056","z":"75004","n":"Paris","d":"75","g":"2.3752,48.845"},{"c":"75056","z":"75005","n":"Paris","d":"75","g":"2.3752,48.845"},{"c":"75056","z":"75006","n":"Paris","d":"75","g":"2.3752,48.845"},{"c":"75056","z":"75007","n":"Paris","d":"75","g":"2.3752,48.845"},{"c":"75056","z":"75008","n":"Paris","d":"75","g":"2.3752,48.845"},{"c":"75056","z":"75009","n":"Paris","d":"75","g":"2.3752,48.845"},{"c":"75056","z":"75010","n":"Paris","d":"75","g":"2.3752,48.845"},{"c":"75056","z":"75011","n":"Paris","d":"75","g":"2.3752,48.845"},{"c":"75056","z":"75012","n":"Paris","d":"75","g":"2.3752,48.845"},{"c":"75056","z":"75013","n":"Paris","d":"75","g":"2.3752,48.845"},{"c":"75056","z":"75014","n":"Paris","d":"75","g":"2.3752,48.845"},{"c":"75056","z":"75015","n":"Paris","d":"75","g":"2.3752,48.845"},{"c":"75056","z":"75016","n":"Paris","d":"75","g":"2.3752,48.845"},{"c":"75056","z":"75017","n":"Paris","d":"75","g":"2.3752,48.845"},{"c":"75056","z":"75018","n":"Paris","d":"75","g":"2.3752,48.845"},{"c":"75056","z":"75019","n":"Paris","d":"75","g":"2.3752,48.845"},{"c":"75056","z":"75020","n":"Paris","d":"75","g":"2.3752,48.845"},{"c":"92012","z":"75016","n":"Boulogne-Billancourt","d":"92","g":"2.2371,48.8346"},{"c":"92040","z":"75015","n":"Issy-les-Moulineaux","d":"92","g":"2.261,48.8224"}]}
+{"query":"75","communes":[{"c":"75056","z":"75001","n":"Paris","d":"75","g":"2.336157203926649,48.86283948229915"},{"c":"75056","z":"75002","n":"Paris","d":"75","g":"2.3432755443949866,48.86889037261654"},{"c":"75056","z":"75003","n":"Paris","d":"75","g":"2.3607568335500297,48.86286492639361"},{"c":"75056","z":"75004","n":"Paris","d":"75","g":"2.357594022703559,48.85439581632856"},{"c":"75056","z":"75005","n":"Paris","d":"75","g":"2.351415238575416,48.84355063561869"},{"c":"75056","z":"75006","n":"Paris","d":"75","g":"2.334203785384528,48.84898025632432"},{"c":"75056","z":"75007","n":"Paris","d":"75","g":"2.31272844148442,48.85710142473717"},{"c":"75056","z":"75008","n":"Paris","d":"75","g":"2.3133060597411697,48.87297052862936"},{"c":"75056","z":"75009","n":"Paris","d":"75","g":"2.33864166874507,48.87729243796416"},{"c":"75056","z":"75010","n":"Paris","d":"75","g":"2.360651913467299,48.87654029132932"},{"c":"75056","z":"75011","n":"Paris","d":"75","g":"2.378928291242735,48.86001335053879"},{"c":"75056","z":"75012","n":"Paris","d":"75","g":"2.395032220296042,48.84042230655008"},{"c":"75056","z":"75013","n":"Paris","d":"75","g":"2.3620907702278324,48.82904787007054"},{"c":"75056","z":"75014","n":"Paris","d":"75","g":"2.327993119650175,48.83025514870483"},{"c":"75056","z":"75015","n":"Paris","d":"75","g":"2.29297365224418,48.84058573684937"},{"c":"75056","z":"75016","n":"Paris","d":"75","g":"2.266717150629358,48.85367625689213"},{"c":"75056","z":"75017","n":"Paris","d":"75","g":"2.3071264684475423,48.88793519362565"},{"c":"75056","z":"75018","n":"Paris","d":"75","g":"2.349642564782915,48.89232572560189"},{"c":"75056","z":"75019","n":"Paris","d":"75","g":"2.3868229216398484,48.887176262044115"},{"c":"75056","z":"75020","n":"Paris","d":"75","g":"2.4032033913955675,48.862725685060646"},{"c":"92012","z":"75016","n":"Boulogne-Billancourt","d":"92","g":"2.2371,48.8346"},{"c":"92040","z":"75015","n":"Issy-les-Moulineaux","d":"92","g":"2.261,48.8224"}]}

src/components/vmd-appointment-card.component.ts

@@ -110,7 +110,7 @@ export class VmdAppointmentCardComponent extends LitElement {
                         |
                         <div class="col-auto">
                             ${plateforme?html`
-                            <img class="rdvPlatformLogo ${plateforme.styleCode}" src="${Router.basePath}assets/images/png/${plateforme.logo}" alt="Créneau de vaccination ${plateforme.nom}">
+                            <img class="rdvPlatformLogo ${plateforme.styleCode}" src="${Router.basePath}assets/images/logo/${plateforme.logo}" alt="Créneau de vaccination ${plateforme.nom}">
                             `:html`
                             ${this.lieu.plateforme}
                             `}

src/components/vmd-upcoming-days-selector.component.scss

@@ -3,6 +3,35 @@
 @import "../styles/bootstrap-variables";
 @import "../styles/global-variables";
 
+:host {
+  --day-gutter: 1.6rem;
+}
+
+.scroll-hint {
+  position: relative;
+
+  &::before, &::after {
+    z-index: 10;
+    content: '';
+    position: absolute;
+    display: block;
+    top: 0;
+    height: 100%;
+    width: calc(var(--day-gutter) * 2);
+    height: calc(100% - var(--day-gutter));
+    background: $light;
+    background: linear-gradient(90deg, rgba($light, 255) 20%, rgba(255,255,255, 0) 100%);
+  }
+
+  &::before {
+    left: 0;
+  }
+  &::after {
+    right: 0%;
+    transform: rotate(180deg);
+  }
+}
+
 ul.days {
   width: 100%;
   overflow-x: scroll;
@@ -18,7 +47,13 @@ ul.days {
   color: $primary;
   border: 0px;
   border-radius: 1rem;
-  padding: 1.6rem;
+  padding: var(--day-gutter) calc(var(--day-gutter) / 2);
+  &:first-child {
+    padding-left: var(--day-gutter);
+  }
+  &:last-child {
+    padding-right: var(--day-gutter);
+  }
 
   display: flex;
   flex-direction: column;
@@ -36,6 +71,9 @@ ul.days {
   &.selected .date-card {
     background-color: tint-color($primary, 35%);
     color: white;
+    &::before {
+      transform: translateY(-0.2em);
+    }
   }
   &.empty {
     .date-card {
@@ -56,6 +94,21 @@ ul.days {
     border-radius: 1rem;
     width: 10rem;
     padding: 1rem;
+
+    position: relative;
+    &::before {
+      content: '﹀';
+      position: absolute;
+      display: block;
+      width: 100%;
+      height: var(--day-gutter);
+      text-align: center;
+      bottom: 100%;
+      left: 0;
+      color: $gray-600;
+      transform: translateY(-1em);
+      transition: transform 200ms ease-in-out;
+    }
   }
 
   .weekday {

src/components/vmd-upcoming-days-selector.component.ts

@@ -95,33 +95,35 @@ export class VmdUpcomingDaysSelectorComponent extends LitElement {
 
     render() {
         return html`
-          <ul class="days list-group list-group-horizontal">
-            ${repeat(this._upcomingDays, ud => ud.date, ud => {
-                return html`
-              ${(ud.hidden && ud.firstHiddenFromGroup)?html`
-              <li class="list-group-item empty selectable">
-                <div class="date-card" @click="${() => this.showHiddenGroup(ud.hiddenGroup!)}">
-                  Jours sans créneaux
-                </div>
-              </li>
-              `:html``}
-              <li class="list-group-item ${classMap({
-                selected: this.dateSelectionnee === ud.date, 
-                selectable: this.isSelectable(ud),
-                empty: this.dateSelectionnee !== ud.date && ud.total === 0
-              })}" style="${styleMap({ display: ud.hidden?'none':'block' })}" @click="${() => this.jourSelectionne(ud)}">
-                <div class="date-card ${classMap({
-                  'shadow-lg': this.dateSelectionnee === ud.date,
-                  'shadow-sm': this.dateSelectionnee !== ud.date && ud.total>0,
-                })}">
-                  <div class="weekday">${Strings.upperFirst(format(parse(ud.date, 'yyyy-MM-dd', new Date("1970-01-01T00:00:00Z")), 'EEEE', {locale: fr})).replace(".","")}</div>
-                  <div class="day">${Strings.upperFirst(format(parse(ud.date, 'yyyy-MM-dd', new Date("1970-01-01T00:00:00Z")), 'dd/MM', {locale: fr}))}</div>
-                </div>
-                <div class="cpt-rdv">${ud.total>0?html`${ud.total} créneau${Strings.plural(ud.total, "x")}`:html`0 créneaux`}</div>
-              </li>
-                `;
-            })}
-          </ul>
+          <div class="scroll-hint">
+            <ul class="days list-group list-group-horizontal">
+              ${repeat(this._upcomingDays, ud => ud.date, ud => {
+                  return html`
+                ${(ud.hidden && ud.firstHiddenFromGroup)?html`
+                <li class="list-group-item empty selectable">
+                  <div class="date-card" @click="${() => this.showHiddenGroup(ud.hiddenGroup!)}">
+                    Jours sans créneaux
+                  </div>
+                </li>
+                `:html``}
+                <li class="list-group-item ${classMap({
+                  selected: this.dateSelectionnee === ud.date,
+                  selectable: this.isSelectable(ud),
+                  empty: this.dateSelectionnee !== ud.date && ud.total === 0
+                })}" style="${styleMap({ display: ud.hidden?'none':'block' })}" @click="${() => this.jourSelectionne(ud)}">
+                  <div class="date-card ${classMap({
+                    'shadow-lg': this.dateSelectionnee === ud.date,
+                    'shadow-sm': this.dateSelectionnee !== ud.date && ud.total>0,
+                  })}">
+                    <div class="weekday">${Strings.upperFirst(format(parse(ud.date, 'yyyy-MM-dd', new Date("1970-01-01T00:00:00Z")), 'EEEE', {locale: fr})).replace(".","")}</div>
+                    <div class="day">${Strings.upperFirst(format(parse(ud.date, 'yyyy-MM-dd', new Date("1970-01-01T00:00:00Z")), 'dd/MM', {locale: fr}))}</div>
+                  </div>
+                  <div class="cpt-rdv">${ud.total>0?html`${ud.total} créneau${Strings.plural(ud.total, "x")}`:html`0 créneaux`}</div>
+                </li>
+                  `;
+              })}
+            </ul>
+          </div>
         `;
     }