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

Using centered layout in Cluster Settings

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

37
src/renderer/components/+cluster-settings/cluster-settings.scss
View File

@ -1,6 +1,7 @@
.ClusterSettings { .ClusterSettings {
.WizardLayout { .WizardLayout {
grid-template-columns: unset; grid-template-columns: unset;
grid-template-rows: 76px 1fr;
padding: 0; padding: 0;
.head-col { .head-col {
@ -9,15 +10,6 @@
:nth-child(2) { :nth-child(2) {
flex: 1 0 0; flex: 1 0 0;
} }
a {
text-decoration: none;
color: $grey-600;
}
}
.info-col {
display: none;
} }
.content-col { .content-col {
@ -29,25 +21,18 @@
text-transform: none; text-transform: none;
} }
.settings-wrapper { > div {
margin: 0 auto; margin-top: $margin * 5;
width: 60%; }
min-width: 570px;
max-width: 1000px;
> div { .admin-note {
margin-top: $margin * 5; font-size: small;
} opacity: 0.5;
margin-left: $margin;
}
.admin-note { .button-area {
font-size: small; margin-top: $margin * 2;
opacity: 0.5;
margin-left: $margin;
}
.button-area {
margin-top: $margin * 2;
}
} }
.file-loader { .file-loader {

18
src/renderer/components/+cluster-settings/cluster-settings.tsx
View File

@ -1,7 +1,6 @@
import "./cluster-settings.scss"; import "./cluster-settings.scss";
import React from "react"; import React from "react";
import { Link } from "react-router-dom";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { Features } from "./features"; import { Features } from "./features";
import { Removal } from "./removal"; import { Removal } from "./removal";
@ -11,6 +10,7 @@ import { WizardLayout } from "../layout/wizard-layout";
import { ClusterIcon } from "../cluster-icon"; import { ClusterIcon } from "../cluster-icon";
import { Icon } from "../icon"; import { Icon } from "../icon";
import { getMatchedCluster } from "../cluster-manager/cluster-view.route"; import { getMatchedCluster } from "../cluster-manager/cluster-view.route";
import { navigate } from "../../navigation";
@observer @observer
export class ClusterSettings extends React.Component { export class ClusterSettings extends React.Component {
@ -25,20 +25,16 @@ export class ClusterSettings extends React.Component {
showTooltip={false} showTooltip={false}
/> />
<h2>{cluster.preferences.clusterName}</h2> <h2>{cluster.preferences.clusterName}</h2>
<Link to="/"> <Icon material="close" onClick={() => navigate("/")} big/>
<Icon material="close" big/>
</Link>
</> </>
); );
return ( return (
<div className="ClusterSettings"> <div className="ClusterSettings">
<WizardLayout header={header}> <WizardLayout header={header} centered>
<div className="settings-wrapper"> <Status cluster={cluster}></Status>
<Status cluster={cluster}></Status> <General cluster={cluster}></General>
<General cluster={cluster}></General> <Features cluster={cluster}></Features>
<Features cluster={cluster}></Features> <Removal cluster={cluster}></Removal>
<Removal cluster={cluster}></Removal>
</div>
</WizardLayout> </WizardLayout>
</div> </div>
); );