Pinging @raff and @SolDevelo team just a check if you have done any work in this direction. How does this affect the OWAs
Need to determine if the Boostrap JS is needed - can the test be to include it then see any side effects
What ui modules need to be updated to include the changes for this?
As this discussion progresses I would to follow it up with a Design Forum to help guide the process. Hoping to tag @dev5@dev4@dev3@dev2@dev1 to provide input.
Man, while reviewing GCI tasks, i have realised that there can be some very good dev1s. Be sure that there are some good things i have learnt from them. Though a few of them may feel shy or inferior to input, but there are those who may even know more Bootstrap than a dev5 like me.
@ssmusoke, I hope all those other devs have better ideas than me about this, because I don’t have a lot to say. I can only really give general advice about this:
I would start by defining more concretely the things you’re trying to achieve, because it will be much easier to analyze specific changes. For example:
Make the refapp UI response to scaling, from a 10" tablet up to 1.5x the current fixed width of the refapp layout
Update things so we can use the latest version of Font Awesome
Introduce xyz reusable widgets into the refapp
For example thinking about a responsive UI, I assume you’d only need to introduce Bootstrap CSS for this. However I have no idea how that will interact with the current refapp style guide in the UI Commons module. If it were me I would spike on one specific page (like the clinician-facing patient dashboard).
I used Bootstrap 3 for the Cohort Module for GSoC 16.
Bootstrap v4 has been in the making for over a year and a half. I don’t know how stable it is but most Bootstrap 3 is the one that’s widely in use right now.
I believe the soldevo made the OWA in Angular which is completely REST based but not sure what ui framework they used.
Bootstrap JS has a bunch of useful feature like ScrollSpys, Transitions, Modals and stuff.
Most likely create a new module? Why would you want to cram boostrap into existing UI functionality? It would only get more buggy and complicated.
Bootstrap’s main advantage is that you can get really good responsivity for webpages provided you use the grid judiciously and have a fair of idea of where and how you would like certain elements to looks in different sizes.
@ssmusoke feel free to ask for more details, would like to take this forward
I greatly love the fact that this advice is coming from a /dev/2
Thank you so much @bholagabbar for sharing you experience with Bootstrap. Please keep it up!
We discussed on the 2017-Jan-23 Design Forum. @bholagabbar volunteered to spike on refactoring the clinician-facing patient dashboard using Bootstrap to help us understand the level of effort it might take to do the same for other parts of the Reference Application 2.6 UI.
@ssmusoke Wouldn’t it be better if we wait for the release of Bootstrap 4?Especially considering the fact that they have major changes in line for the same :Differences between Bootstrap 3 and 4 Otherwise what will happen is that we might end up using something(Bootstrap 3) which might be abandoned in the near future with the onset of Bootstrap 4
Boostrap 4 is still at least 6 months away, and there will be a transition anyway. Once in place, its easier to migrate to v4 than to start from scratch as now
@burke@darius@ssmusoke Alright so I began working on integrating Bootstrap into the Clinician facing dashboard. Before starting off, I decided to check the level of responsiveness in the pages e.i how they change on window resizing.
It seems that the clinician facing dashboard is perfectly responsive. I believe the premise we had arrived to for integrating Bootstrap during the meeting was Reliance on a stable, well known framework for responsiveness, cross browser compatibilty, etc which pointed to Bootstrap.
Seems like all the CSS for responsivity already seems to have been written, presumably in the appui module. We’re using these fragments in the patient.gsp display page in the coreapps module (see file source)
Here are a screenshot from the demo server on mobile. It’s the same when you resize your browser window on your system.
Assuming I were to use Bootstrap get the columns vertically lined up, it would kinda messy because on inspecting the code, we’re using something called firstColumnFragmentssecondColumnFragments which lines up Diagnoses, Vitals, Appointments in the first column and the rest in the others (I think that’s what they do, lots of cross dependencies across appui etc) .There would be quite a bit of clashing CSS written for the same parts of a page.
I hope I was able to convey my point across, I don’t think it makes sense to integrate bootstrap into the existing at all. Currently the views seem stable and responsive. Introducing Bootstrap for responsivity doesn’t make sense because it’s already (seemingly) there.
Feel free to point out anything I’ve missed or any errors in my observation.