Skip to content

Commit

Permalink
fix(cxl-ui): fix dashboard layout issues
Browse files Browse the repository at this point in the history
  • Loading branch information
kertuilves committed Aug 17, 2023
1 parent 47c5739 commit 405e384
Show file tree
Hide file tree
Showing 8 changed files with 41 additions and 43 deletions.
4 changes: 1 addition & 3 deletions packages/cxl-lumo-styles/scss/themes/vaadin-overlay.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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'] {
Expand Down
13 changes: 11 additions & 2 deletions packages/cxl-ui/scss/cxl-app-layout/_layout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -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;
}
}
}
}
13 changes: 8 additions & 5 deletions packages/cxl-ui/scss/cxl-dashboard-header.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -29,7 +32,7 @@
.updates {
padding-bottom: var(--lumo-size-s);

@media #{mq.$large} {
@media #{mq.$medium} {
order: 2;
padding-bottom: 0;
}
Expand Down Expand Up @@ -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);
}
}

Expand Down
16 changes: 5 additions & 11 deletions packages/cxl-ui/scss/cxl-dashboard-notification.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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);
}
Expand Down Expand Up @@ -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);
Expand All @@ -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);
}
}
Expand Down
16 changes: 5 additions & 11 deletions packages/cxl-ui/scss/global/cxl-dashboard-header.scss
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
cxl-dashboard-header {
position: relative;
z-index: 1;
display: block;

&::before {
position: absolute;
top: 0;
right: 0;
right: -200%;
bottom: 0;
left: 0;
left: -200%;
z-index: -1;
width: 100%;
height: 100%;
content: '';
background-color: var(--lumo-shade);
}
Expand All @@ -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;
Expand All @@ -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;
}
}
}
14 changes: 8 additions & 6 deletions packages/cxl-ui/src/components/cxl-dashboard-header.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
4 changes: 1 addition & 3 deletions packages/storybook/cxl-ui/cxl-dashboard-layout.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -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()}
Expand Down

0 comments on commit 405e384

Please sign in to comment.