Skip to content

Commit 1a474d6

Browse files
author
Benjamin Perez
committed
Limited input width size for forms in wide screens
1 parent a2a09b8 commit 1a474d6

File tree

5 files changed

+176
-159
lines changed

5 files changed

+176
-159
lines changed

‎portal-ui/src/screens/Console/Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,8 @@ const styles = (theme: Theme) =>
106106
borderBottom: "#9c9c9c 1px solid",
107107
paddingBottom: 14,
108108
marginBottom: 20,
109+
maxWidth: 840,
110+
margin: "0px auto",
109111
},
110112
indicatorLabel: {
111113
fontSize: 12,

‎portal-ui/src/screens/Console/Common/FormComponents/PredefinedList/PredefinedList.tsx‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from "react";
1+
import React, { Fragment } from "react";
22
import Grid from "@material-ui/core/Grid";
33
import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
44
import { predefinedList } from "../common/styleLibrary";
@@ -22,24 +22,26 @@ const PredefinedList = ({
2222
multiLine = false,
2323
}: IPredefinedList) => {
2424
return (
25-
<React.Fragment>
26-
{label !== "" && (
27-
<Grid item xs={12} className={classes.predefinedTitle}>
28-
{label}
29-
</Grid>
30-
)}
31-
<Grid item xs={12} className={classes.predefinedList}>
32-
<Grid
33-
item
34-
xs={12}
35-
className={
36-
multiLine ? classes.innerContentMultiline : classes.innerContent
37-
}
38-
>
39-
{content}
25+
<Fragment>
26+
<Grid className={classes.prefinedContainer}>
27+
{label !== "" && (
28+
<Grid item xs={12} className={classes.predefinedTitle}>
29+
{label}
30+
</Grid>
31+
)}
32+
<Grid item xs={12} className={classes.predefinedList}>
33+
<Grid
34+
item
35+
xs={12}
36+
className={
37+
multiLine ? classes.innerContentMultiline : classes.innerContent
38+
}
39+
>
40+
{content}
41+
</Grid>
4042
</Grid>
4143
</Grid>
42-
</React.Fragment>
44+
</Fragment>
4345
);
4446
};
4547

‎portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,8 @@ export const fieldBasic = {
3636
fieldContainer: {
3737
marginBottom: 20,
3838
position: "relative" as const,
39+
maxWidth: 840,
40+
margin: "0px auto",
3941
},
4042
tooltipContainer: {
4143
marginLeft: 5,
@@ -77,6 +79,8 @@ export const modalBasic = {
7779
padding: "24px 50px",
7880
overflowY: "auto" as const,
7981
height: 170,
82+
maxWidth: 840,
83+
margin: "0 auto",
8084
},
8185
};
8286

@@ -184,6 +188,11 @@ export const searchField = {
184188
};
185189

186190
export const predefinedList = {
191+
prefinedContainer: {
192+
maxWidth: 840,
193+
width: "100%",
194+
margin: "0 auto",
195+
},
187196
predefinedTitle: {
188197
fontSize: 16,
189198
fontWeight: 600,

‎portal-ui/src/screens/Console/Configurations/CustomForms/ConfMySql.tsx‎

Lines changed: 63 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -159,68 +159,70 @@ const ConfMySql = ({ onChange, classes }: IConfMySqlProps) => {
159159
</React.Fragment>
160160
) : (
161161
<React.Fragment>
162-
<Grid item xs={12} className={classes.configureString}>
163-
<Grid item xs={12}>
164-
<InputBoxWrapper
165-
id="host"
166-
name="host"
167-
label=""
168-
placeholder="Enter Host"
169-
value={host}
170-
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
171-
setHostname(e.target.value);
172-
}}
173-
/>
174-
</Grid>
175-
<Grid item xs={12}>
176-
<InputBoxWrapper
177-
id="db-name"
178-
name="db-name"
179-
label=""
180-
placeholder="Enter DB Name"
181-
value={dbName}
182-
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
183-
setDbName(e.target.value);
184-
}}
185-
/>
186-
</Grid>
187-
<Grid item xs={12}>
188-
<InputBoxWrapper
189-
id="port"
190-
name="port"
191-
label=""
192-
placeholder="Enter Port"
193-
value={port}
194-
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
195-
setPort(e.target.value);
196-
}}
197-
/>
198-
</Grid>
162+
<Grid item xs={12}>
163+
<Grid item xs={12} className={classes.configureString}>
164+
<Grid item xs={12}>
165+
<InputBoxWrapper
166+
id="host"
167+
name="host"
168+
label=""
169+
placeholder="Enter Host"
170+
value={host}
171+
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
172+
setHostname(e.target.value);
173+
}}
174+
/>
175+
</Grid>
176+
<Grid item xs={12}>
177+
<InputBoxWrapper
178+
id="db-name"
179+
name="db-name"
180+
label=""
181+
placeholder="Enter DB Name"
182+
value={dbName}
183+
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
184+
setDbName(e.target.value);
185+
}}
186+
/>
187+
</Grid>
188+
<Grid item xs={12}>
189+
<InputBoxWrapper
190+
id="port"
191+
name="port"
192+
label=""
193+
placeholder="Enter Port"
194+
value={port}
195+
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
196+
setPort(e.target.value);
197+
}}
198+
/>
199+
</Grid>
199200

