Skip to content

Commit

Permalink
feat(cxl-ui): implement featured-course-card redesign
Browse files Browse the repository at this point in the history
  • Loading branch information
@freudFlintstone
freudFlintstone committed Sep 25, 2023
1 parent 456b3e3 commit 23f5157
Show file tree
Hide file tree
Showing 7 changed files with 171 additions and 174 deletions.
7 changes: 6 additions & 1 deletion 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,9 +68,14 @@
}

// Featured course slider
:host([theme~="cxl-featured-course-slider"][orientation="horizontal"]) {
:host([theme~="cxl-featured-course-slider"]) {
display: none;
background-color: var(--cxl-color-light-gray);

@media (min-width: 568px) and (min-height: 568px) {
display: flex;
}

[part="back-button"],
[part="forward-button"] {
top: calc(50% - 2 * var(--lumo-space-xl));
Expand Down
17 changes: 8 additions & 9 deletions packages/cxl-ui/scss/cxl-base-card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
height: max-content;
padding: var(--lumo-space-m) var(--lumo-space-l);
font-size: var(--lumo-font-size-s);
background: var(--lumo-tint);
border: 1px solid var(--lumo-contrast-10pct);
border-radius: var(--lumo-border-radius-l);
box-shadow: var(--lumo-box-shadow-xs);
Expand Down Expand Up @@ -54,20 +53,20 @@
margin-bottom: unset;
}

:host([theme~="video"]) {
:host([theme="video"]) {
background-color: var(--video-background);
}

:host([theme~="training"]) {
:host([theme="training"]) {
background-color: var(--training-background);
}

:host([theme~="playbook"]) {
:host([theme="playbook"]) {
background-color: var(--playbook-background);
}

:host([theme~="minidegree"]),
:host([theme~="category"]) {
:host([theme="minidegree"]),
:host([theme="category"]) {
color: var(--lumo-tint);
background-color: var(--lumo-contrast);

Expand All @@ -76,12 +75,12 @@
}
}

:host([theme~="lesson"]),
:host([theme~="course"]) {
:host([theme="lesson"]),
:host([theme="course"]) {
background-color: var(--lumo-tint);
}

:host([theme~="exam"]) {
:host([theme="exam"]) {
background-color: var(--lumo-primary-color-10pct);
border-color: var(--lumo-primary-color);
}
Expand Down
10 changes: 4 additions & 6 deletions packages/cxl-ui/scss/cxl-course-card.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix -- some of these are necessary for line-clamp implementation */
@use "~@conversionxl/cxl-ui/scss/mixins";
@use "~@conversionxl/cxl-lumo-styles/scss/mq";

:host {
height: 345px;
Expand All @@ -9,19 +10,16 @@
box-shadow: var(--lumo-box-shadow-s);
}

header .name {
@include mixins.ellipsis-for-lines(3);
}

.content-wrapper {
height: 100%;
min-height: calc(var(--lumo-line-height-s) * 6); // Six standard line-heights
line-height: var(--lumo-line-height-s);
height: 100%;

.content {
@include mixins.ellipsis-for-lines(5);

::slotted(p) {
/* stylelint-disable declaration-no-important */
margin-top: 0 !important;
margin-bottom: 0 !important;
}
Expand All @@ -40,8 +38,8 @@ header .name {
}

footer {
display: flex;
position: relative;
display: flex;
justify-content: end;

vaadin-details[theme="reverse"] {
Expand Down
191 changes: 75 additions & 116 deletions packages/cxl-ui/scss/cxl-featured-course-card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,153 +2,112 @@
@use "~@conversionxl/cxl-ui/scss/mixins";

:host {
position: relative;
display: none;
max-width: unset;
height: auto;
padding: 0;
border: 0;
box-shadow: none;

.container {
position: relative;
display: block;
height: 100%;
padding: 0 var(--lumo-space-m);
background-color: var(--cxl-color-light-gray);

@media #{mq.$medium} {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: min-content auto;
gap: 0;
padding: var(--lumo-space-l) 0 0 var(--lumo-space-l);
}

> .attributes {
display: none;
padding: 0;
}

.name strong {
color: var(--lumo-primary-color);
}
height: unset;
max-height: 100vh;
overflow: hidden;
background-color: var(--cxl-color-light-gray);
border: none;
border-radius: 0;
/* stylelint-disable declaration-no-important */
box-shadow: none !important;

@media #{mq.$small} {
display: flex;
height: 400px;
}

.info {
max-width: unset;
gap: var(--lumo-space-s);
@media #{mq.$large} {
padding-inline: 124px;
}

.tags {
flex-wrap: wrap;
column-gap: var(--lumo-space-s);
row-gap: 0;
}
.container {
justify-content: center;

.tag {
white-space: nowrap;
}
.content-wrapper {
min-width: 250px;
max-width: 600px;
height: auto;

.attributes {
display: flex;
flex-wrap: wrap;
align-items: center;
grid-row-gap: var(--lumo-space-xs);
padding: 0;
@media #{mq.$small} {
width: 50%;
}
}
}

.content-before {
position: relative;
z-index: 0;

.instructor-image {
max-height: calc(var(--lumo-space-xl) * 6);
object-fit: contain;
header {
flex-direction: column-reverse;

@media #{mq.$medium} {
display: none;
}
@media #{mq.$small} {
flex-direction: row;
}

.swoosh {
position: absolute;
top: 100%;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
max-height: 100%;
margin-top: calc(var(--lumo-space-m) * -2);
}
.info {
max-width: unset;

@media #{mq.$medium} {
display: none;
@media #{mq.$small} {
max-width: calc(100% - var(--lumo-space-m) - 80px);
}
}
}

header {
position: relative;
z-index: 0;
display: block;

@media #{mq.$medium} {
position: initial;
grid-column: span 7 / span 7;
.name {
@include mixins.ellipsis-for-lines(3);
}

.instructor-image {
display: none;
position: relative;
width: auto;
height: auto;
border-radius: 0;

img {
height: 100%;
border-radius: 0;
width: 100%;
height: auto;
max-height: 100%;
}

@media #{mq.$medium} {
@media #{mq.$small} {
position: absolute;
top: 0;
right: var(--lumo-space-l);
display: flex;
justify-content: flex-end;
top: calc(-1 * var(--lumo-space-m));
right: 0;
width: auto;
max-width: 100%;
height: 100%;
max-height: none;
max-width: 45%;
height: calc(100% + var(--lumo-space-m));
overflow: visible;
border-radius: unset;
}
}
}

.content-after {
position: relative;
z-index: 0;
padding-top: var(--lumo-space-s);
padding-bottom: var(--lumo-space-m);

.content {
@include mixins.ellipsis-for-lines(5);
margin-bottom: var(--lumo-space-s);
}

.cta {
font-weight: 600;
@media #{mq.$medium} {
right: var(--lumo-space-m);
}

vaadin-icon {
width: var(--lumo-icon-size-s);
height: var(--lumo-icon-size-s);
padding: calc(var(--lumo-space-xs) / 2);
margin-left: var(--lumo-space-xs);
background: var(--lumo-primary-color-10pct);
border-radius: 100%;
@media #{mq.$large} {
right: 124px;
}

&:hover {
text-decoration: underline;
.swoosh {
position: absolute;
top: 100%;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
max-height: 100%;
margin-top: calc(var(--lumo-space-m) * -2);

@media #{mq.$small} {
top: 80%;
}

@media #{mq.$medium} {
display: none;
}
}
}
}

@media #{mq.$medium} {
grid-column: span 7 / span 7;
padding-top: var(--lumo-space-s);
}
footer {
justify-content: start;
}
}
23 changes: 12 additions & 11 deletions packages/cxl-ui/src/components/cxl-course-card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,17 @@ export class CXLCourseCardElement extends CXLBaseCardElement {
this[`_${name}HasChildren`] = !!children.length;
}

_renderCta() {
return html`
<a href=${this.ctaUrl}>
<vaadin-button class="cta" theme="tertiary">
${this.ctaLabel} ${this.theme}
<vaadin-icon icon="lumo:angle-right"></vaadin-icon>
</vaadin-button>
</a>
`;
}

render() {
return html`
<div class="container">
Expand All @@ -39,17 +50,7 @@ export class CXLCourseCardElement extends CXLBaseCardElement {
<div slot="summary">Read more</div>
<slot name="more" @slotchange=${this._slotHasChildren}></slot>
</vaadin-details>
<vaadin-button
class="cta"
theme="tertiary"
@click=${(e) => {
e.stopImmediatePropagation();
this._goToLink(this.ctaUrl);
}}
>
${this.ctaLabel} ${this.theme}
<vaadin-icon icon="lumo:angle-right"></vaadin-icon>
</vaadin-button>
${this._renderCta()}
</footer>
<vaadin-icon class="badge-new" icon="cxl:new"></vaadin-icon>
</div>
Expand Down
Loading

0 comments on commit 23f5157

Please sign in to comment.