Challenge Overview
Add support for rendering questions in one line.
Project Background
Topcode Connect is client facing application of Topcoder. Customer use Topcoder Connect to input requirements of their projects, then managers and copilots take it from there.
Currently, when a customer creates a new project he fills the form which supports multiple question types which are rendered one by one each on a new line. We want to add support for showing questions in one line.
Technology Stack
-
ReactJs
-
Redux
-
CSS Modules
Code access
Topcoder Connect repo https://github.com/appirio-tech/connect-app feature/subsections-horizontal-layout branch.
Note. We will need the same changes in two branches. So after making changes in this branch, you would have to merge them into another branch, see requirement #4.
Individual requirements
To see where the job has to be done, deploy project locally and navigate to new project form http://local.topcoder-dev.com:3000/new-project/subsection-horizontal-layout. You may register a new user to log in or use credentials provided at the forum.
Currently, you will see, that subsection “Cost Center & Business Unit” will have two questions “Cost Centre” and “Bussines Unit” rendered one by one on different lines https://monosnap.com/file/0DPTtjcIkm4sSVMRpd80JxNUYVBq3j
The desired rendering result should look like this: https://monosnap.com/file/WCJVzgJZimm3L4jiuNkR0sWWtCO6Or
The template JSON which is used to render this form can be checked by URL https://api.topcoder-dev.com/v4/projects/metadata/projectTemplates/28. The part of the template which we are interested in is this one https://monosnap.com/file/aiOnSnpIVn2y6fkEiLbcb4QQWT4j0f
There are few things which have to support at the frontend to render this form as we want.
1. Support of rendering questions in one line inside subsection.
If subsection object with type=”questions” has property “layout.direction: horizontal”.
-
All questions inside such subsection have to be rendered in one line
-
They have to be aligned to left
-
There should be no space between questions by default
Basically, you will need to use CSS flexbox to align questions in one line. Note, that there are a lot of questions types which are very big will look not that good if put them in one line. No worries about that. We will only put in line questions which we know can be small.
Hint: component src/projects/detail/components/SpecQuestions.jsx renders subsection with type=”questions”.
2. Support of adding a custom class for subsections.
If a subsection of any type has property “layout.spacing”. Then the value of this property has to be added as an additional class to subsection block (div). In our template subsection has “layout.spacing: “space”” so this class will be added.
You should define class “space” so it has to add space between questions for subsection object with type=”questions” which has property “layout.direction: horizontal”.
Hint: subsections are rendered by method renderSubSection in src/projects/detail/components/SpecSection.jsx component.
3.Style input fields per design.
If question type “textinput” has property "spacing": "gray-input" than it should have the absolutely same style as REF code https://monosnap.com/file/R62Lk2zofUdseVq9Y9TDS7jdruiAUH
-
same width as REF code
-
gray background
-
bottom border
-
under the field “required” or “optional” text should be displayed depend on “required” property
-
in total, styles should be absolutely same like “REF code”
Note, the style of question type “textinput” shouldn’t be changed by default if it doesn’t have "spacing": "gray-input".
4. Merge result to another branch.
At the moment branches feature/subsections-horizontal-layout and feature/merge-subsections-horizontal-layout are merged.
After you implemented the above requirement in feature/subsections-horizontal-layout branch. We need these changes to be also merged into the branch feature/merge-subsections-horizontal-layout as this branch have changes in the same files you will update, which may create some conflicts (maybe no conflicts).
Visually the result should look the same in both these branches.
General requirements
-
no lint errors
-
no broken unit tests
If you have any doubts or questions do not hesitate to ask in the challenge forum.
Final Submission Guidelines
You will need to submit two patches:
-
patch to the feature/subsections-horizontal-layout branch
-
patch to the feature/merge-subsections-horizontal-layout branch