hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Adding 'centering' option to WizardLayout

Browse Source 
Signed-off-by: alexfront <alex.andreev.email@gmail.com>
This commit is contained in:
alexfront 2020-08-17 12:06:43 +03:00
parent 165788da2d
commit 7a3b3d1f1d
2 changed files with 25 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/renderer/components/layout/wizard-layout.scss
View File

@ -16,6 +16,7 @@
> .head-col {
position: sticky;
border-bottom: 1px solid $grey-800;
justify-content: space-between;
}
> .content-col {
@ -41,4 +42,17 @@
a {
color: $colorInfo;
}
&.centered {
.content-col {
margin: 0;
> div {
margin: 0 auto;
width: 60%;
min-width: 570px;
max-width: 1000px;
}
}
}
}

17
src/renderer/components/layout/wizard-layout.tsx
View File

@ -10,25 +10,30 @@ interface Props {
contentClass?: IClassName;
infoPanelClass?: IClassName;
infoPanel?: React.ReactNode;
centered?: boolean; // Centering content horizontally
}
@observer
export class WizardLayout extends React.Component<Props> {
render() {
const { className, contentClass, infoPanelClass, infoPanel, header, headerClass, children: content } = this.props;
const { className, contentClass, infoPanelClass, infoPanel, header, headerClass, centered, children: content } = this.props;
return (
<div className={cssNames("WizardLayout", className)}>
<div className={cssNames("WizardLayout", { centered }, className)}>
{header && (
<div className={cssNames("head-col flex gaps align-center", headerClass)}>
{header}
</div>
)}
<div className={cssNames("content-col flex column gaps", contentClass)}>
{content}
</div>
<div className={cssNames("info-col flex column gaps", infoPanelClass)}>
{infoPanel}
<div className="flex column gaps">
{content}
</div>
</div>
{infoPanel && (
<div className={cssNames("info-col flex column gaps", infoPanelClass)}>
{infoPanel}
</div>
)}
</div>
)
}