Merge pull request #319 from conversionxl/raphael/fix/dashboard/featu…

…re-card
conversionxl · Sep 11, 2023 · 102de7d · 102de7d
2 parents cfbe20b + ee10c48
commit 102de7d
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 21 deletions.
diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-tabs.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-tabs.scss
@@ -79,6 +79,15 @@ $vaadin-tab-horizontal-padding: 0.75rem;
     scrollbar-width: none;
     -ms-overflow-style: none;
 
+    scroll-snap-type: x mandatory;
+    -webkit-overflow-scrolling: touch;
+    scroll-behavior: smooth;
+
+    ::slotted(*) {
+      scroll-snap-align: start;
+      scroll-snap-stop: always;
+    }
+
     &::-webkit-scrollbar {
       display: none;
     }

diff --git a/packages/cxl-ui/src/components/cxl-tabs-slider.js b/packages/cxl-ui/src/components/cxl-tabs-slider.js
@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import '@conversionxl/cxl-lumo-styles';
 import { Tabs } from '@vaadin/tabs';
 import { customElement } from 'lit/decorators.js';
@@ -9,6 +10,17 @@ export class CXLTabsSliderElement extends Tabs {
     super._updateOverflow();
   }
 
+  _onResize() {
+    super._onResize();
+    // Only for `featured-course-slider`: induce scrolling to snap to next
+    // one in case resizing lands between two cards
+    if (this.getAttribute('theme').split(' ').includes('cxl-featured-course-slider')) {
+      requestAnimationFrame(() => {
+        this._scroll(1);
+      });
+    }
+  }
+
   /**
    * We want [theme~="centered"] so element would does not hug viewport edge, and gap the other edge.
    *

diff --git a/packages/storybook/cxl-ui/cxl-dashboard-layout.stories.js b/packages/storybook/cxl-ui/cxl-dashboard-layout.stories.js
@@ -5,6 +5,7 @@ import '@conversionxl/cxl-ui/src/components/cxl-marketing-nav.js';
 import { CXLMarketingNav } from './cxl-marketing-nav.stories';
 import { CXLDashboardHeader } from './cxl-dashboard-header/template.stories';
 import { CXLFeatureadCourseCard } from './cxl-featured-course-card/default.stories';
+import { DashboardSlider } from './cxl-featured-course-card/dashboard-slider.stories';
 import { CXLStats } from './cxl-stats/default.stories';
 import { CXLVaadinAccordionThemeCategory } from './cxl-vaadin-accordion.stories';
 import { CXLFooterNav } from './footer-nav.stories';
@@ -49,20 +50,15 @@ export const CXLDashboard = () => {
   };
 
   return html`
-  <cxl-app-layout
-    id="container"
-    layout="1c-w"
-    theme="cxl-dashboard"
-  >
-    ${CXLMarketingNav()}
-    <div style="${boxShadow ? `box-shadow: ${boxShadow}` : ''}">
-      ${CXLDashboardHeader(CXLDashboardHeader.args)}
-      ${CXLFeatureadCourseCard(CXLFeatureadCourseCard.args)}
-      ${CXLStats(statsCount)}
-      ${CXLVaadinAccordionThemeCategory()}
-    </div>
-    ${CXLFooterNav()}
-  </cxl-app-layout>
-`};
+    <cxl-app-layout id="container" layout="1c-w" theme="cxl-dashboard">
+      ${CXLMarketingNav()}
+      <div style="${boxShadow ? `box-shadow: ${boxShadow}` : ''}">
+        ${CXLDashboardHeader(CXLDashboardHeader.args)} ${DashboardSlider()} ${CXLStats(statsCount)}
+        ${CXLVaadinAccordionThemeCategory()}
+      </div>
+      ${CXLFooterNav()}
+    </cxl-app-layout>
+  `;
+};
 
 CXLDashboard.storyName = 'cxl-dashboard';
diff --git a/packages/storybook/cxl-ui/cxl-featured-course-card/dashboard-slider.stories.js b/packages/storybook/cxl-ui/cxl-featured-course-card/dashboard-slider.stories.js
@@ -8,17 +8,32 @@ export default {
   title: 'CXL UI/cxl-featured-course-card',
 };
 
+const args2 = {
+  ...CXLFeatureadCourseCard.args,
+  id: 'cxl-featured-course-2',
+  name: 'Advanced Facebook Ads',
+  time: '2h 04min',
+  instructor: 'Curt Maly',
+  avatar:
+    'https://cxl.com/institute/wp-content/uploads/2020/01/curt-maly-bw-transparent-bg-v2-min.png',
+};
+
+const args3 = {
+  ...CXLFeatureadCourseCard.args,
+  id: 'cxl-featured-course-3',
+  name: 'Google Ads Experiments',
+  time: '1h 30min',
+  instructor: 'Susan Wenograd',
+  avatar: 'https://cxl.com/institute/wp-content/uploads/2022/05/susan-wenograd-headshot-bw-bg.png',
+};
+
 const Template = () => html`
   <cxl-tabs-slider theme="minimal cxl-featured-course-slider">
     <vaadin-tab theme="cxl-featured-course-slider"
       >${CXLFeatureadCourseCard(CXLFeatureadCourseCard.args)}</vaadin-tab
     >
-    <vaadin-tab theme="cxl-featured-course-slider"
-      >${CXLFeatureadCourseCard(CXLFeatureadCourseCard.args)}</vaadin-tab
-    >
-    <vaadin-tab theme="cxl-featured-course-slider"
-      >${CXLFeatureadCourseCard(CXLFeatureadCourseCard.args)}</vaadin-tab
-    >
+    <vaadin-tab theme="cxl-featured-course-slider">${CXLFeatureadCourseCard(args2)}</vaadin-tab>
+    <vaadin-tab theme="cxl-featured-course-slider">${CXLFeatureadCourseCard(args3)}</vaadin-tab>
   </cxl-tabs-slider>
 `;