fix(cxl-ui): fix dashboard layout issues

conversionxl · Aug 17, 2023 · 3e83479 · 3e83479
1 parent 47c5739
commit 3e83479
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 43 deletions.
diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-overlay.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-overlay.scss
@@ -22,10 +22,8 @@
   }
 
   [part='overlay'] {
-    --cxl-app-layout-drawer-width: calc(22 * var(--lumo-space-m));
-
     width: 100%;
-    max-width: calc(var(--cxl-wrap-width) - var(--cxl-app-layout-drawer-width));
+    max-width: var(--cxl-content-max-width);
   }
 
   [part='content'] {

diff --git a/packages/cxl-ui/scss/cxl-app-layout/_layout.scss b/packages/cxl-ui/scss/cxl-app-layout/_layout.scss
@@ -2,6 +2,7 @@
  * Layout commons.
  */
 @use "~@conversionxl/cxl-lumo-styles/scss/mixins";
+@use "~@conversionxl/cxl-lumo-styles/scss/mq";
 
 $toggle-icon: "lumo:angle-right";
 
@@ -90,10 +91,18 @@ slot[name="action-bar"]::slotted(div) {
 /**
  * Dashboard layout
  */
-:host([layout^="1c"]:not([layout="1c"][theme~="cxl-dashboard"])){
+:host([layout^="1c"][theme~="cxl-dashboard"]:not([layout="1c"])) {
   main {
+    overflow: hidden;
+
     > slot {
-      padding: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+      margin: 0 calc(-1 * var(--lumo-space-m));
+
+      @media #{mq.$medium} {
+        margin: 0 auto;
+      }
     }
   }
 }
diff --git a/packages/cxl-ui/scss/cxl-dashboard-header.scss b/packages/cxl-ui/scss/cxl-dashboard-header.scss
@@ -3,16 +3,19 @@
 
 :host {
   .container {
-    @include mixins.wrap();
-    z-index: 2;
+    padding: 0 var(--lumo-space-m);
     color: var(--lumo-primary-contrast-color);
     background-color: var(--lumo-shade);
+
+    @media #{mq.$medium} {
+      padding: 0;
+    }
   }
 
   header {
     margin-bottom: var(--lumo-space-l);
 
-    @media #{mq.$large} {
+    @media #{mq.$medium} {
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -29,7 +32,7 @@
     .updates {
       padding-bottom: var(--lumo-size-s);
 
-      @media #{mq.$large} {
+      @media #{mq.$medium} {
         order: 2;
         padding-bottom: 0;
       }
@@ -69,7 +72,7 @@
     padding-bottom: var(--lumo-space-l);
 
     @media #{mq.$large} {
-          padding-bottom: var(--lumo-space-xl);
+      padding-bottom: var(--lumo-space-xl);
     }
   }
 

diff --git a/packages/cxl-ui/scss/cxl-dashboard-notification.scss b/packages/cxl-ui/scss/cxl-dashboard-notification.scss
@@ -7,7 +7,7 @@
     justify-content: center;
     height: var(--lumo-space-xl);
     padding: var(--lumo-space-s);
-    margin: 0 calc(-1 * var(--lumo-space-m));
+    margin: 0 calc(-1 * var(--lumo-space-xl));
     color: var(--lumo-primary-contrast-color);
     background-color: var(--cxl-color-dark-gray);
     border-radius: 0;
@@ -17,11 +17,7 @@
       align-items: center;
     }
 
-    @media #{mq.$small} {
-      margin: 0 calc(-1 * var(--lumo-space-l));
-    }
-
-    @media #{mq.$large} {
+    @media #{mq.$medium} {
       margin: 0;
       border-radius: var(--lumo-border-radius-s);
     }
@@ -73,7 +69,7 @@
     right: 0;
     left: 0;
     z-index: 1;
-    padding: var(--lumo-space-s);
+    padding: var(--lumo-space-m);
     overflow: auto;
     color: var(--lumo-body-text-color);
     background-color: var(--lumo-primary-contrast-color);
@@ -82,13 +78,11 @@
     border-top-right-radius: 0;
     box-shadow: var(--lumo-box-shadow-m);
 
-    @media #{mq.$small} {
+    @media #{mq.$medium} {
       padding: var(--lumo-space-l);
     }
 
