Redesign every input field in ODK-X Surveys to meet ODK-X Design Guidelines

[Cveman1]

The text fields used to enter texts into the ODK-X Surveys need to be redesigned. The input fields need to be updated to match the current ODK-X Design Guidelines. and to review for usability.

Objectives:

• Update the UI to match the current style guide, and new styles introduced in the Outreachy Winter 2022 project.
• Look at Surveys and become familiar with the current input fields throughout the app.
• Provide a redesign of the input fields that meet the objectives.

Design Guidelines: Colours, icons and other user interface elements used should conform to the ODK-X Design Guidelines

These guidelines may be updated during the next Outreachy 2024 project.

Sample

[teelda]

Hello @Cveman1 Can I be assigned to work on this?

Would this task require design screens and implementation of the designs to the applications?

[rukayatissa]

Hello @wbrunette could you please assign me to this task? Thank you so much

[Redeem-Grimm-Satoshi]

Hello @Cveman1 Can I be assigned to work on this?

Would this task require design screens and implementation of the designs to the applications?

Yes, Design and Implementation

[Redeem-Grimm-Satoshi]

Hello @wbrunette could you please assign me to this task? Thank you so much

Go ahead

[teelda]

Hello @Redeem-Grimm-Satoshi @wbrunette @Cveman1 I went through the apps and the design guidelines. I have been able to clone all the repositories and set up my environment on Android studio. I checked the res folder but couldn't find a folder for the styles or text fields. I would appreciate if you could point me to where I can edit the style for the text fields. Thank you.

Next steps Implement the design on the application.

Here is a screenshot of the redesigned screen attached in the issue that was created.

The text fields, fonts and other components follow the outlined styles in the ODK-X Design Guidelines.

[Redeem-Grimm-Satoshi]

@teelda ODK Survey and Tables are currently rendered on a webview, Meaning they use frontend web stack ( html, css, javascript ) not like ODK-X Services written purely in Java ( Android )

You should be looking at this repository: https://github.com/odk-x/app-designer

[teelda]

@Redeem-Grimm-Satoshi @wbrunette I have cloned the https://github.com/odk-x/app-designer repository. From my devtool, I noticed a CSS preprocessor LESS, was used to compile the CSS. I couldn't find the .less source files from the project structure in my text editor. I can see the minified CSS bootstrap.min.css and the source map bootstrap.css.map.

I would appreciate if you could give me a path to locate the .less source files. Thank you

However, I added my styles to the odk-survey.css file and they reflected. Do I push this?

Here's is what I have done to find the source file

• I figured the class for the input field was .form-control, I tried to override the styles from the bootstrap.css this didn't reflect in my browser.

• I searched the project for @import statements to find where the .form-control styles are defined and I didn't find any.

• I checked the Gruntfile.js to look for the configuration for any .less files and I didn't find that. I have npm,less and grunt installed.

This is the image showing the source file in my devtool.

[Redeem-Grimm-Satoshi]

"However, I added my styles to the odk-survey.css file and they reflected. Do I push this? "

Can you provide a screenshot of that first?, the changes you made

[teelda]

@Redeem-Grimm-Satoshi Here is the screenshot of where I added the styles for the text input field which reflected on the web view. I made changes to the text colour, border colour, font size, padding etc according to the styles in ODK-X Design Guidelines.

This is what the current text input field looks like. screen-capture.webm

This is what it looked like before the change

[Redeem-Grimm-Satoshi]

@teelda looks good

[Redeem-Grimm-Satoshi]

"I would appreciate if you could give me a path to locate the .less source files. Thank you" Did you locate it? "However, I added my styles to the odk-survey.css file and they reflected. Do I push this?"Yes send a PR to the required Repo

[teelda]

@Redeem-Grimm-Satoshi "I would appreciate if you could give me a path to locate the .less source files. Thank you" Did you locate it? No, I have not located the path yet.

"However, I added my styles to the odk-survey.css file and they reflected. Do I push this?" Yes send a PR to the required Repo. Thank you, I have sent a PR to this regard.

[rchaurase]

Hello @Redeem-Grimm-Satoshi,

I am an Outreachy applicant and would love to contribute by working on this issue. Could you please assign it to me?

Thank you!

[Redeem-Grimm-Satoshi]

Hello @Redeem-Grimm-Satoshi,

I am an Outreachy applicant and would love to contribute by working on this issue. Could you please assign it to me?

Thank you!

Go ahead

[rchaurase]

Hello @Redeem-Grimm-Satoshi ,

I wanted to let you know that I have submitted a pull request for the redesign of the ODK-X Survey, aligning with the ODK-X Design Guidelines.

When you have a moment, could you please review my PR? If you notice anything that needs improvement or adjustment, I would greatly appreciate your feedback.

[rchaurase]

#214 :https://github.com/odk-x/app-designer/pull/214