New tick flow - "Log Ascent" button not visible on small screen device #4143
Labels
2: Bug fix
Feature that does not work as intended, broken UI, problem that detract from normal user experience
Area: Logbooks Ticking & tick lists
Summary
When attempting to log ascents using the new tick flow UI on a small screen device (320px wide by 568px high), under certain conditions noted below, the Log ascent button is not visible, and ascents cannot be logged.
NOTE: I first raised this issue in the forum for release 104.
Screenshots
The following screenshots were taken on my iPhone (details below) while trying to log an ascent for Freeloader (The Sanctuary - Flinders Peak).
Tick interface scrolled all the way to the bottom (portrait layout)
NOTE: The last UI element visible is the Show advanced fields checkbox.
Tick interface scrolled all the way to the bottom (landscape layout)
NOTE: The last UI element visible is the Show advanced fields checkbox.
Device Details
Further investigations
I investigated whether I could use the new ticking interface on my desktop browser (Chrome). As expected, everything renders just fine. So logging ascents is (of course) possible on desktop.
Next, I used the Chrome developer tools on my desktop machine to emulate a device with the screen resolution of my iPhone (viewport of 320 x 568 pixels). This layout also correctly showed the Log ascent button, so there appeared to be no fundamental problem with small screens.
I then went back to my iPhone to confirm that it was indeed failing to show the Log ascent button. I tried to log my ascent for Freeloader, and again the Log ascent button was not visible.
But, when I scrolled the dimmed page behind the modal tick interface (not the tick interface itself) towards the bottom of the page, Safari hid/minimised the back/forward and address bar controls that are located at the bottom of the screen (visible in the first attached screenshot). With those browser controls hidden, the Log ascent button finally became visible.
It appears that the Safari browser navigation controls can obscure the Cancel and Log ascent controls of the tick interface. These browser controls dynamically show/hide as the user scrolls up and down the page.
The trick of scrolling the backing page is not a trick that the average user is likely to find (at least not on a small screen device where there is little of the backing page visible), and is somewhat finicky. So, while it is possible to work around this UI issue, it definitely degrades the UX (not being able to log an ascent is a very frustrating user experience).
Possible solutions
I have looked at some of the CSS that is being used to provide the tick interface modal dialog, and some possible solutions could involve one or more of the following:
top: 100px
is being set fromportal-1.1.92a.css:1817
, which appears to be overriding a previoustop: 20px
set fromportal-1.1.92a.css:879
@media (max-width: 767px)
.modal-footer
clear of the Safari browser navigation controls, at least in portrait layout. Landscape layout may still not work right, but I don't think many people would want to use landscape on small screens anyway..modal-body
could be reduced60vh
50vh
would work.modal-body
to the outer.modal
(or.modal-complex
) by changing whereoverflow-y
is appliedI'm sure that there are probably other solutions, and/or the one's that I have suggested aren't valid for one reason or another. Just thought, I would have a bit of a look, in case it could be of assistance.
The text was updated successfully, but these errors were encountered: