Skip to content

Commit

Permalink
Merge pull request #303 from conversionxl/kertu/feat/dashboard-layout
Browse files Browse the repository at this point in the history
  • Loading branch information
pawelkmpt authored Aug 16, 2023
2 parents 7602937 + f031520 commit 4ebb721
Show file tree
Hide file tree
Showing 11 changed files with 166 additions and 32 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions packages/cxl-lumo-styles/scss/themes/vaadin-details.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
11 changes: 11 additions & 0 deletions packages/cxl-ui/scss/cxl-app-layout/_layout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -86,3 +86,14 @@ slot[name="action-bar"]::slotted(div) {
justify-content: flex-end;
box-shadow: var(--lumo-box-shadow-m);
}

/**
* Dashboard layout
*/
:host([layout^="1c"]:not([layout="1c"][theme~="cxl-dashboard"])){
main {
> slot {
padding: 0;
}
}
}
30 changes: 18 additions & 12 deletions packages/cxl-ui/scss/cxl-dashboard-header.scss
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -18,6 +16,7 @@
display: flex;
align-items: center;
justify-content: space-between;
padding-top: var(--lumo-size-s);
}

.subtitle {
Expand All @@ -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;
}
}
}
Expand Down Expand Up @@ -73,6 +67,10 @@

.content {
padding-bottom: var(--lumo-space-l);

@media #{mq.$large} {
padding-bottom: var(--lumo-space-xl);
}
}

.last-course {
Expand Down Expand Up @@ -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%;
}
Expand Down
31 changes: 28 additions & 3 deletions packages/cxl-ui/scss/cxl-dashboard-notification.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down
3 changes: 2 additions & 1 deletion packages/cxl-ui/scss/cxl-featured-course-card.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down
1 change: 0 additions & 1 deletion packages/cxl-ui/scss/cxl-stats.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
22 changes: 21 additions & 1 deletion packages/cxl-ui/scss/global/cxl-dashboard-header.scss
Original file line number Diff line number Diff line change
@@ -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);
Expand Down
2 changes: 2 additions & 0 deletions packages/cxl-ui/scss/global/cxl-vaadin-accordion.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
21 changes: 10 additions & 11 deletions packages/cxl-ui/src/components/cxl-dashboard-header.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 = '';
Expand Down Expand Up @@ -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>
Expand Down
70 changes: 70 additions & 0 deletions packages/storybook/cxl-ui/cxl-dashboard-layout.stories.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import { html } from 'lit';
import { text } from '@storybook/addon-knobs';
import '@conversionxl/cxl-ui/src/components/cxl-app-layout.js';
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 { CXLStats } from './cxl-stats/default.stories';
import { CXLVaadinAccordionThemeCategory } from './cxl-vaadin-accordion.stories';
import { CXLFooterNav } from './footer-nav.stories';

export default {
title: 'CXL UI/cxl-dashboard',
};

export const CXLDashboard = () => {
const boxShadow = text('Box-shadow', 'var(--lumo-box-shadow-l)');
const statsCount = 4;

CXLDashboardHeader.args = {
name: 'Mathias Z',
lastCourseTitle: 'Advanced experimentation analysis',
lastCourseLink: 'https://cxl.com',
hasRoadmap: true,
notificationCount: '6',
progress: '0.34',
lessonsCompleted: '2',
lessonsTotal: '6',
cta1: 'Browse all courses',
cta2: 'Browse fast skills',
cta3: 'Create your personal learning roadmap',
cta1Link: 'https://cxl.com',
cta2Link: 'https://cxl.com',
cta3Link: 'https://cxl.com',
};

CXLFeatureadCourseCard.args = {
id: 'cxl-featured-course-1',
theme: 'Featured course',
name: 'Get ahead with <strong>Google Analytics 4</strong>',
time: '5h 04min',
instructor: 'Fred Pike',
description:
"<p>GA4 is packed with new capabilities that help you improve acquisition, engagement, revenue, and retention for your website.</p><p>In five hours, we'll have you confident, capable, and armed with new insights into your business and your website. <strong>This course pays back for you real quick.</strong></p>",
tags: ['Marketing', 'Analytics'],
ctaUrl: 'https://cxl.com',
avatar:
'https://cxl.com/institute/wp-content/uploads/2020/04/fred-pike-instructor-headshot-1x1-color-bw-min-1024x1024.png',
};

return html`
<cxl-app-layout
id="container"
layout="1c-w"
theme="cxl-dashboard"
>
${CXLMarketingNav()}
<div slot="header">
${CXLDashboardHeader(CXLDashboardHeader.args)}
</div>
<div style="${boxShadow ? `box-shadow: ${boxShadow}` : ''}">
${CXLFeatureadCourseCard(CXLFeatureadCourseCard.args)}
${CXLStats(statsCount)}
${CXLVaadinAccordionThemeCategory()}
</div>
${CXLFooterNav()}
</cxl-app-layout>
`};

CXLDashboard.storyName = 'cxl-dashboard';

0 comments on commit 4ebb721

Please sign in to comment.