Event logger screen should be more mobile friendly
m-reza-rahman opened this issue · 18 comments
Hi @yashTEF, it looks like the recent UI changes has introduced some usability issues with the event logger date pick functionality. Namely, the screen resolution is now too small for the date pick widget. Can you kindly take a look and address? This used to be fine.
Yes, Will open a PR for the fix.
Note, you will need to skip tests in the Maven build for now. There is another problem that the Jakarta EE 10 upgrade caused that I am working through.
If possible @yashTEF, please try to keep the window resolution compatible with most mobile phones: https://www.browserstack.com/guide/ideal-screen-sizes-for-responsive-design. That was the original intent of the incident logger.
it looks like the recent UI changes has introduced some usability issues with the event logger date pick functionality
@m-reza-rahman , are the above usability issues arising w.r.t. mobile phones(mobile screen resolution) or when testing on the standalone cargo tracker web application?
Just so I understand correctly, the issue is with the size of the date pick widget which needs to be adjusted depending on screen resolution of the device it is opened on?
I actually use both the desktop browser and a mobile emulator. The problem occurs in both places. I think you could just use the desktop and you will see the issue.
Ideally, we want it to be responsive. But in the least you should pick a common mobile resolution and make sure it works nicely there. Currently the date picker widget is too wide to fit.
I don't think #278 actually made a difference. The date picker is still off screen. Here is a screenshot.
I made some changes to align the calendar better, and make it fit the above resolution.
Here's how it is looking:
Does this meet our needs?
I tested on a mobile phone as well and seems to fit the resolution as needed.
I would say submit a PR and I will give it a try.
While #279 helps matters a bit, it's not quite there. If you manipulate the date a bit (such as moving to the next month), things go off screen again. Also, in general things are now off screen (hence the horizontal and vertical bars that are now always there). For example, the top progress bar I think is off screen most of the time.
@m-reza-rahman , The problem is arising I think due to the height of the widget and it changing as we change the month.
For the the time being the following css rule which I added may be removed for better functioning.
body .ui-datepicker.ui-input-overlay {
margin-top: 30%;
}
The position of the widget will still change while switching months but it will be better.
In the meantime, I'll try to find a way to reduce the height of the Datepick so changing months does not cause problems.
OK. Please do take a look at the progress bar situation too? Maybe it's too wide?
OK. Please do take a look at the progress bar situation too? Maybe it's too wide?
I did not quite get the issue with the progress bar, Is it about the the top panel which displays which stage we are in in the event logger or the header of the date pick which displays the month?
The top panel. Now it pretty much always scrolls off screen. Maybe changing the theme is causing this and now it needs to be adjusted?
@m-reza-rahman , I think just changing the offset attribute for the enclosing div tag of the image would provide the needed effect.
Specifically, changing ui-g-offset-5 attribute to ui-g-offset-4 should be enough to center the logo.
<div class="ui-g-offset-5 ui-g-1">
<h:graphicImage value="#{resource['/images/CTlogobadge128.png']}"
height="68" alt="Cargo Tracker logo badge" />
</div>
Sounds good. Give it a shot and I will test it?
Addressed well enough by #281.