align form

petar-cvit · petar-cvit · commit b447888a3e46 · 2023-05-16T20:59:32.000+02:00
diff --git a/src/components/Comparison/index.js b/src/components/Comparison/index.js
@@ -112,30 +112,22 @@ class Comparison extends React.Component {
 
         return (
             <div className={styles.all}>
-                <div className={styles.yaml}>
-                    <CodeBlock
-                        language={'yaml'}
-                        showLineNumbers={true}
-                    >
-                        {getManifest()}
-                    </CodeBlock>
-                </div>
                 <div className={styles.ui}>
-                    <h1 className="hero__title">Simple deployment</h1>
+                    <h1 className="hero__title uiText">Simple deployment</h1>
                     <p className="hero__subtitle">Cyclops gives you a UI containing fields you define yourself to manage your
                         K8s workloads</p>
-                    <Form labelAlign={"left"}>
+                    <Form labelCol={{span: '6'}}>
                         <Form.Item
                             label="Name"
-                            style={{display: 'block'}}
+                            style={{ flexDirection: 'row' }}
                         >
                             <Input defaultValue={'nginx'} onChange={onNameChange}/>
                         </Form.Item>
                         <Form.Item
                             label="Replicas"
                             style={{display: 'block'}}
                         >
-                            <InputNumber defaultValue={'3'} onChange={onReplicasChange}/>
+                            <InputNumber style={{width: '100%'}} defaultValue={'3'} onChange={onReplicasChange}/>
                         </Form.Item>
                         <Form.Item
                             label="Version"
@@ -147,16 +139,24 @@ class Comparison extends React.Component {
                             label="Port"
                             style={{display: 'block'}}
                         >
-                            <InputNumber defaultValue={'80'} onChange={onPortChange}/>
+                            <InputNumber style={{width: '100%'}} defaultValue={'80'} onChange={onPortChange}/>
                         </Form.Item>
                         <Form.Item
                             label="Need service"
-                            style={{display: 'block'}}
+                            style={{display: 'block', textAlign: 'left'}}
                         >
                             <Switch defaultValue={'false'} onChange={onNeedService}/>
                         </Form.Item>
                     </Form>
                 </div>
+                <div className={styles.yaml}>
+                    <CodeBlock
+                        language={'yaml'}
+                        showLineNumbers={true}
+                    >
+                        {getManifest()}
+                    </CodeBlock>
+                </div>
             </div>
         );
     }
diff --git a/src/components/Comparison/styles.module.css b/src/components/Comparison/styles.module.css
@@ -12,13 +12,16 @@
 }
 
 .yaml {
-  float: right;
+  float: left;
   width: 50%;
-  padding-right: 10%;
-  padding-top: 10px;
+  padding-left: 10%;
+  padding-top: 30px;
+  padding-bottom: 30px;
 }
 
 .ui {
+  padding-top: 30px;
+  padding-bottom: 30px;
   float: left;
   width: 30%;
 }
@@ -31,9 +34,11 @@
   }
 
   .ui {
+    text-align: center;
     width: 100%;
     padding-right: 5px;
     padding-left: 5px;
+    padding-bottom: 0;
   }
 }
 
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -30,7 +30,7 @@ function HomepageHeader() {
                 <div className={styles.support}>
                     <p style={{padding: 0, margin: 0}}>Supported by</p>
                     <Link to="https://nuqleus.io/">
-                        <img src={nuqleus} />
+                        <img src={nuqleus}/>
                     </Link>
                 </div>
             </div>
@@ -44,10 +44,10 @@ export default function Home() {
         <Layout
             title={`Hello from ${siteConfig.title}`}
             description="Description will go into a meta tag in <head />">
-            <HomepageHeader />
+            <HomepageHeader/>
             <main>
-                <HomepageFeatures />
-                <Comparison />
+                <HomepageFeatures/>
+                <Comparison/>
             </main>
         </Layout>
     );

Original file line number	Diff line number	Diff line change
`@@ -12,13 +12,16 @@`
`12`	`12`	`}`
`13`	`13`
`14`	`14`	`.yaml {`
`15`		`- float: right;`
	`15`	`+ float: left;`
`16`	`16`	`width: 50%;`
`17`		`- padding-right: 10%;`
`18`		`- padding-top: 10px;`
	`17`	`+ padding-left: 10%;`
	`18`	`+ padding-top: 30px;`
	`19`	`+ padding-bottom: 30px;`
`19`	`20`	`}`
`20`	`21`
`21`	`22`	`.ui {`
	`23`	`+ padding-top: 30px;`
	`24`	`+ padding-bottom: 30px;`
`22`	`25`	`float: left;`
`23`	`26`	`width: 30%;`
`24`	`27`	`}`
`@@ -31,9 +34,11 @@`
`31`	`34`	`}`
`32`	`35`
`33`	`36`	`.ui {`
	`37`	`+ text-align: center;`
`34`	`38`	`width: 100%;`
`35`	`39`	`padding-right: 5px;`
`36`	`40`	`padding-left: 5px;`
	`41`	`+ padding-bottom: 0;`
`37`	`42`	`}`
`38`	`43`	`}`
`39`	`44`