feat(cxl-ui): fix dashboard components layout issues

https://app.clickup.com/t/861n0qhnn
conversionxl · Aug 16, 2023 · 282c6ce · 282c6ce
1 parent 5bb2a8a
commit 282c6ce
Show file tree

Hide file tree

Showing 9 changed files with 85 additions and 32 deletions.
diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-accordion-panel.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-accordion-panel.scss
@@ -154,7 +154,8 @@
  * Theme "cxl-dashboard-category".
  */
 :host([theme~="cxl-dashboard-category"]) {
-  border-bottom: solid 1px var(--cxl-color-light-gray);
+  border-top: solid 1px var(--cxl-color-light-gray);
+  border-bottom: none;
 
   [part="summary"] {
     padding: var(--lumo-space-l) 0;

diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-details.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-details.scss
@@ -50,16 +50,16 @@
   }
 
   [part="summary"] {
-    justify-content: flex-end;
+    display: block;
     padding: 0;
-
   }
 }
 
 // Dashboard header
 :host([theme~="cxl-dashboard-header"]) {
   margin: var(--lumo-space-s) 0 0;
   border: 1px solid var(--cxl-color-dark-gray);
+  border-radius: var(--lumo-border-radius-s);
 
   [part="summary"] {
     display: flex;

diff --git a/packages/cxl-ui/scss/cxl-dashboard-header.scss b/packages/cxl-ui/scss/cxl-dashboard-header.scss
@@ -1,14 +1,12 @@
 @use "~@conversionxl/cxl-lumo-styles/scss/mq";
+@use "~@conversionxl/cxl-lumo-styles/scss/mixins";
 
 :host {
   .container {
-    padding: 0 var(--lumo-space-m);
+    @include mixins.wrap();
+    z-index: 2;
     color: var(--lumo-primary-contrast-color);
     background-color: var(--lumo-shade);
-
-    @media #{mq.$large} {
-      padding: var(--lumo-space-xl) 0 0;
-    }
   }
 
   header {
@@ -18,6 +16,7 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
+      padding-top: var(--lumo-size-s);
     }
 
     .subtitle {
@@ -28,16 +27,11 @@
     }
 
     .updates {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: var(--lumo-space-s);
-      margin: 0 calc(var(--lumo-space-m) * -1) var(--lumo-space-xl) calc(var(--lumo-space-m) * -1);
-      background-color: var(--cxl-color-dark-gray);
+      padding-bottom: var(--lumo-size-s);
 
       @media #{mq.$large} {
         order: 2;
-        margin: 0;
+        padding-bottom: 0;
       }
     }
   }
@@ -73,6 +67,10 @@
 
   .content {
     padding-bottom: var(--lumo-space-l);
+
+    @media #{mq.$large} {
+          padding-bottom: var(--lumo-space-xl);
+    }
   }
 
   .last-course {
@@ -145,13 +143,21 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
+      height: var(--lumo-size-xl);
       padding: var(--lumo-space-m);
       line-height: 1.3;
       color: var(--lumo-primary-contrast-color);
       cursor: pointer;
       border: 1px solid var(--cxl-color-dark-gray);
       border-radius: var(--lumo-border-radius-s);
 
+      &::part(label) {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+      }
+
       @media #{mq.$large} {
         width: 100%;
       }

diff --git a/packages/cxl-ui/scss/cxl-dashboard-notification.scss b/packages/cxl-ui/scss/cxl-dashboard-notification.scss
@@ -5,10 +5,26 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    height: var(--lumo-space-xl);
     padding: var(--lumo-space-s);
-    margin: 0;
+    margin: 0 calc(-1 * var(--lumo-space-m));
     color: var(--lumo-primary-contrast-color);
     background-color: var(--cxl-color-dark-gray);
+    border-radius: 0;
+
+    &::part(label) {
+      display: flex;
+      align-items: center;
+    }
+
+    @media #{mq.$small} {
+      margin: 0 calc(-1 * var(--lumo-space-l));
+    }
+
+    @media #{mq.$large} {
+      margin: 0;
+      border-radius: var(--lumo-border-radius-s);
+    }
   }
 
   .icon-bell {
@@ -56,16 +72,25 @@
     position: absolute;
     right: 0;
     left: 0;
+    z-index: 1;
     padding: var(--lumo-space-s);
     overflow: auto;
+    color: var(--lumo-body-text-color);
     background-color: var(--lumo-primary-contrast-color);
-    border-bottom-right-radius: var(--lumo-border-radius-s);
-    border-bottom-left-radius: var(--lumo-border-radius-s);
+    border-radius: var(--lumo-border-radius-s);
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
     box-shadow: var(--lumo-box-shadow-m);
 
     @media #{mq.$small} {
       padding: var(--lumo-space-l);
     }