200-
<Grid item xs={12}>
201-
<InputBoxWrapper
202-
id="user"
203-
name="user"
204-
label=""
205-
placeholder="Enter User"
206-
value={user}
207-
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
208-
setUser(e.target.value);
209-
}}
210-
/>
211-
</Grid>
212-
<Grid item xs={12}>
213-
<InputBoxWrapper
214-
id="password"
215-
name="password"
216-
label=""
217-
placeholder="Enter Password"
218-
type="password"
219-
value={password}
220-
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
221-
setPassword(e.target.value);
222-
}}
223-
/>
201+
<Grid item xs={12}>
202+
<InputBoxWrapper
203+
id="user"
204+
name="user"
205+
label=""
206+
placeholder="Enter User"
207+
value={user}
208+
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
209+
setUser(e.target.value);
210+
}}
211+
/>
212+
</Grid>
213+
<Grid item xs={12}>
214+
<InputBoxWrapper
215+
id="password"
216+
name="password"
217+
label=""
218+
placeholder="Enter Password"
219+
type="password"
220+
value={password}
221+
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
222+
setPassword(e.target.value);
223+
}}
224+
/>
225+
</Grid>
224226
</Grid>
225227
</Grid>
226228
<PredefinedList label={"Connection String"} content={dsnString} />

‎portal-ui/src/screens/Console/Configurations/CustomForms/ConfPostgres.tsx‎

Lines changed: 83 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -232,87 +232,89 @@ const ConfPostgres = ({ onChange, classes }: IConfPostgresProps) => {
232232
</React.Fragment>
233233
) : (
234234
<React.Fragment>
235-
<Grid item xs={12} className={classes.configureString}>
236-
<Grid item xs={12}>
237-
<InputBoxWrapper
238-
id="host"
239-
name="host"
240-
label=""
241-
placeholder="Enter Host"
242-
value={host}
243-
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
244-
setHostname(e.target.value);
245-
}}
246-
/>
247-
</Grid>
248-
<Grid item xs={12}>
249-
<InputBoxWrapper
250-
id="db-name"
251-
name="db-name"
252-
label=""
253-
placeholder="Enter DB Name"
254-
value={dbName}
255-
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
256-
setDbName(e.target.value);
257-
}}
258-
/>
259-
</Grid>
260-
<Grid item xs={12}>
261-
<InputBoxWrapper
262-
id="port"
263-
name="port"
264-
label=""
265-
placeholder="Enter Port"
266-
value={port}
267-
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
268-
setPort(e.target.value);
269-
}}
270-
/>
271-
</Grid>
272-
<Grid item xs={12}>
273-
<SelectWrapper
274-
value={sslMode}
275-
label=""
276-
id="sslmode"
277-
name="sslmode"
278-
onChange={(e): void => {
279-
if (e.target.value !== undefined) {
280-
setSslMode(e.target.value + "");
281-
}
282-
}}
283-
options={[
284-
{ label: "Enter SSL Mode", value: " " },
285-
{ label: "Require", value: "require" },
286-
{ label: "Disable", value: "disable" },
287-
{ label: "Verify CA", value: "verify-ca" },
288-
{ label: "Verify Full", value: "verify-full" },
289-
]}
290-
/>
291-
</Grid>
292-
<Grid item xs={12}>
293-
<InputBoxWrapper
294-
id="user"
295-
name="user"
296-
label=""
297-
placeholder="Enter User"
298-
value={user}
299-
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
300-
setUser(e.target.value);
301-
}}
302-
/>
303-
</Grid>
304-
<Grid item xs={12}>
305-
<InputBoxWrapper
306-
id="password"
307-
name="password"
308-
label=""
309-
type="password"
310-
placeholder="Enter Password"
311-
value={password}
312-
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
313-
setPassword(e.target.value);
314-
}}
315-
/>
235+
<Grid item xs={12}>
236+
<Grid item xs={12} className={classes.configureString}>
237+
<Grid item xs={12}>
238+
<InputBoxWrapper
239+
id="host"
240+
name="host"
241+
label=""
242+
placeholder="Enter Host"
243+
value={host}
244+
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
245+
setHostname(e.target.value);
246+
}}
247+
/>
248+
</Grid>
249+
<Grid item xs={12}>
250+
<InputBoxWrapper
251+
id="db-name"
252+
name="db-name"
253+
label=""
254+
placeholder="Enter DB Name"
255+
value={dbName}
256+
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
257+
setDbName(e.target.value);
258+
}}
259+
/>
260+
</Grid>
261+
<Grid item xs={12}>
262+
<InputBoxWrapper
263+
id="port"
264+
name="port"
265+
label=""
266+
placeholder="Enter Port"
267+
value={port}
268+
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
269+
setPort(e.target.value);
270+
}}
271+
/>
272+
</Grid>
273+
<Grid item xs={12}>
274+
<SelectWrapper
275+
value={sslMode}
276+
label=""
277+
id="sslmode"
278+
name="sslmode"
279+
onChange={(e): void => {
280+
if (e.target.value !== undefined) {
281+
setSslMode(e.target.value + "");
282+
}
283+
}}
284+
options={[
285+
{ label: "Enter SSL Mode", value: " " },
286+
{ label: "Require", value: "require" },
287+
{ label: "Disable", value: "disable" },
288+
{ label: "Verify CA", value: "verify-ca" },
289+
{ label: "Verify Full", value: "verify-full" },
290+
]}
291+
/>
292+
</Grid>
293+
<Grid item xs={12}>
294+
<InputBoxWrapper
295+
id="user"
296+
name="user"
297+
label=""
298+
placeholder="Enter User"
299+
value={user}
300+
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
301+
setUser(e.target.value);
302+
}}
303+
/>
304+
</Grid>
305+
<Grid item xs={12}>
306+
<InputBoxWrapper
307+
id="password"
308+
name="password"
309+
label=""
310+
type="password"
311+
placeholder="Enter Password"
312+
value={password}
313+
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
314+
setPassword(e.target.value);
315+
}}
316+
/>
317+
</Grid>
316318
</Grid>
317319
</Grid>
318320
<PredefinedList

0 commit comments

Comments
 (0)