Gsoc 2019: Bootstrap as a foundation for Reference Application UI Project

Here is the link to the work done by some community members Kickstarting Integration of Twitter Boostrap for Ref App UI for 2.6 for context and background

Yes as @darius mentioned we can keep both style guide and move forward with bootstrap.So for now we are not replacing the gsp pages ? Keeping the same and adding support for bootstrap or new jsx pages or html pages with ajax calls will replace the components.

Hi @ssmusoke @jwnasambu I went through the patient summary page to do the changes that @darius mentioned.To check with the bootstrap cdn.But the basic template of pages are extracted from the project (Header , Body) [https://github.com/openmrs/openmrs-module-appui]

and the actual style changes are in the project [https://github.com/openmrs/openmrs-module-uicommons]

for the continuous development it’s recommend to add the projects to the watched-projects normally these modules except uicommons is working as expected as when added to watched -projects.

Would like to know am I missing something to bridge the reference app and core apps with ui-commons module.

And all I was been able to recreate the changes that @darius has done but without the sass change on the ui-commons.As I mentioned previously the sass changes are not reflected. Hm is there a way to compile the sass files other than that all changes are done as it is from the code level it self.

@ssmusoke @jwnasambu And this is how it looks like on patient summary page.

Web-Chrome

iPad

iPhone 5SE/5S Screenshot%20from%202019-05-12%2018-31-12

And this is login page

Web chrome :-

IPad

IPhone 5s

@ssmusoke , @jwnasambu And the next thing I want to know is are we removing the gsp pages and making them pure react or html components.And the code changes for the above screens are also done.

@ayesh Nope this project is not making structural changes to pages and existing components, it is focused on providing styling that can is based on a commonly used framework.

The existing legacy UI should not be affected

Sure thanks @ssmusoke can you let me know about the changes that I have done above for patient summary page and login page :slightly_smiling_face:

Where is the code for me to review?

Yeah thats true :smile:.Shall I create a PR and the thing is it has changes on multiple projects hope it’s ok @ssmusoke :slightly_smiling_face:

You can use https://issues.openmrs.org/browse/RA-1285 for the dashboard and create one for the login page.

Whatever tickets you will create will be tied to the epic https://issues.openmrs.org/browse/RA-1586 (which is the highest level ticket for this effort)

1 Like

Awesome thanks alot :crossed_fingers:

@ssmusoke @jwnasambu this is the Jira issue for the login page :-

And these are the PR with respective changes :

@ssmusoke @jwnasambu this is the Jira sub task for the patient summary page :-

And these are the PR changes :

Am just going though the changes you have made.

1 Like

Btw I think it will be good to have these changes on separate branches.Because integrating the bootstrap to the ref app is breaking the current styling in all pages.So have to fix them all and then should be pushed to the master branch.What do you think on this @ssmusoke and @jwnasambu.

@ayesh I do not understand what you mean. The changes are already on different branches in each module

You are right. Could this be of help?

No what I mean is till all changes done for the dashboard we must not merge these changes to the master.It’s good to keep all changes merged in to a new branch like bootstrap-integration and after doing changes to all pages are done then that branch can be pushed to master.Because with bootstrap integration styling breaks on all pages.

For example this is how the home page looks like now

so until these changes are done we can’t merge it with master hope it make sens.