feat(cxl-ui): cxl-featured-course-card v2 #340

HenerHoop · 2023-09-28T15:25:52Z

https://app.clickup.com/t/86aya2ta8

github-actions · 2023-09-28T15:27:47Z

size-limit report 📦

Path	Size
packages/cxl-ui/pkg/dist-web/cxl-ui.js	63.46 KB (+0.29% 🔺)
packages/cxl-ui/pkg/dist-web/cxl-ui-jwplayer.js	11.87 KB (0%)
packages/cxl-ui/pkg/dist-web/cxl-ui-playbooks.js	27.65 KB (+0.37% 🔺)
packages/cxl-ui/pkg/dist-web/vendor.js	135.58 KB (0%)
packages/cxl-ui/pkg/dist-web/cxl-ui-jwplayer.js, packages/cxl-ui/pkg/dist-web/cxl-ui-playbooks.js, packages/cxl-ui/pkg/dist-web/cxl-ui.js, packages/cxl-ui/pkg/dist-web/manifest.js, packages/cxl-ui/pkg/dist-web/unresolved.js, packages/cxl-ui/pkg/dist-web/vendor.js	239.71 KB (+0.12% 🔺)

pawelkmpt

Different line heights on single vs slider.

Remove border radius from header .instructor-image. It inherits style from base card

Commit message - please use component name as we used in the past.

- feat(cxl-ui): Featured card v2
+ feat(cxl-ui): cxl-featured-course-card v2

packages/cxl-lumo-styles/scss/global.scss

packages/cxl-ui/scss/cxl-featured-course-card.scss

packages/cxl-lumo-styles/scss/color.scss

pawelkmpt

I tested it on WPS on https://github.com/conversionxl/cxl-wpstarter/pull/229 branch and found few glitches.

1. Short vs long content on slide

2. Long content looks bad on certain screen size

3. Header section without dark background looks bad

HenerHoop · 2023-10-04T09:11:48Z

I tested it on WPS on conversionxl/cxl-wpstarter#229 branch and found few glitches.

1. Short vs long content on slide

2. Long content looks bad on certain screen size
**3. Header section without dark background looks bad**

@pawelkmpt

What can we do here? With this task, the categories area should become smaller.
I see a slightly different view with the same dimensions. The mobile layout is kept until the large breakpoint.
"Make the header grey - ignore the changes inside the header for now (these are still being iterated on)". It seems like it's not working at the moment, or should I make more changes within the header as well?

pawelkmpt · 2023-10-04T13:26:16Z

"Make the header grey - ignore the changes inside the header for now (these are still being iterated on)". It seems like it's not working at the moment, or should I make more changes within the header as well?

I think @heshfekry wanted to share that we're still iterating on the new look of this section (bigger cards) and didn't expect that gray background would make header section look bad.

Please just make it look decent with minimal effort. Get inspired by the screenshot in the card, e.g. "Continue" part could be simply tweaked.

pawelkmpt · 2023-10-04T13:35:21Z

Adjust tag card:

- Featured-Course
+ Featured Course

pawelkmpt · 2023-10-04T13:38:19Z

I see a slightly different view with the same dimensions. The mobile layout is kept until the large breakpoint.

It looks better now. Maybe missed something in setup before.

pawelkmpt · 2023-10-04T13:41:37Z

What can we do here? With this task, the categories area should become smaller.

It more about the course title. I think we should think about how to handle such differences.

pawelkmpt · 2023-10-04T13:46:37Z

Black button on the black background causes weird padding on the left. Please remove it.

pawelkmpt · 2023-10-05T04:12:54Z

@HenerHoop @heshfekry I know why it looks so ugly on mobile:

:host .container .name -> font-size should be 22px according to the design (var(--lumo-font-size-xl))
make :host .content-before .instructor-image max-height: calc(var(--lumo-space-xl)*4); on mobile

It will result in:

HenerHoop · 2023-10-05T05:16:10Z

