forked from web-padawan/aybolit
-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(cxl-ui): remove accordion and improve dashboard visual architecture
- Loading branch information
1 parent
7c3802e
commit d777083
Showing
6 changed files
with
264 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| :host { | ||
| position: relative; | ||
| display: block; | ||
| width: 100%; | ||
|
|
||
| .image { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 60%; | ||
| width: calc( | ||
| (0.4 * var(--cxl-content-max-width)) + calc(50vw - (var(--cxl-content-max-width) / 2)) | ||
| ); | ||
| height: 240px; | ||
| overflow: hidden; | ||
|
|
||
| &::after { | ||
| position: absolute; | ||
| top: 0; | ||
| bottom: 0; | ||
| left: 0; | ||
| width: 25%; | ||
| content: ""; | ||
| background-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); | ||
| } | ||
|
|
||
| img { | ||
| position: relative; | ||
| width: 100%; | ||
| filter: grayscale(100%); | ||
| transform: translateY(-33%); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,123 @@ | ||
| @use "~@conversionxl/cxl-lumo-styles/scss/mq"; | ||
|
|
||
| /** | ||
| * Theme "cxl-dashboard-category" | ||
| */ | ||
| cxl-dashboard-section { | ||
| padding-bottom: var(--lumo-space-xl); | ||
|
|
||
| .header { | ||
| --lumo-header-text-color: var(--lumo-tint); | ||
|
|
||
| position: relative; | ||
| box-sizing: border-box; | ||
| height: 240px; | ||
| margin-bottom: var(--lumo-space-l); | ||
| background-color: var(--cxl-color-black); | ||
|
|
||
| &::before { | ||
| position: absolute; | ||
| top: 0; | ||
| bottom: 0; | ||
| left: 50%; | ||
| z-index: -1; | ||
| width: 100vw; | ||
| content: ""; | ||
| background-color: var(--cxl-color-black); | ||
| transform: translateX(-50%); | ||
| } | ||
|
|
||
| @media #{mq.$small} { | ||
| padding: var(--lumo-space-l) 0; | ||
| } | ||
|
|
||
| .entry-title { | ||
| margin: 0; | ||
| } | ||
|
|
||
| .entry-summary { | ||
| max-width: 60%; | ||
| padding: 0; | ||
| margin: var(--lumo-space-m) 0; | ||
| color: var(--lumo-tint); | ||
| } | ||
|
|
||
| > span { | ||
| font-size: var(--lumo-font-size-xs); | ||
| font-weight: 600; | ||
| color: var(--lumo-primary-color); | ||
| text-transform: uppercase; | ||
| } | ||
| } | ||
|
|
||
| .header-2 { | ||
| display: flex; | ||
| align-items: center; | ||
| padding: var(--lumo-space-s) 0; | ||
|
|
||
| .title-2 { | ||
| margin-right: auto; | ||
| } | ||
|
|
||
| a { | ||
| margin-left: auto; | ||
| } | ||
|
|
||
| vaadin-progress-bar { | ||
| width: 100px; | ||
| margin-left: var(--lumo-space-m); | ||
| } | ||
| } | ||
|
|
||
| .title-2, | ||
| .title-3, | ||
| .title-4 { | ||
| margin: 0; | ||
| } | ||
|
|
||
| .title-3 { | ||
| padding: var(--lumo-space-s) 0; | ||
| } | ||
|
|
||
| .title-4 { | ||
| padding: var(--lumo-space-s) 0; | ||
| font-weight: 400; | ||
| color: var(--cxl-color-black-50pct); | ||
| } | ||
|
|
||
| cxl-tabs-slider { | ||
| padding: var(--lumo-space-s) 0; | ||
| } | ||
|
|
||
| .section-2:not(.has-cards):not(:first-of-type) { | ||
| padding-top: var(--lumo-space-m); | ||
| margin-top: var(--lumo-space-m); | ||
| border-top: 1px solid var(--cxl-color-light-gray); | ||
| } | ||
|
|
||
| .section-2.has-cards:not(:last-of-type), | ||
| .section-3:not(:last-of-type) { | ||
| padding-bottom: var(--lumo-space-m); | ||
| margin-bottom: var(--lumo-space-m); | ||
| border-bottom: solid 1px var(--cxl-color-light-gray); | ||
| } | ||
|
|
||
| .section-2.has-cards > .section-3:not(.section-3 ~ .section-3), | ||
| .section-3.has-cards .section-4:first-of-type { | ||
| padding-top: var(--lumo-space-m); | ||
| margin-top: var(--lumo-space-m); | ||
| border-top: solid 1px var(--cxl-color-light-gray); | ||
| } | ||
|
|
||
| .section-4 { | ||
| .title-3 { | ||
| opacity: 0.5; | ||
| } | ||
|
|
||
| .entry-title { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: var(--lumo-space-s); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| /* eslint-disable import/no-extraneous-dependencies */ | ||
| import { LitElement, html } from 'lit'; | ||
| import { customElement, property } from 'lit/decorators.js'; | ||
| import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils'; | ||
| import cxlDashboardSectionGlobalStyles from '../styles/global/cxl-dashboard-section-css.js'; | ||
| import cxlDashboardSectionStyles from '../styles/cxl-dashboard-section-css.js'; | ||
|
|
||
| @customElement('cxl-dashboard-section') | ||
| export class CxlDashboardSection extends LitElement { | ||
| static get styles() { | ||
| return [cxlDashboardSectionStyles]; | ||
| } | ||
|
|
||
| @property({ type: String }) image = ''; | ||
|
|
||
| render() { | ||
| return html` | ||
| <slot></slot> | ||
| <div class="image"> | ||
| <img src="${this.image}" /> | ||
| </div> | ||
| `; | ||
| } | ||
|
|
||
| firstUpdated(_changedProperties) { | ||
| super.firstUpdated(_changedProperties); | ||
|
|
||
| // Global styles. | ||
| registerGlobalStyles(cxlDashboardSectionGlobalStyles, { | ||
| moduleId: 'cxl-dashboard-section', | ||
| }); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
69 changes: 69 additions & 0 deletions
69
packages/storybook/cxl-ui/cxl-dashboard/cxl-dashboard-sections.stories.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| /* eslint-disable import/no-extraneous-dependencies */ | ||
| import { html } from 'lit'; | ||
| import '@conversionxl/cxl-ui/src/components/cxl-section.js'; | ||
| import '@conversionxl/cxl-ui/src/components/cxl-dashboard-section.js'; | ||
| import '@vaadin/progress-bar'; | ||
| import categoryData from '../cxl-vaadin-accordion/theme=cxl-dashboard-category.data.json'; | ||
| import { CXLLightCardSlider } from '../cxl-light-card/light-card-slider.stories'; | ||
|
|
||
| export default { | ||
| title: 'CXL UI/cxl-dashboard', | ||
| }; | ||
|
|
||
| export const CXLDashboardSections = () => html` | ||
| <div style="margin-top: var(--lumo-space-xl); padding: 0 var(--lumo-space-l);"> | ||
| <div> | ||
| <h1>Explore all Categories</h1> | ||
| </div> | ||
| ${categoryData.map( | ||
| (cat) => html` | ||
| <cxl-dashboard-section image=${cat.image}> | ||
| <header class="entry-header header"> | ||
| <h2 class="entry-title no-anchor" itemprop="headline">${cat.title}</h2> | ||
| <span>${cat.completion}</span> | ||
| <div class="entry-summary summary" itemprop="description">${cat.description}</div> | ||
| <a href="${cat.action}">View all</a> | ||
| </header> | ||
| <div class="entry-summary summary" itemprop="description"> | ||
| ${cat.sections.map( | ||
| (section) => html` | ||
| <div class="section-2"> | ||
| <div class="header-2"> | ||
| <h4 class="title-2">${section.title}</h4> | ||
| <span>Progress: </span> | ||
| <vaadin-progress-bar value="${section.progress}"></vaadin-progress-bar> | ||
| </div> | ||
| ${section.sections.map( | ||
| (item) => html` | ||
| <div class="section-3"> | ||
| ${item.sections.map( | ||
| (itemSection) => html` | ||
| <div class="section-4"> | ||
| <div class="entry-title"> | ||
| <h6 class="title-3">${item.title}</h6> | ||
| / | ||
| <h6 class="title-4">${itemSection.title}</h6> | ||
| </div> | ||
| ${CXLLightCardSlider(CXLLightCardSlider.args)} | ||
| </div> | ||
| ` | ||
| )} | ||
| </div> | ||
| ` | ||
| )} | ||
| </div> | ||
| ` | ||
| )} | ||
| </div> | ||
| </cxl-dashboard-section> | ||
| ` | ||
| )} | ||
| </div> | ||
| `; | ||
|
|
||
| Object.assign(CXLLightCardSlider, { | ||
| args: { | ||
| numberOfCards: 8, | ||
| theme: 'cxl-category-accordion', | ||
| }, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters