Doctor Mobile Adoption

Why do we need this?

Originally developed for screen sizes upper than 9’’
Doctors have been using it on their mobile phones
Few of the screens were broken on mobile phones making it difficult to use
Doctors who are frequently mobile, need better rendered screens/modules on smaller screen sizes.

We have identified key areas(Clinical module) to be fixed, which provides a better experience for doctors and eases the use of Bahmni on mobile.

Patient Dashboard

Consultation - Observations

Certain designs like the header, tabs had to be redesigned and re-implemented for mobile
Tables used across Consultation did not support wrapping content to next lines for lower screen sizes.
The styling has been very rigid and supported fixed layouts instead of being fluid.
Styling is done in a way that makes it hard to modify/maintain -
- Box sizing was set to content box making it harder to maintain widths
- CSS is heavily nested making understanding & overriding difficult.
- Media queries, fonts, colours etc are not standardised.
- Layout heavily relies on float and elements are wrongly floated causing disruptions while wrapping content across to the next line

key	summary

Loading...

Refresh

60 + commits

9 Pull Requests

2300 + Lines of Code modified

2193 LOC added

Create a component library - This can either be in react or framework agnostic (Web components – custom elements principle)
Establish a theme - define typography, breakpoints, colors palette, buttons, and other basic building blocks.
Define global styles, helpers, mixins and grid.
Follow Atomic design and SRP principles.
Have strict rules in place - For both logic and styling. Add stylelint and prettier.
Adopt typescript instead of javascript

OC added