Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents
minLevel1
maxLevel7

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.

How bad was it?

Panel
bgColor#B3D4FF

Clinical

Panel
bgColor#B3D4FF

Registration

Image Added

Image Added

What were the challenges?

  • 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

What effort went into it?

Jira Legacy
serverSystem JIRA
columnskey,summary
maximumIssues20
jqlQuery"Epic Link"=BAH-2438 ORDER BY rank
serverId32584f0f-f83d-3b0b-b91f-826465c6b0b8

How is it now?

Panel
bgColor#B3D4FF

Clinical

Panel
bgColor#B3D4FF

Registration

Image Added
Image Added
Image Added

2193 LOC added2193 L

What’s in the future?

  • 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