Skip to content

Commit

Permalink
simplify homepage card list by replacing OuiFlex component with CSS grid
Browse files Browse the repository at this point in the history 
Signed-off-by: kgcreative <[email protected]>
  • Loading branch information
@kgcreative
kgcreative committed Dec 6, 2024
1 parent 57ba43c commit 143a5e5
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 102 deletions.
20 changes: 4 additions & 16 deletions src-docs/src/components/guide_components.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -344,22 +344,10 @@ body {
}
}

.guideHomePage__blockformCard {
min-width: 200px;
flex-basis: 100% !important;

// sass-lint:disable-block mixins-before-declarations
@include ouiBreakpoint('s', 'm') {
flex-basis: 45% !important; // sass-lint:disable-line no-important
}

@include ouiBreakpoint('l') {
flex-basis: 30% !important; // sass-lint:disable-line no-important
}

@include ouiBreakpoint('xl') {
flex-basis: 22% !important; // sass-lint:disable-line no-important
}
.guideHomePage__blockformContainer {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: $ouiSizeL;

Check warning on line 350 in src-docs/src/components/guide_components.scss

View workflow job for this annotation

GitHub Actions / Lint and Test on ubuntu-latest 

Property `gap` appears to be spelled incorrectly
}

.guideHomePage__illustration {
Expand Down
152 changes: 66 additions & 86 deletions src-docs/src/views/home/home_view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,92 +120,72 @@ export const HomeView = () => (
</OuiFlexItem>
</OuiFlexGrid>
<OuiSpacer size="xxl" />
<OuiFlexGroup
gutterSize="l"
wrap
responsive={false}
justifyContent="spaceBetween">
<OuiFlexItem grow={false} className="guideHomePage__blockformCard">
<OuiCard
hasBorder
href="#/navigation/button"
textAlign="left"
image={imageButtons}
title="Buttons"
description="Buttons for every usage you might need"
/>
</OuiFlexItem>
<OuiFlexItem grow={false} className="guideHomePage__blockformCard">
<OuiCard
hasBorder
href="#/display/card"
textAlign="left"
image={imageCards}
title="Cards"
description="Cards like these help you make repeatable content more presentable"
/>
</OuiFlexItem>
<OuiFlexItem grow={false} className="guideHomePage__blockformCard">
<OuiCard
hasBorder
href="#/layout/flex"
textAlign="left"
image={imageFlexgrid}
title="Flexible layouts"
description="Create layouts by using flex groups, grids, and items"
/>
</OuiFlexItem>
<OuiFlexItem grow={false} className="guideHomePage__blockformCard">
<OuiCard
hasBorder
href="#/forms/form-layouts"
textAlign="left"
image={imageForms}
title="Forms"
description="Input tags, layouts, and validation for your forms"
/>
</OuiFlexItem>
<OuiFlexItem grow={false} className="guideHomePage__blockformCard">
<OuiCard
hasBorder
href="#/display/icons"
textAlign="left"
image={imageIcons}
title="Icons"
description="Our SVG icon library gives you full control over size and color"
/>
</OuiFlexItem>
<OuiFlexItem grow={false} className="guideHomePage__blockformCard">
<OuiCard
hasBorder
href="#/layout/page"
textAlign="left"
image={imagePages}
title="Pages"
description="Layout your whole application page with this component and its series of child components"
/>
</OuiFlexItem>
<OuiFlexItem grow={false} className="guideHomePage__blockformCard">
<OuiCard
hasBorder
href="#/tabular-content/tables"
textAlign="left"
image={imageTables}
title="Tables"
description="Build tables from individual components or high level wrappers"
/>
</OuiFlexItem>
<OuiFlexItem grow={false} className="guideHomePage__blockformCard">
<OuiCard
hasBorder
href="#/display/text"
textAlign="left"
image={imageText}
title="Text"
description="Simple HTML text like paragraphs and lists are wrapped in a single text component for styling"
/>
</OuiFlexItem>
</OuiFlexGroup>
<div className="guideHomePage__blockformContainer">
<OuiCard
hasBorder
href="#/navigation/button"
textAlign="left"
image={imageButtons}
title="Buttons"
description="Buttons for every usage you might need"
/>
<OuiCard
hasBorder
href="#/display/card"
textAlign="left"
image={imageCards}
title="Cards"
description="Cards like these help you make repeatable content more presentable"
/>
<OuiCard
hasBorder
href="#/layout/flex"
textAlign="left"
image={imageFlexgrid}
title="Flexible layouts"
description="Create layouts by using flex groups, grids, and items"
/>
<OuiCard
hasBorder
href="#/forms/form-layouts"
textAlign="left"
image={imageForms}
title="Forms"
description="Input tags, layouts, and validation for your forms"
/>
<OuiCard
hasBorder
href="#/display/icons"
textAlign="left"
image={imageIcons}
title="Icons"
description="Our SVG icon library gives you full control over size and color"
/>
<OuiCard
hasBorder
href="#/layout/page"
textAlign="left"
image={imagePages}
title="Pages"
description="Layout your whole application page with this component and its series of child components"
/>
<OuiCard
hasBorder
href="#/tabular-content/tables"
textAlign="left"
image={imageTables}
title="Tables"
description="Build tables from individual components or high level wrappers"
/>
<OuiCard
hasBorder
href="#/display/text"
textAlign="left"
image={imageText}
title="Text"
description="Simple HTML text like paragraphs and lists are wrapped in a single text component for styling"
/>
</div>

<OuiSpacer size="xl" />
<div>
Expand Down

0 comments on commit 143a5e5

Please sign in to comment.