Adjust tag card:

- Featured-Course
+ Featured Course

@pawelkmpt @freudFlintstone
Do you know why we use the theme value as the first tag in the _renderHeaderTags method? Using 'Featured courses' with a space means that styles are targeted in CSS based on 'courses'.

HenerHoop · 2023-10-05T10:17:34Z

@pawelkmpt Regarding the theme, one question to which you or Raphael might be able to answer. I also made some improvements to the header styles.

pawelkmpt · 2023-10-05T11:20:50Z

@pawelkmpt @freudFlintstone Do you know why we use the theme value as the first tag in the _renderHeaderTags method? Using 'Featured courses' with a space means that styles are targeted in CSS based on 'courses'.

It corresponded with initial design.

pawelkmpt

Looks good overall. Small tweaks needed.

Single course is broken in Storybook:

pawelkmpt · 2023-10-05T11:29:18Z

packages/cxl-ui/scss/cxl-featured-course-card.scss

      }

-      @media #{mq.$medium} {
+      @media #{mq.$large} {
        position: absolute;
        top: 0;
        right: var(--lumo-space-l);


Suggested change

right: var(--lumo-space-l);

right: var(--lumo-space-xl);

@pawelkmpt Should look better now. But there's still an issue with that first tag. It currently works when I use 'Featured courses' with a hyphen or something that doesn't include the word 'courses' separately.

I fixed it by changing the 'Featured-course' tag to 'Featured'.

Check base card code (and maybe changes history). I think it's handled there.

pawelkmpt

Storybook - misaligned arrows

WPS - roadmap button almost invisible

pawelkmpt · 2023-10-06T08:07:57Z

@heshfekry do you have any suggestions to colors of header section?

heshfekry · 2023-10-06T08:13:40Z

@heshfekry do you have any suggestions to colors of header section?

Ye drop the borders (including the red, as that is hover state) and introduce shadows like here.

Add white box around roadmap component.

Make 2 CTAs white. with black text.

Basically match this design, without the red border.

https://app.clickup.com/t/86aya2ta8

pawelkmpt

Single slide

https://app.clickup.com/t/86aya2ta8

HenerHoop force-pushed the hener/feat/featured-card-v2 branch from 99c325e to 579afce Compare October 2, 2023 09:28

HenerHoop requested review from freudFlintstone and pawelkmpt October 3, 2023 07:44

pawelkmpt requested a review from anoblet October 3, 2023 13:05

pawelkmpt requested changes Oct 3, 2023

View reviewed changes

pawelkmpt added the CXL 2.0 label Oct 4, 2023

pawelkmpt requested changes Oct 4, 2023

View reviewed changes

HenerHoop force-pushed the hener/feat/featured-card-v2 branch from 579afce to c7bcb88 Compare October 4, 2023 04:27

HenerHoop changed the title ~~feat(cxl-ui): Featured card v2~~ feat(cxl-ui): cxl-featured-course-card v2 Oct 4, 2023

HenerHoop force-pushed the hener/feat/featured-card-v2 branch 2 times, most recently from 5055a21 to 8eba16e Compare October 4, 2023 07:18

HenerHoop force-pushed the hener/feat/featured-card-v2 branch from 8eba16e to 9ac2814 Compare October 4, 2023 09:14

HenerHoop force-pushed the hener/feat/featured-card-v2 branch from 9ac2814 to 8f75aac Compare October 5, 2023 08:13

HenerHoop requested a review from pawelkmpt October 5, 2023 10:17

pawelkmpt requested changes Oct 5, 2023

View reviewed changes

HenerHoop force-pushed the hener/feat/featured-card-v2 branch 2 times, most recently from c2df872 to c254689 Compare October 6, 2023 07:54

pawelkmpt requested changes Oct 6, 2023

View reviewed changes

HenerHoop force-pushed the hener/feat/featured-card-v2 branch from c254689 to 6845a62 Compare October 6, 2023 13:50

