Skip to content

Commit

Permalink
Merge pull request #354 from conversionxl/hener/feat/dashboard-roadma…
Browse files Browse the repository at this point in the history 
…p-block
  • Loading branch information
@pawelkmpt
pawelkmpt authored Nov 6, 2023
2 parents 82b720e + ec11a44 commit 8fd41e1
Show file tree
Hide file tree
Showing 27 changed files with 395 additions and 543 deletions.
1 change: 1 addition & 0 deletions packages/cxl-lumo-styles/scss/color.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ html,
--lumo-primary-color: hsl(355.8, 74.7%, 48%);
--lumo-primary-color-2pct: hsla(355.8, 74.7%, 48%, 0.02);
--lumo-primary-color-10pct: hsla(355.8, 74.7%, 48%, 0.1);
--lumo-primary-color-20pct: hsla(355.8, 74.7%, 48%, 0.2);
--lumo-primary-color-50pct: hsla(355.8, 74.7%, 48%, 0.5);

/**
Expand Down
1 change: 1 addition & 0 deletions packages/cxl-lumo-styles/scss/global.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ html {
--cxl-wrap-padding: var(--lumo-space-m);
--cxl-space-sm: 12px;
--cxl-color-light-gray: hsla(0, 0%, 96%, 1);
--cxl-color-medium-gray: hsla(210, 20%, 96%, 1);
--cxl-color-dark-gray: hsla(240, 1%, 24%, 1);
--cxl-color-black: hsl(0, 0%, 0%);
--cxl-color-black-50pct: hsla(0, 0%, 0%, 0.5);
Expand Down
35 changes: 29 additions & 6 deletions packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,8 @@
}

/**
* Theme "featured-course-slider"
*/
* Theme "featured-course-slider"
*/

:host([theme~="cxl-featured-course-slider"][orientation="horizontal"]) {
position: relative;
Expand Down Expand Up @@ -139,8 +139,8 @@
}

/**
* Theme "cxl-course-slider"
*/
* Theme "cxl-course-slider"
*/

:host([theme~="cxl-course-slider"][theme~="minimal"]) {
margin-top: calc(var(--lumo-space-s) * -1);
Expand Down Expand Up @@ -217,8 +217,8 @@
}

/**
* Theme "cxl-course-slider" and "cxl-category-accordion"
*/
* Theme "cxl-course-slider" and "cxl-category-accordion"
*/

:host([theme~="cxl-course-slider"][theme~="cxl-category-accordion"][theme~="minimal"]) {
margin-left: calc(-1 * var(--lumo-space-m));
Expand All @@ -227,3 +227,26 @@
margin-left: calc(-1 * var(--lumo-space-l));
}
}

/**
* Theme "cxl-course-slider" and "cxl-slider-dashboard-header"
*/

:host([theme~="cxl-course-slider"][theme~="cxl-slider-dashboard-header"][theme~="minimal"]) {
margin-left: calc(-1 * var(--lumo-space-m));

@media #{mq.$small} {
margin-left: calc(-1 * var(--lumo-space-l));
}

&::before,
&::after {
background: linear-gradient(270deg, var(--cxl-color-medium-gray) 0%, rgba(255, 255, 255, 0) 100%);
}
}

:host([theme~="cxl-course-slider"][theme~="cxl-slider-dashboard-header"][theme~="portrait"]) {
::slotted(vaadin-tab) {
width: auto;
}
}
1 change: 0 additions & 1 deletion packages/cxl-ui/scss/cxl-base-card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,6 @@
display: flex;
gap: var(--lumo-space-s);
max-width: 100%;
min-height: 1.6em;
}

.attributes {
Expand Down
245 changes: 89 additions & 156 deletions packages/cxl-ui/scss/cxl-dashboard-header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,52 @@
@use "~@conversionxl/cxl-lumo-styles/scss/mixins";

:host {
position: relative;
background-color: var(--cxl-color-medium-gray);

&:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
z-index: 0;
width: 100vw;
background-color: var(--cxl-color-medium-gray);
transform: translateX(-50%);
}

.container {
padding: 0 var(--lumo-space-m);
background-color: var(--cxl-color-light-gray);
position: relative;
padding: 0 var(--lumo-space-m) var(--lumo-space-l);
z-index: 1;

@media #{mq.$medium} {
padding: calc(var(--lumo-space-m) * 2) var(--lumo-space-l);
}
}

.updates {
position: relative;

@media #{mq.$medium} {
padding: 0 var(--lumo-space-l);
position: absolute;
right: var(--lumo-space-l);
bottom: calc(100% + var(--lumo-space-m));
}
}

header {
margin-bottom: var(--lumo-space-l);
margin-bottom: var(--lumo-space-s);

@media #{mq.$medium} {
display: flex;
align-items: center;
align-items: flex-start;
justify-content: space-between;
padding-top: var(--lumo-size-s);
}

.titles {
flex-shrink: 0;
padding-top: var(--lumo-size-s);

@media #{mq.$medium} {
Expand All @@ -33,191 +59,98 @@
font-size: var(--lumo-font-size-xs);
line-height: 1;
text-transform: uppercase;
color: var(--cxl-color-black-50pct);
}

.updates {
@media #{mq.$medium} {
order: 2;
padding-bottom: 0;
}
.title {
margin: 0;
}
}

.icon-bell {
position: relative;
margin-right: 14px;

&::after {
position: absolute;
top: 4px;
right: -7px;
display: flex;
align-items: center;
justify-content: center;
width: 12px;
height: 12px;
font-size: 8px;
font-weight: 700;
color: var(--lumo-tint);
content: attr(count);
background-color: var(--lumo-primary-color);
border: 2px solid var(--cxl-color-dark-gray);
border-radius: 100%;
h1.title {
padding-right: var(--lumo-space-m);
font-size: var(--lumo-font-size-xxxl);
font-weight: 900;
line-height: 1.4;
}
}

.title {
margin: 0;
font-size: var(--lumo-font-size-xxxl);
line-height: 1.4;
}

.content {
padding-bottom: var(--lumo-space-l);
.header-flex {
display: flex;
justify-content: space-between;

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

.last-course {
margin-bottom: var(--lumo-space-l);

@media #{mq.$large} {
display: flex;
}

a {
display: flex;
flex: 1;
align-items: center;
justify-content: space-between;
padding: var(--lumo-space-m);
color: var(--lumo-body-text-color);
text-decoration: none;
background-color: var(--lumo-primary-contrast-color);

> div {
display: flex;
flex-direction: column;
}

.subtitle {
font-size: var(--lumo-font-size-xs);
line-height: 1;
color: var(--cxl-color-black-50pct);
text-transform: uppercase;
}

.title {
margin-top: calc(var(--lumo-space-s) / 2);
font-size: var(--lumo-font-size-xl);
font-weight: 700;
line-height: 1.2;
}

vaadin-icon {
flex-shrink: 0;
margin-left: var(--lumo-space-s);
color: var(--lumo-primary-color);
background: var(--lumo-shade-10pct);
border-radius: 100%;
}
flex-direction: row;
}
}

.progress {
.edit-roadmap {
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--lumo-space-m);
color: var(--lumo-body-text-color);
background-color: var(--cxl-color-light-gray);
}
align-items: center;
max-width: fit-content;
height: fit-content;
padding: 0 var(--lumo-space-s);
margin-left: var(--lumo-space-s);
color: var(--lumo-primary-color);
cursor: pointer;
background-color: var(--lumo-primary-contrast-color);
border-radius: var(--lumo-border-radius-s);

.courses {
display: flex;
flex-direction: column;
gap: var(--lumo-space-s);
@media #{mq.$medium} {
margin-left: 0;
}

@media #{mq.$large} {
flex-direction: row;
gap: var(--lumo-space-m);
margin-left: var(--lumo-space-m);
}

vaadin-button {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--lumo-size-xl);
padding: var(--lumo-space-m);
line-height: 1.3;
cursor: pointer;
border-radius: var(--lumo-border-radius-s);
background-color: var(--lumo-primary-contrast-color);

&::part(label) {
width: 100%;
padding-right: var(--lumo-space-l);
text-align: left;
}

@media #{mq.$large} {
width: 100%;
}
.edit-roadmap-text-affix {
display: none;

vaadin-icon {
position: absolute;
right: var(--lumo-space-m);
color: var(--lumo-primary-color);
background-color: var(--lumo-tint-5pct);
border-radius: 100%;
@media #{mq.$medium} {
display: inline;
}
}

.roadmap {
color: var(--lumo-primary-contrast-color);
background-color: var(--lumo-primary-color);

@media #{mq.$large} {
color: var(--lumo-primary-contrast-color);
}

vaadin-icon {
color: var(--lumo-primary-contrast-color);
}
&::part(label) {
line-height: 1.5;
}
}
}

:host([hasroadmap]) {
.content {
@media #{mq.$large} {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: var(--lumo-space-l);
.roadmap {
color: var(--lumo-primary-contrast-color);
background-color: var(--lumo-primary-color);

> div {
grid-column: 1 / 3;
}
@media #{mq.$large} {
color: var(--lumo-primary-contrast-color);
}

.stats {
grid-column: 3 / 4;
}
vaadin-icon {
color: var(--lumo-primary-contrast-color);
}
}
}

::slotted(.stats-desktop) {
display: none;
.slider {
margin-top: var(--lumo-space-l);
}

@media #{mq.$large} {
.slider-title {
display: block;
margin-bottom: var(--lumo-space-s);
font-size: var(--lumo-font-size-xs);
line-height: 1;
text-transform: uppercase;
color: var(--cxl-color-black-50pct);
}
}

::slotted(.stats-mobile) {
@media #{mq.$large} {
display: none;
.content {
& + .content {
margin-top: var(--lumo-space-l);
padding-top: var(--lumo-space-l);
border-top: 1px solid var(--lumo-shade-20pct);
}
}
}
Loading

0 comments on commit 8fd41e1

Please sign in to comment.