Skip to content
This repository was archived by the owner on Mar 13, 2025. It is now read-only.

fixed styles for job-rb #79

Merged
merged 3 commits into from
Feb 7, 2021
Merged

fixed styles for job-rb #79

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3721e52
fixed styles for job-rb
dashu-baba Feb 5, 2021
f7fe380
feedback on stylings
dashu-baba Feb 5, 2021
0470460
Adjusted Select component style & form fluidity
dashu-baba Feb 6, 2021
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
1 change: 1 addition & 0 deletions src/components/DataItem/styles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,4 +30,5 @@
font-weight: 500;
margin-top: 2px;
text-align: left;
word-break: break-all;
}
12 changes: 8 additions & 4 deletions src/components/DateInput/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,16 @@ import PT from "prop-types";
import DatePicker from "react-datepicker";
import "./styles.module.scss";

const DateInput = ({ value, onChange, placeholder }) => {
const DateInput = (props) => {
return (
<div styleName="datepicker-wrapper">
<DatePicker
dateFormat="MM/dd/yyyy"
placeholderText={placeholder}
selected={value}
onChange={onChange}
placeholderText={props.placeholder}
selected={props.value}
onChange={props.onChange}
onBlur={props.onBlur}
onFocus={props.onFocus}
/>
</div>
);
Expand All @@ -25,6 +27,8 @@ DateInput.propTypes = {
value: PT.string,
onChange: PT.func.isRequired,
placeholder: PT.string,
onBlur: PT.func,
onFocus: PT.func,
};

export default DateInput;
50 changes: 28 additions & 22 deletions src/components/FormField/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,26 +18,28 @@ const FormField = ({ field, isGroupField }) => {
<Field name={field.name}>
{({ input, meta }) => (
<div styleName={isGroupField ? "field-group-field" : ""}>
<label
styleName={
input.value
? "job-field-label"
: "job-field-label job-field-no-label"
}
>
{field.label}
</label>
{ !field.readonly && (
<label
styleName={
(input.value != "undefined" && input.value !== null && input.value !== "") || meta.active
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems that this condition input.value != "undefined" checks for the string "undefined" not for the value undefined. Btw, there is a lodash method _.isNil to check if value is undefined or null.

? "job-field-label"
: "job-field-label job-field-no-label"
}
>
{field.label}
</label>
)}
{field.type === FORM_FIELD_TYPE.TEXT && (
<TextInput
maxLength={field.maxLength}
placeholder={field.placeholder}
value={input.value ?? ""}
type="text"
onChange={(v) => {
input.onChange(v);
}}
className={meta.error ? "error" : ""}
className={meta.error && meta.touched ? "error" : ""}
readonly={field.readonly}
onChange={input.onChange}
onBlur={input.onBlur}
onFocus={input.onFocus}
/>
)}
{field.type === FORM_FIELD_TYPE.NUMBER && (
Expand All @@ -47,37 +49,41 @@ const FormField = ({ field, isGroupField }) => {
type="number"
minValue={field.minValue}
onChange={input.onChange}
className={meta.error ? "error" : ""}
onBlur={input.onBlur}
onFocus={input.onFocus}
className={meta.error && meta.touched ? "error" : ""}
/>
)}
{field.type === FORM_FIELD_TYPE.TEXTAREA && (
<TextArea
placeholder={field.placeholder}
value={input?.value ?? ""}
onChange={input.onChange}
className={meta.error ? "error" : ""}
onBlur={input.onBlur}
onFocus={input.onFocus}
className={meta.error && meta.touched ? "error" : ""}
/>
)}
{field.type === FORM_FIELD_TYPE.DATE && (
<DateInput
placeholder={field.placeholder}
value={input?.value ?? ""}
onChange={(date) => {
input.onChange(date);
}}
onChange={input.onChange}
onBlur={input.onBlur}
onFocus={input.onFocus}
/>
)}
{field.type === FORM_FIELD_TYPE.SELECT && (
<ReactSelect
value={input?.value ?? ""}
onChange={(val) => {
input.onChange(val);
}}
options={field.selectOptions}
isMulti={field.isMulti}
onChange={input.onChange}
onBlur={input.onBlur}
onFocus={input.onFocus}
/>
)}
{field.isRequired && meta.error && (
{field.isRequired && meta.error && meta.touched && (
<div styleName="field-error">{meta.error}</div>
)}
</div>
Expand Down
10 changes: 10 additions & 0 deletions src/components/FormField/styles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
top: 12px;
background: white;
z-index: 1;
padding: 0 3px;
}

.job-field-no-label {
Expand All @@ -21,6 +22,15 @@
input:not([type="checkbox"]),
textarea {
margin-bottom: 0px;
&::placeholder {
color: #AAAAAA;
font-family: Roboto;
font-size: 14px;
font-weight: 400;
line-height: 22px;
text-align: left;
text-transform: none;
}
}

input:read-only {
Expand Down
66 changes: 45 additions & 21 deletions src/components/ReactSelect/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,53 +8,75 @@ import PT from "prop-types";
import Select from "react-select";
import "./styles.module.scss";

const ReactSelect = ({
value,
onChange,
placeholder,
error,
isMulti,
options,
}) => {
const ReactSelect = (props) => {
const customStyles = {
control: (provided, state) => ({
...provided,
minHeight: "36px",
borderColor: state.isFocused ? "#55a5ff" : provided.borderColor,
boxShadow: state.isFocused ? "0 0 2px 1px #cee6ff" : provided.boxShadow
}),
menu: (provided, state) => ({
menu: (provided) => ({
...provided,
minHeight: "36px",
zIndex: 10,
}),
valueContainer: (provided, state) => ({
valueContainer: (provided) => ({
...provided,
padding: "0 6px",
padding: "1px 6px",
}),
input: (provided, state) => ({
input: (provided) => ({
...provided,
margin: "0px",
height: "36px",
height: "auto",
padding: "0",

}),
indicatorSeparator: (state) => ({
indicatorSeparator: () => ({
display: "none",
}),
indicatorsContainer: (provided, state) => ({
indicatorsContainer: (provided) => ({
...provided,
height: "40px",
height: "auto",
}),
option: (provided) => ({
...provided,
minHeight: "32px"
}),
placeholder: (provided) => ({
...provided,
color: "#AAAAAA",
fontFamily: "Roboto",
fontSize: "16px",
lineHeight: "22px",
textAlign: "left",
fontWeight: "300"
}),
multiValue: (provided) => ({
...provided,
margin: "4px 4px",
color: "#AAAAAA",
fontFamily: "Roboto",
fontSize: "14px",
lineHeight: "22px",
textAlign: "left",
borderRadius: "5px"
})
};

return (
<div styleName="select-wrapper">
<Select
value={value}
value={props.value}
styles={customStyles}
onChange={(val) => {
onChange(val);
props.onChange(val);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we replace this with onChange={props.onChange} ?

}}
options={options}
styleName={error ? "error" : ""}
isMulti={isMulti}
options={props.options}
styleName={props.error ? "error" : ""}
isMulti={props.isMulti}
onBlur={props.onBlur}
onFocus={props.onFocus}
/>
</div>
);
Expand All @@ -66,6 +88,8 @@ ReactSelect.propTypes = {
placeholder: PT.string,
error: PT.string,
isMulti: PT.bool,
onBlur: PT.func,
onFocus: PT.func,
options: PT.arrayOf(
PT.shape({
value: PT.string.isRequired,
Expand Down
5 changes: 5 additions & 0 deletions src/components/ReactSelect/styles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,5 +8,10 @@
input {
border: none !important;
box-shadow: none !important;
transition: none !important;
}
}

.react-select__option{
min-height: 32px;
}
46 changes: 24 additions & 22 deletions src/components/TCForm/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,29 +49,31 @@ const TCForm = ({
validate={getValidator(configuration.fields)}
render={({ handleSubmit, invalid, dirty }) => (
<form onSubmit={handleSubmit} styleName="tc-form">
<div styleName="job-form-fields">
{configuration.rows.map((row) => {
return (
<>
{row.type === FORM_ROW_TYPE.GROUP && (
<div styleName="field-group">
{row.fields.map((field) => {
return (
<FormField
field={fields[field]}
isGroupField={true}
/>
);
<div styleName="job-form-fields-container">
<div styleName="job-form-fields-wrapper">
{configuration.rows.map((row) => {
return (
<>
{row.type === FORM_ROW_TYPE.GROUP && (
<div styleName="field-group">
{row.fields.map((field) => {
return (
<FormField
field={fields[field]}
isGroupField={true}
/>
);
})}
</div>
)}
{row.type === FORM_ROW_TYPE.SINGLE &&
row.fields.map((field) => {
return <FormField field={fields[field]} />;
})}
</div>
)}
{row.type === FORM_ROW_TYPE.SINGLE &&
row.fields.map((field) => {
return <FormField field={fields[field]} />;
})}
</>
);
})}
</>
);
})}
</div>
</div>
<div styleName="form-actions">
<Button
Expand Down
48 changes: 47 additions & 1 deletion src/components/TCForm/styles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,18 @@
@import "styles/include";
@import "~react-datepicker/dist/react-datepicker.css";



.tc-form {
width: 100%;

.job-form-fields {
.job-form-fields-container {
padding: 40px 19% 20px;

.job-form-fields-wrapper{
max-width: 640px;
}

input:not([type="checkbox"]),
textarea {
margin-bottom: 0px;
Expand Down Expand Up @@ -50,3 +56,43 @@
.datepicker-wrapper > div:nth-child(2) > div:nth-child(2) {
z-index: 100;
}

@media (max-width: 1366px) {
.tc-form{
.job-form-fields-container {
padding-left: 15%;
padding-right: 15%;
transition: 300ms;
}
}
}

@media (max-width: 1280px) {
.tc-form{
.job-form-fields-container {
padding-left: 10%;
padding-right: 10%;
transition: 300ms;
}
}
}

@media (max-width: 1020px) {
.tc-form{
.job-form-fields-container {
padding-left: 5%;
padding-right: 5%;
transition: 300ms;
}
}
}

@media (max-width: 854px) {
.tc-form{
.job-form-fields-container {
padding-left: 0;
padding-right: 0;
transition: 300ms;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we don't need media conditions for this functionality, everything we need is:

  • make all the fuilds fluid so they take 100% width of the form
  • make the form 100% width but with max-width 640px

}
}
}
Loading