Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix textfield widths across the app #695

Merged
merged 2 commits into from
Dec 19, 2024
Merged

Fix textfield widths across the app #695

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a07b3f9
Fix textfield widths across the app
guergana Dec 16, 2024
c607434
Remove unneeded width prop
guergana Dec 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 27 additions & 26 deletions client/components/Parts/Fields/Input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,43 +32,44 @@ export default function InputField(props: InputFieldProps) {
const onFocus = props.onFocus || noop
const onBlur = props.onBlur || noop
return (
<div>
<InputLabel
shrink={false}>
{props.label}
</InputLabel>
<StyledTextField
name={props.name || props.label}
type={props.type}
margin="normal"
value={props.value}
size={props.size || 'small'}
style={{ maxWidth: '350px', marginTop: '5px' }}
disabled={props.disabled}
inputProps={props.inputProps}
onChange={(ev) => onChange(ev.target.value)}
error={props.error}
required={props.required}
helperText={props.helperText}
onKeyDown={onKeyDown}
placeholder={props.placeholder}
onFocus={onFocus}
onBlur={onBlur}
autoFocus={props.autoFocus}
/>
<div style={{ flexGrow: 1, width: '100%' }}>
<InputLabel shrink={false}>{props.label}</InputLabel>
<StyledTextField
name={props.name || props.label}
type={props.type}
margin="normal"
value={props.value}
size={props.size || 'small'}
style={{ maxWidth: '350px', marginTop: '5px' }}
disabled={props.disabled}
inputProps={props.inputProps}
onChange={(ev) => onChange(ev.target.value)}
error={props.error}
required={props.required}
helperText={props.helperText}
onKeyDown={onKeyDown}
placeholder={props.placeholder}
onFocus={onFocus}
onBlur={onBlur}
autoFocus={props.autoFocus}
/>
</div>
)
}


export const StyledTextField = styled(TextField)(() => ({
width: '100%',
export const StyledTextField = styled(TextField, {
})(() => ({
width: '100%',
'& label.Mui-focused': {
color: '#00D1FF',
},
'& .MuiInput-underline:after': {
borderBottomColor: '#00D1FF',
},
'& .MuiTextField-root': {
width: '100%'
},
'& .MuiOutlinedInput-root': {
'& fieldset': {
borderColor: 'gray',
Expand Down
38 changes: 17 additions & 21 deletions client/components/Parts/Fields/Multiline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,27 +21,23 @@ interface MultilineFieldProps {
export default function MultilineField(props: MultilineFieldProps) {
const onFocus = props.onFocus || noop
return (
<div>
<InputLabel
shrink={false}>
{props.label}
</InputLabel>
<StyledTextField
multiline
fullWidth
placeholder={props.placeholder}
name={props.name || props.label}
rows={props.rows}
type={props.type}
margin="normal"
style={{ maxWidth: '350px', marginTop: '5px' }}
value={props.value}
size={props.size || 'small'}
onChange={(ev) => props.onChange(ev.target.value as any)}
onFocus={onFocus}
autoFocus={props.autoFocus}
required={props.required}
/>
<div style={{ flexGrow: 1, width: '100%'}}>
<InputLabel shrink={false}>{props.label}</InputLabel>
<StyledTextField
multiline
placeholder={props.placeholder}
name={props.name || props.label}
rows={props.rows}
type={props.type}
margin="normal"
style={{ maxWidth: '350px', marginTop: '5px' }}
value={props.value}
size={props.size || 'small'}
onChange={(ev) => props.onChange(ev.target.value as any)}
onFocus={onFocus}
autoFocus={props.autoFocus}
required={props.required}
/>
</div>
)
}
9 changes: 3 additions & 6 deletions client/components/Parts/Fields/YesNo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,11 @@ interface YesNoFieldProps {
export default function YesNoField(props: YesNoFieldProps) {
const onFocus = props.onFocus || noop
return (
<div>
<InputLabel
shrink={false}>
{props.label}
</InputLabel>
<div style={{ flexGrow: 1, width: '100%'}}>
<InputLabel shrink={false}>{props.label}</InputLabel>
<StyledTextField
select
style= {{ maxWidth: '350px', marginTop: '5px' }}
style= {{ flexGrow: 1, maxWidth: '350px', marginTop: '5px' }}
margin="normal"
size={props.size || 'small'}
value={props.value ? 'yes' : 'no'}
Expand Down
Loading