Merge pull request #258 from CovidTrackerFr/scroll-hint

Ajustement de goutière pour le calendrier
CovidTrackerFr · Jul 29, 2021 · 66d1d25 · 66d1d25
2 parents cbc1c39 + d22bc7b
commit 66d1d25
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 28 deletions.
diff --git a/src/components/vmd-upcoming-days-selector.component.scss b/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%, transparent 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 {

diff --git a/src/components/vmd-upcoming-days-selector.component.ts b/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>
         `;
     }