Techognito/starter-kit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use Flex layout for spacing the two config cards in the config page

Browse source
This commit is contained in:
Katerina Koukiou 2021-11-08 13:41:18 +01:00 • committed by Justin Stephenson
parent 3244a4c37d
commit fec5fd1ae7
2 changed files with 15 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/app.scss
View file

@ -6,3 +6,11 @@ p {
.ct-page-fill { .ct-page-fill {
height: 100% !important; height: 100% !important;
} }
.config-container {
row-gap: var(--pf-global--spacer--sm);
> .pf-c-card {
min-width: 30rem;
}
}

7
src/config.jsx
View file

@ -22,6 +22,7 @@ import React from "react";
import { import {
Breadcrumb, BreadcrumbItem, Breadcrumb, BreadcrumbItem,
Button, Button,
Flex,
Form, Form,
FormGroup, FormGroup,
FormSelect, FormSelect,
@ -384,7 +385,7 @@ class GeneralConfig extends React.Component {
return ( return (
<Card> <Card>
<CardTitle>General Config</CardTitle> <CardTitle>General Config</CardTitle>
<CardBody style={{ maxWidth: "500px" }}>{form}</CardBody> <CardBody>{form}</CardBody>
</Card> </Card>
); );
} }
@ -547,7 +548,7 @@ class SssdConfig extends React.Component {
return ( return (
<Card> <Card>
<CardTitle>SSSD Config</CardTitle> <CardTitle>SSSD Config</CardTitle>
<CardBody style={{ maxWidth: "500px" }}>{form}</CardBody> <CardBody>{form}</CardBody>
</Card> </Card>
); );
} }
@ -573,8 +574,10 @@ groupProps={{ sticky: 'top' }}
</Breadcrumb> </Breadcrumb>
}> }>
<PageSection> <PageSection>
<Flex className="config-container">
<GeneralConfig /> <GeneralConfig />
<SssdConfig /> <SssdConfig />
</Flex>
</PageSection> </PageSection>
</Page> </Page>
); );