Bootstrap Standard

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

Missing the point guys. Any theme set has to have standard classes common to the theme set. Therefore, any custom classes that are common among the theme set then becomes standard and if bootstrap theme is going to be the base theme, it follows that the bootstrap classes are base standard to the theme set. Does that define standard in our case?

I believe it is safe to say that we are trying to use the standard bootstrap classes and approaches first and foremost because then a theme can be applied seamlessly.

Hi @Anthony_Porter , @sjpadgett , @MatthewVita and everybody else,

Just brought in some bootstrap/responsive work by @zbig01 into the codebase. Mostly used bootstrap classes. The buttons deserve some mention/documentation though since there were several preferences that were designer dependent, so moved these decisions to styling sheets:

position-override gives a hook for style to change placement of buttons. In light/manila style this is ignored and buttons go to left positioned under data entry field. Whereas in @zbig01 's styles this is used to center the buttons.

oe-opt-btn-group-pinch gives a hook for style to pinch the buttons (i think make them more rounded). Not used in light/manila, but used in @zbig01 ’ styles.

oe-opt-btn-separate-left gives a hook to place a space between the buttons. Not used in light/manila, but used in @zbig01 ’ styles.

(note there is also flexibility in how the Cancel links are shown. For example, in light, it’s simple a link (not a button). And in Manila and @zbig01 , some neat work is done to make it a button, but less accented than the Save buttons.)

So, when adding buttons to the bottom of forms, will be important to incorporate these classes.

-brady

1 Like

Perfect and I know this is ongoing process but once done and documented what a boon for consistency in look and feel in future development. @brady.miller Could I go ahead and add your post details to readme we spoke of or is another route being taken for ongoing documentation?

hi @sjpadgett , Go ahead and add this to the readme(I can also do this if you’re short on time). And I’ll put a link to it from the wiki.
thanks,
-brady

If you would, that would be great. I have about four things going on with the LBF bug foremost.

1 Like

Sure thing. Now go and crush that LBF bug :smile:

1 Like