Bootstrap Standard

I understand what you are saying. Thank you very much for the advice. I
really appreciate it. :slight_smile:

Sherwin
757-328-2736
Open Med Practice

   www.openmedpractice.com

OpenEMR Simplicity at its best in cloud based EMRā€™s
ā€œFor those who believe, no proof is necessary. For those who donā€™t believe,
no proof is possible http://beingsaved.org/innercoc.va.ā€

This will be very handy to have since I just ran into this very thing
during the UI upgrade I just did.

Again, thanks for the education. It is truly priceless to have such
guidance.

Sherwin
757-328-2736
Open Med Practice

   www.openmedpractice.com

OpenEMR Simplicity at its best in cloud based EMRā€™s
ā€œFor those who believe, no proof is necessary. For those who donā€™t believe,
no proof is possible http://beingsaved.org/innercoc.va.ā€

Hi,

@juggernautsei , I placed a review on your procedure ui, which looks really nice and also maintains the flavors of the chosen custom themes:

@mdsupport and others, still working on the header template in order to make the ui libraries a 1 liner. Have a PR going with 2 examples (1 without the datetimepicker and 1 with); figured we can also use it to bring in other standard styling libraries(so, 2 lines of code to bring in all standard ui libraries such as datetimepicker,knockout, etc.). thoughts?

-brady
OpenEMR

ok,

My PR is testing well and ready to go into the codebase if the community agrees with this strategy. Note that there was a label class that was clashing with the bootstrap label class and doing weird things. So I basically renamed the OpenEMR class to label_custom . Can see the PR here:

-brady
OpenEMR

btw,

@juggernautsei 's procedure ui improvements were really nice and was just brought into the codebase.

To provide another example of the standard header user, I also worked this into the improved procedure ui code here to show another example:
https://github.com/openemr/openemr/pull/587/commits/ff0f88f266fe7575e05b11a3b15d894938ce4606

To see the code, click on the github.com/openemr/openemr link at the top of the above graphic.

-brady
OpenEMR

Hi,

I just brought in the above standard header template with example code into the codebase.

There is now a really nice pull request by Robert that does a full conversion of the procedure order form to bootstrap (just a couple minor bugs to work out before it goes into the codebase):

-brady

Frequent complaint about layout forms is the rigidity in display imposed by 4 columns table. In the templates it would be better to include Bootstrap v4 cards (or panels in v3) as basic UI unit to display or edit related groups of items.

That is a great suggestion! Do you have some code to share on how to accomplish this?

Bootstrap site has many examples. Like all bootstrap components, you can convert existing code by simply wrapping containers with card or card-group class. One of the obvious target would be deconstructing demographics or encounter screens and giving sites flexibility to control display of various blocks as per local practice needs.

Iā€™ve been tinkering with how to use bootstrapā€™s grid system for layout based forms, it is what Iā€™ll likely attack next after we get the buttons wrapped up

1 Like

@robert.down from what I can tell, the LBF has no specific CSS assigned to it. Is that a correct assessment? Just want to pick your brain. Looking at the new.php line 526 there is a css reference there class=ā€˜sectionā€™. This style reference can be found in style_light.css line 291.

Are you planning to bring overwrite the styles that are embedded in the code like line 526?

I am not much of a designer by nature. Just trying to hear what your approach is going to be to fix this section of the program.

Although lbf has no specific css, it has a rigid table structure which plays havoc as display size starts getting smaller. On larger screens, display does not utilize full screen effectively.

Fixing any of these issues requires a mapper class that will allow data level access to label / value pairs. At present, we get a complex html code.

Just so you all know, this thread/project is linked in the core roadmap:

http://open-emr.org/wiki/index.php/Roadmaps#OpenEMR_Project_Roadmap

If youā€™d like to, you can adjust the top post in the thread to be similar to the other linked projects. This is a great example: Intelligent Chart Summarization

-m

I have a bootstrap version of the Flow Board coming that will integrate into openEMR. It will not require MedEx but for those who use MedEx it will light up with all the messaging progress icons. Iā€™ll push it out soon and hopefully it can be reviewed for 5.0.3.

1 Like

hi @rmagauran ,
Looking forward to it. This is also a good reminder for @robert.down to touch up your styling in the Messaging gui:

1 Like

looks very promising, thanks for all of the work so far @rmagauran

noticed in the medex api readme that said medex is already included in 5.0.0(3) but didnā€™t find it on a quick github search

Brady and Robert are doing the review and getting the css to conform to the UI.

The latest code is at here:

The bootstrap patient tracker is just a facelift to match look and feel with the Recall Board. It is ā€œresponsiveā€ and can be used on any size display.

We have been beta testing MedEx for the last 2 months. It is pretty much ready to go for 5.0.3 or whatever the next release is (5.1?). (But there are some benefits to being a beta tester!) We have to re-bundle the release packages for earlier versions of openEMR so it can be used if you donā€™t want to or canā€™t upgrade to the latest codebase. Of the current beta site, one is an openEMR ver 4.2 production server and it all works (Recall Board, Flow Board, SMS/EMAIL/Voice messaging) without issues.

good to know @rmagauran, thanks for the reply

Yes bootstrap needs to be first and foremost before any user setting. I wouldnā€™t worry about trying to be ā€œstandardā€. Just focus on making it a lot better. You can even use some parallax if you need to just to kick it a notch. Similar to our portal page we can not get to work with patients and just us lol. If youā€™ve seen the page.

It adds some edge to the application keeping it interesting thus not confusing to navigate because the main header is used throughout the app.

Check out the website and you can see where Iā€™m coming fromā€¦

twpag.com

Website looks nice.

Worry about trying to be ā€œstandardā€

Ah, there may be some context missing here. We are trying to make the entire system look and feel seamless so we need to standardize the bootstrap theming and design language in our system.

ZBig and Robert have been doing excellent work in this space. I encourage you to join them! Let me know