-    @media #{mq.$large} {
-      right: var(--lumo-space-l);
-      left: var(--lumo-space-l);
+    @media #{mq.$medium} {
       border-top-left-radius: var(--lumo-border-radius-s);
     }
   }

diff --git a/packages/cxl-ui/scss/global/cxl-dashboard-header.scss b/packages/cxl-ui/scss/global/cxl-dashboard-header.scss
@@ -1,16 +1,15 @@
 cxl-dashboard-header {
   position: relative;
+  z-index: 1;
   display: block;
 
   &::before {
     position: absolute;
     top: 0;
-    right: 0;
+    right: -200%; //Full width background-color with layout 1c-w constrained max-width
     bottom: 0;
-    left: 0;
+    left: -200%; //Full width background-color with layout 1c-w constrained max-width
     z-index: -1;
-    width: 100%;
-    height: 100%;
     content: '';
     background-color: var(--lumo-shade);
   }
@@ -19,7 +18,7 @@ cxl-dashboard-header {
     display: flex;
     align-items: center;
     align-self: end;
-    width: fit-content;
+    max-width: fit-content;
     height: fit-content;
     padding: 0 var(--lumo-space-s);
     margin: 0;
@@ -29,12 +28,7 @@ cxl-dashboard-header {
     border-radius: var(--lumo-border-radius-s);
 
     &::part(label) {
-      padding: calc(var(--lumo-button-size) / 6) 0;
-    }
-
-    vaadin-icon {
-      flex-shrink: 0;
-      margin-right: var(--lumo-space-s);
+      line-height: 1.5;
     }
   }
 }
diff --git a/packages/cxl-ui/src/components/cxl-dashboard-header.js b/packages/cxl-ui/src/components/cxl-dashboard-header.js
@@ -89,12 +89,14 @@ export class CXLDashboardHeaderElement extends LitElement {
     return html`
       <div class="container">
         <header>
-          <div class="updates">
-            ${CXLDashboardNotification(CXLDashboardNotification.args = {
-              count: this.notificationCount,
-              tabs: this.notificationData || notificationData
-            })}
-          </div>
+          ${this.notificationCount > 0
+            ? html`<div class="updates">
+                ${CXLDashboardNotification(CXLDashboardNotification.args = {
+                  count: this.notificationCount,
+                  tabs: this.notificationData || notificationData
+                })}
+              </div>`
+            : ''}
           <div>
             <span class="subtitle">${this.subtitle}</span>
             <h1 class="title">${this.title} ${this.name}!</h1>

diff --git a/packages/storybook/cxl-ui/cxl-dashboard-header/template.stories.js b/packages/storybook/cxl-ui/cxl-dashboard-header/template.stories.js
@@ -42,7 +42,7 @@ const Template = (header) => html`
             `
           )}
           <vaadin-button class="edit-roadmap" onclick="window.location.href='https://cxl.com'">
-            <vaadin-icon icon="lumo:edit"></vaadin-icon>
+            <vaadin-icon slot="prefix" icon="lumo:edit"></vaadin-icon>
             Edit roadmap
           </vaadin-button>
         </cxl-stats>
@@ -61,7 +61,7 @@ const Template = (header) => html`
           `
         )}
         <vaadin-button class="edit-roadmap" onclick="window.location.href='https://cxl.com'">
-          <vaadin-icon icon="lumo:edit"></vaadin-icon>
+          <vaadin-icon slot="prefix" icon="lumo:edit"></vaadin-icon>
           Edit roadmap
         </vaadin-button>
       </cxl-stats>

diff --git a/packages/storybook/cxl-ui/cxl-dashboard-layout.stories.js b/packages/storybook/cxl-ui/cxl-dashboard-layout.stories.js
@@ -55,10 +55,8 @@ export const CXLDashboard = () => {
     theme="cxl-dashboard"
   >
     ${CXLMarketingNav()}
-    <div slot="header">
-    ${CXLDashboardHeader(CXLDashboardHeader.args)}
-    </div>
     <div style="${boxShadow ? `box-shadow: ${boxShadow}` : ''}">
+      ${CXLDashboardHeader(CXLDashboardHeader.args)}
       ${CXLFeatureadCourseCard(CXLFeatureadCourseCard.args)}
       ${CXLStats(statsCount)}
       ${CXLVaadinAccordionThemeCategory()}