Your thought on new Reference Application Login page.

Development
1

Hello Everyone, as we look forward to redesign the reference application in a bit. Here are key reasons why a redesigned Login page was necessary.

1 Built with React and Redux. Its allow developers get started without having to learn custom openmrs UI framework.

2 The new Login page uses Bootstrap 4 and SASS unlike the old one

3 Its responsive, uses a fluid layout and looks good on a tablet or phone

Looking forward to your feedback

Old Login Page on Desktop

17 AM
17 AM2420Ă—1448 163 KB

Old Login Page on Mobile 01 AM

New Login Page on Desktop

26 AM
26 AM2382Ă—1398 138 KB
27 AM
27 AM2350Ă—1380 167 KB

New Login Page on Mobile

43 AM
43 AM908Ă—1036 37.4 KB

cc @dkayiwa @malmike @justmesam @patrick @annette @elbertbiggs360

1 Like
2

It will be an amazing improvement to the Reference application :slight_smile:

But It felt, we are missing the fixed width of the body part(white area) for the PC view :worried:. Shall we keep that width of the PC view body part as usual to maintain the consistency? (I think, We can change the width of the body using some JS scripts based on the user device) Other than that, the Mobile view is a good one according to the design.

  • Keep the Login button to right margin align for PC view and keep the Login button to the center margin for Mobile view
  • Better to follow the default buttons styles for OpenMRS refrence application
3 Likes
3

Thank you @suthagar23 for the feedback. :smiley:

4

Thanks for the demo - just wanted to make a suggestion on the approach.

I assume that this is part of the process to get the Login, Home Page and patient dashboard pages to use modern techniques.

  1. Following the design call, the plan is to leverage this module, https://github.com/openmrs/openmrs-web-style-referenceapplication by Rafal to provide the css and JS for OWAs
  2. Use Twitter Bootstrap 4.0 as a foundation for the UI components
  3. Build a RefApp theme which mimics the look and feel of the current RefApp even if not pixel-by-pixel which will be the basis of other OWAs.

This way everything that is done will provide a foundation that all other OWAs will congregate to.

@darius @wyclif @burke @dkayiwa Please help me confirm if this approach is consistent with the discussions on the design call… I am hoping that one OWA is done as the “reference” sooner than later

1 Like
5

The current look&feel is prettier IMHO. Using React does not imply that CSS should change too.

6

@ebuka Apologies for sounding like a broken record, but are the designs based on Twitter Boostrap as the lowest foundation for widget designs and responsiveness?

7

Yes @ssmusoke. Bootstrap 4 is the lowest foundation and was used for responsiveness.

I wrote some custom css as well

2 Likes
8

Can we use placeholders instead of separate labels for the input fields? For example, look at bootstrap’s login example page.

Also, does bootstrap provide a drop down selector other than the native one (for location selection)?

9

Your feedback has been noted. Bootstrap doesn’t provide drop down selector, however the native one can be styled to have a better look.

10

@ebuka There are native Boostrap dropdowns http://getbootstrap.com/docs/4.0/components/dropdowns/

11

@burke 's suggestions is brilliant in the context of space utilization ,it’s simple and straight forward for the user.I have loved it, coupled with the default theme of RefApp @ssmusoke 's observation would make it great.

12

Looks good. I’ve always thought that it would look better if we use flat icons instead of the 3D ones in the homepage. Just a suggestion.

13

Looks good.