Login page not rendering correctly on mobile device

OpenEMR Development
#1

I noticed from login.php that some steps seem to have been taken to convert OpenEMR to bootstrap.

There is bootstrap styling present in login.php (v5.0.0), but I noticed that the page isn’t rendering properly on a mobile device:

image
image360×631 24.1 KB

If you add the following line following <meta http-equiv="X-UA-Compatible" content="IE=edge" /> after the opening <head> tag I think you will see an improvement:

 <meta name="viewport" content="width=device-width, initial-scale=1">

image
image362×675 39 KB

The same can probably done on some other pages with bootstrap, thought it probably won’t help that much if the page contains iframes.

#2

Hello Greg_Zancewicz,
Process of converting the OpenEMR pages completely to bootstrap is still an on going progress. You could find it in the development version (v5.0.1) where the login screen looks good in the mobile view.

Thanks,
ViSolve

#3

Got it. Thanks!

I don’t usually work with PHP - most of what I do is in Rails. Under the Rails framework there is a single template page (usually application.html.erb) that has the head and body code that is served in every page, with a placeholder for whatever location-specific content gets inserted by the controller.

Looking at the OpenEMR code, it looks like that there are multiple templates like this. I noticed this when I was looking at where to insert the viewport meta. Is this normal practice for PHP applications?

#4

It’s just the result of this being a large system with many contributors over time. We are settling on standard practices and making progress each day though :).

#5

Hi @Greg_Zancewicz,

OpenEMR has been around since the 1990s so over time things got unwieldy. Add on the complexity of an EMR system and the lack of framework standards during initial development lead to lots of different rendering.

I’m currently in the process of shifting to the Twig templating system and breaking out the business logic from the view layer; it’s a big task that will take a while, but we’d love any help!

Also, we’re moving migrating to a Bootstrap-standard which should help unify the UI a lot.

As for the mobile device, getting the login page to look good is easy, unfortunately the rest of the program is a different story :slight_smile: