Skip to content

Commit

Permalink
Homepage layout fix (#1472) (#1475)
Browse files Browse the repository at this point in the history 
* simplify homepage card list by replacing OuiFlex component with CSS grid



* simplify layout on homepage



* clean up class properties



* fix lint errors



* update changelog



---------


(cherry picked from commit 147fd1c)

Signed-off-by: kgcreative <3443142+kgcreative@users.noreply.github.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
  • Loading branch information
@opensearch-trigger-bot @github-actions
opensearch-trigger-bot[bot] and github-actions[bot] authored Dec 12, 2024
1 parent 30bfc6c commit b3cb075
Show file tree
Hide file tree
Showing 2 changed files with 106 additions and 135 deletions.
26 changes: 12 additions & 14 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,20 @@ 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
}
.guideHomePage__benefitsContainer,
.guideHomePage__featuredComponents {
display: grid;
gap: $ouiSizeL; // sass-lint:disable-line no-misspelled-properties
padding-left: $ouiSizeL;
padding-right: $ouiSizeL;
}

@include ouiBreakpoint('l') {
flex-basis: 30% !important; // sass-lint:disable-line no-important
}
.guideHomePage__benefitsContainer {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

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

.guideHomePage__illustration {
Expand Down
215 changes: 94 additions & 121 deletions src-docs/src/views/home/home_view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ import {
OuiTitle,
OuiPanel,
OuiIcon,
OuiFlexGrid,
OuiPageContent,
OuiPageContentBody,
} from '../../../../src/components';
Expand Down Expand Up @@ -85,127 +84,101 @@ export const HomeView = () => (
</OuiFlexItem>
</OuiFlexGroup>
</OuiPanel>
<OuiSpacer size="xxl" />
<OuiFlexGrid columns={3}>
<OuiFlexItem>
<OuiCard
icon={<OuiIcon size="l" type="accessibility" />}
layout="horizontal"
display="plain"
titleSize="xs"
title="Accessible to everyone"
description="Uses high contrast, color-blind safe palettes and tested with most
<OuiSpacer size="xl" />
<div className="guideHomePage__benefitsContainer">
<OuiCard
icon={<OuiIcon size="l" type="accessibility" />}
layout="horizontal"
display="plain"
titleSize="xs"
title="Accessible to everyone"
description="Uses high contrast, color-blind safe palettes and tested with most
assistive technology."
/>
</OuiFlexItem>
<OuiFlexItem>
<OuiCard
icon={<OuiIcon size="l" type="controlsHorizontal" />}
layout="horizontal"
display="plain"
titleSize="xs"
title="Flexible and composable"
description="Configurable enough to meet the needs of a wide array of contexts while maintaining brand and low-level consistency."
/>
</OuiFlexItem>
<OuiFlexItem>
<OuiCard
icon={<OuiIcon size="l" type="documentEdit" />}
layout="horizontal"
display="plain"
titleSize="xs"
title="Well documented and tested"
description="Code is friendly to the novice and expert alike."
/>
</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>
/>
<OuiCard
icon={<OuiIcon size="l" type="controlsHorizontal" />}
layout="horizontal"
display="plain"
titleSize="xs"
title="Flexible and composable"
description="Configurable enough to meet the needs of a wide array of contexts while maintaining brand and low-level consistency."
/>
<OuiCard
icon={<OuiIcon size="l" type="documentEdit" />}
layout="horizontal"
display="plain"
titleSize="xs"
title="Well documented and tested"
description="Code is friendly to the novice and expert alike."
/>
</div>
<OuiSpacer size="xl" />
<div className="guideHomePage__featuredComponents">
<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 b3cb075

Please sign in to comment.