Merge pull request #374 from conversionxl/raphael/fix/dashboard/layout

conversionxl · Dec 19, 2023 · 4d828c9 · 4d828c9
2 parents adc9597 + 27c87da
commit 4d828c9
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 18 deletions.
diff --git a/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss b/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss
@@ -89,7 +89,7 @@
     width: var(--lumo-size-s);
     height: var(--lumo-size-s);
     color: var(--cxl-brand-color-blue);
-    background-color: #1F7A9933;
+    background-color: #1f7a9933;
     border: 1px solid transparent;
     border-radius: 100%;
     box-shadow: unset;
@@ -121,7 +121,6 @@
   [part="forward-button"] {
     margin-right: var(--lumo-space-l);
   }
-
 }
 
 /**
@@ -185,20 +184,20 @@
   }
 
   [part="back-button"] {
-    left: calc(-1 * var(--lumo-space-l));
+    left: calc(-1 * var(--lumo-space-m));
     margin-left: var(--lumo-space-s);
 
     @media #{mq.$small} {
-      left: calc(-1 * var(--lumo-space-xl));
+      left: calc(-1 * var(--lumo-space-l));
     }
   }
 
   [part="forward-button"] {
-    right: calc(-1 * var(--lumo-space-l));
+    right: calc(-1 * var(--lumo-space-m));
     margin-right: var(--lumo-space-s);
 
     @media #{mq.$small} {
-      right: calc(-1 * var(--lumo-space-xl));
+      right: calc(-1 * var(--lumo-space-l));
     }
   }
 }
@@ -235,7 +234,8 @@
  * Theme "cxl-course-slider" and "cxl-slider-dashboard-header"
  */
 
-:host([theme~="cxl-course-slider"][theme~="cxl-slider-dashboard-header"]) {
+:host([theme~="cxl-course-slider"][theme~="cxl-slider-dashboard-header"]),
+:host([theme~="cxl-course-slider"][theme~="minimal"][theme~="cxl-category-accordion"]) {
   margin-inline: 0;
 
   @media #{mq.$small} {
@@ -265,6 +265,10 @@
 :host([theme~="cxl-course-slider"][theme~="cxl-category-slider"][theme~="unfinished"]) {
   &::before,
   &::after {
-    background: linear-gradient(270deg, var(--cxl-color-medium-gray) 0%, rgba(255, 255, 255, 0) 100%);
+    background: linear-gradient(
+      270deg,
+      var(--cxl-color-medium-gray) 0%,
+      rgba(255, 255, 255, 0) 100%
+    );
   }
 }
diff --git a/packages/cxl-ui/scss/cxl-dashboard-header.scss b/packages/cxl-ui/scss/cxl-dashboard-header.scss
@@ -9,10 +9,9 @@
   .container {
     position: relative;
     z-index: 1;
-    padding: 0 var(--lumo-space-m) var(--lumo-space-xl);
 
     @media #{mq.$medium} {
-      padding: calc(var(--lumo-space-m) * 2) var(--lumo-space-l);
+      padding-block: calc(var(--lumo-space-m) * 2);
     }
   }
 
@@ -59,7 +58,6 @@
     .title {
       margin: 0;
     }
-
   }
 
   .header-flex {
@@ -122,7 +120,7 @@
   }
 
   .slider {
-    margin-top: calc(var(--lumo-space-l) + var(--lumo-space-s)); ;
+    margin-top: calc(var(--lumo-space-l) + var(--lumo-space-s));
   }
 
   .slider-title {

diff --git a/packages/storybook/cxl-ui/cxl-dashboard/cxl-dashboard-layout.stories.js b/packages/storybook/cxl-ui/cxl-dashboard/cxl-dashboard-layout.stories.js
@@ -29,11 +29,8 @@ export const CXLDashboard = () => {
       ${CXLMarketingNav()}
       <div>
         ${CXLDashboardHeader(CXLDashboardHeader.args)}
-        <div style="padding: 0 var(--lumo-space-m)">
-          <h1 class="cxl-separator">Explore all courses</h1>
-        </div>
-        ${DashboardSlider()}
-        ${CXLDashboardSections()}
+        <h1 class="cxl-separator">Explore all courses</h1>
+        ${DashboardSlider()} ${CXLDashboardSections()}
       </div>
       ${CXLFooterNav()}
     </cxl-app-layout>

diff --git a/packages/storybook/cxl-ui/cxl-dashboard/cxl-dashboard-sections.stories.js b/packages/storybook/cxl-ui/cxl-dashboard/cxl-dashboard-sections.stories.js
@@ -11,7 +11,7 @@ export default {
 };
 
 export const CXLDashboardSections = () => html`
-  <div style="margin-top: var(--lumo-space-xl); padding: 0 var(--lumo-space-m)">
+  <div style="margin-top: var(--lumo-space-xl)">
     ${categoryData.map(
       (cat) => html`
         <cxl-dashboard-section image=${cat.image}>