feat(cxl-ui): cxl-featured-course-card v2

639ab2d

https://app.clickup.com/t/86aya2ta8

HenerHoop force-pushed the hener/feat/featured-card-v2 branch from 6845a62 to 639ab2d Compare October 6, 2023 13:54

HenerHoop requested a review from pawelkmpt October 6, 2023 13:59

pawelkmpt reviewed Oct 6, 2023

View reviewed changes

feat(cxl-ui): cxl-dashboard-header changes for a light background

d7365b6

https://app.clickup.com/t/86aya2ta8

HenerHoop force-pushed the hener/feat/featured-card-v2 branch from 952b8d6 to d7365b6 Compare October 9, 2023 08:05

HenerHoop requested a review from pawelkmpt October 9, 2023 08:06

pawelkmpt approved these changes Oct 9, 2023

View reviewed changes

pawelkmpt merged commit 935d8ec into master Oct 9, 2023
4 checks passed

pawelkmpt deleted the hener/feat/featured-card-v2 branch October 9, 2023 09:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(cxl-ui): cxl-featured-course-card v2 #340

feat(cxl-ui): cxl-featured-course-card v2 #340

HenerHoop commented Sep 28, 2023

github-actions bot commented Sep 28, 2023 •

edited

Loading

pawelkmpt left a comment

pawelkmpt left a comment

HenerHoop commented Oct 4, 2023

pawelkmpt commented Oct 4, 2023

pawelkmpt commented Oct 4, 2023

pawelkmpt commented Oct 4, 2023

pawelkmpt commented Oct 4, 2023

pawelkmpt commented Oct 4, 2023

pawelkmpt commented Oct 5, 2023

HenerHoop commented Oct 5, 2023 •

edited

Loading

HenerHoop commented Oct 5, 2023

pawelkmpt commented Oct 5, 2023

pawelkmpt left a comment

pawelkmpt Oct 5, 2023

HenerHoop Oct 5, 2023

HenerHoop Oct 6, 2023

pawelkmpt Oct 6, 2023

pawelkmpt left a comment

pawelkmpt commented Oct 6, 2023

heshfekry commented Oct 6, 2023 •

edited

Loading

pawelkmpt left a comment

feat(cxl-ui): cxl-featured-course-card v2 #340

feat(cxl-ui): cxl-featured-course-card v2 #340

Conversation

HenerHoop commented Sep 28, 2023

github-actions bot commented Sep 28, 2023 • edited Loading

size-limit report 📦

pawelkmpt left a comment

Choose a reason for hiding this comment

pawelkmpt left a comment

Choose a reason for hiding this comment

HenerHoop commented Oct 4, 2023

pawelkmpt commented Oct 4, 2023

pawelkmpt commented Oct 4, 2023

pawelkmpt commented Oct 4, 2023

pawelkmpt commented Oct 4, 2023

pawelkmpt commented Oct 4, 2023

pawelkmpt commented Oct 5, 2023

HenerHoop commented Oct 5, 2023 • edited Loading

HenerHoop commented Oct 5, 2023

pawelkmpt commented Oct 5, 2023

pawelkmpt left a comment

Choose a reason for hiding this comment

pawelkmpt Oct 5, 2023

Choose a reason for hiding this comment

HenerHoop Oct 5, 2023

Choose a reason for hiding this comment

HenerHoop Oct 6, 2023

Choose a reason for hiding this comment

pawelkmpt Oct 6, 2023

Choose a reason for hiding this comment

pawelkmpt left a comment

Choose a reason for hiding this comment

pawelkmpt commented Oct 6, 2023

heshfekry commented Oct 6, 2023 • edited Loading

pawelkmpt left a comment

Choose a reason for hiding this comment

github-actions bot commented Sep 28, 2023 •

edited

Loading

HenerHoop commented Oct 5, 2023 •

edited

Loading

heshfekry commented Oct 6, 2023 •

edited

Loading