+
+    @media #{mq.$large} {
+      right: var(--lumo-space-l);
+      left: var(--lumo-space-l);
+      border-top-left-radius: var(--lumo-border-radius-s);
+    }
   }
 
   .tab-title {

diff --git a/packages/cxl-ui/scss/cxl-featured-course-card.scss b/packages/cxl-ui/scss/cxl-featured-course-card.scss
@@ -102,7 +102,8 @@
         position: absolute;
         top: 0;
         right: 0;
-        display: block;
+        display: flex;
+        justify-content: flex-end;
         width: auto;
         max-width: 100%;
         height: 100%;

diff --git a/packages/cxl-ui/scss/cxl-stats.scss b/packages/cxl-ui/scss/cxl-stats.scss
@@ -5,7 +5,6 @@
   grid-template-columns: repeat(2, 1fr);
   gap: var(--lumo-space-m);
   padding: var(--lumo-space-xl) var(--lumo-space-m) var(--lumo-space-m);
-  border-bottom: 1px solid var(--cxl-color-light-gray);
 
   @media #{mq.$small} {
     padding: var(--lumo-space-xl) var(--lumo-space-l) var(--lumo-space-l);

diff --git a/packages/cxl-ui/scss/global/cxl-dashboard-header.scss b/packages/cxl-ui/scss/global/cxl-dashboard-header.scss
@@ -1,17 +1,37 @@
 cxl-dashboard-header {
+  position: relative;
+  display: block;
+
+  &::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    content: '';
+    background-color: var(--lumo-shade);
+  }
+
   .edit-roadmap {
     display: flex;
     align-items: center;
     align-self: end;
     width: fit-content;
     height: fit-content;
-    margin: 0;
     padding: 0 var(--lumo-space-s);
+    margin: 0;
     color: var(--lumo-primary-color);
     cursor: pointer;
     background-color: var(--lumo-primary-contrast-color);
     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);

diff --git a/packages/cxl-ui/scss/global/cxl-vaadin-accordion.scss b/packages/cxl-ui/scss/global/cxl-vaadin-accordion.scss
@@ -270,6 +270,8 @@ cxl-vaadin-accordion {
    * Theme "cxl-dashboard-category"
    */
   &[theme~="cxl-dashboard-category"] {
+    padding-bottom: var(--lumo-space-xl);
+
     .header {
       display: flex;
       align-items: baseline;

diff --git a/packages/cxl-ui/src/components/cxl-dashboard-header.js b/packages/cxl-ui/src/components/cxl-dashboard-header.js
@@ -6,6 +6,8 @@ import '@vaadin/progress-bar';
 import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils';
 import cxlDashboardHeaderGlobalStyles from '../styles/global/cxl-dashboard-header-css.js';
 import cxlDashboardHeaderStyles from '../styles/cxl-dashboard-header-css.js';
+import { CXLDashboardNotification } from '../../../storybook/cxl-ui/cxl-dashboard-notification/default.stories.js';
+import notificationData from '../../../storybook/cxl-ui/cxl-dashboard-notification/cxl-dashboard-notification.data.json';
 
 @customElement('cxl-dashboard-header')
 export class CXLDashboardHeaderElement extends LitElement {
@@ -23,6 +25,8 @@ export class CXLDashboardHeaderElement extends LitElement {
 
   @property({ type: String }) notificationTitle = "What's new in CXL";
 
+  @property({ type: Object }) notificationData = null;
+
   @property({ type: String, attribute: 'last-course-title' }) lastCourseTitle = '';
 
   @property({ type: String, attribute: 'last-course-link' }) lastCourseLink = '';
@@ -85,17 +89,12 @@ export class CXLDashboardHeaderElement extends LitElement {
     return html`
       <div class="container">
         <header>
-          <vaadin-button class="updates">
-            ${this.notificationCount > 0
-              ? html` <vaadin-icon
-                  class="icon-bell"
-                  count="${this.notificationCount}"
-                  icon="lumo:bell"
-                ></vaadin-icon>`
-              : nothing}
-            ${this.notificationTitle}
-            <vaadin-icon icon="lumo:angle-right"></vaadin-icon>
-          </vaadin-button>
+          <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>