Bug #5590

Mobile/Safari issues with Dominion theme - browse list and home page link

Added by Tim Hutchinson over 8 years ago. Updated over 7 years ago.

Status:VerifiedStart date:09/15/2013
Priority:HighDue date:
Assignee:Dan Gillean% Done:

0%

Category:Mobile
Target version:Release 2.1.0
Google Code Legacy ID: Tested version:2.0.0, 2.0.1, 2.1
Sponsored:No Requires documentation:

Description

I tested on both an iPhone and iPad Mini. On the iPad Mini, it doesn't look like the mobile theme kicks in, so I think some of this relates to Safari rather than mobile per se, but I don't have access to a desktop version of Safari.

- on both, the links from the pull-down "browse" select list don't react. If there is a link underneath the pull-down list, that link will be followed
- on the iPhone, the home page link (logo and site name) doesn't react
- on the iPhone, in portrait orientation, the "browse" button is slightly cut off - the "e" is on the main background so because of the text and background colours it looks like "Brows"
- on the iPad Mini, in portrait orientation, the search box takes up almost the whole width of the screen and the browse button is bumped to the next line on the left - so the selections are almost completely cut off

None of this seems to be an issue with the Archives Canada theme.

dominion_iphone.PNG (93.7 KB) Tim Hutchinson, 11/17/2013 04:36 PM

mobile-browse-menu.png - browse menu dropdown - text not visible, sometimes selects elements behind menu (25.9 KB) Dan Gillean, 09/09/2014 11:50 AM

mobile-button-block-description.png - button block when logged in on mobile (15.8 KB) Dan Gillean, 09/09/2014 11:50 AM

mobile-filter-loggedIn.png - filter button not visible in Dominion theme whether logged in or not. (29.8 KB) Dan Gillean, 09/09/2014 11:50 AM

mobile-dropdown-menus.png - Drop-down menus in main menu open off-screen when logged in on mobile device (19.6 KB) Dan Gillean, 09/09/2014 11:51 AM

mobile-treeview-hover-menu.png - treeview hover appears off-screen in mobile widths (35.2 KB) Dan Gillean, 09/09/2014 11:51 AM

mobile-subjects-reports-etc-dominion.png - right-hand context elements in mobile - not very visible in Dominion theme (17.9 KB) Dan Gillean, 09/09/2014 11:59 AM

mobile-header-loggedIn-370x480.png - how header bar appears/breaks when logged in on mobile (23.3 KB) Dan Gillean, 09/09/2014 12:03 PM


Related issues

Related to Access to Memory (AtoM) - Bug #6225: Archives Canada links (French, contact us etc.) don't app... Verified 01/19/2014

History

#1 Updated by Tim Hutchinson over 8 years ago

Also, on iPhone for both Dominion and Archives Canada themes (including on the beta site), the menu links in the top right corner don't appear, e.g. login and language options.

#2 Updated by Dan Gillean over 8 years ago

  • Category set to Mobile
  • Assignee set to Jesús García Crespo
  • Target version set to Release 2.0.0

#3 Updated by Jesús García Crespo over 8 years ago

  • Priority changed from Medium to Low

#4 Updated by Tim Hutchinson over 8 years ago

Just an update - I was able to reproduce the reported iPhone behaviour using Chrome on an iPhone as well as Safari.

#5 Updated by Jesús García Crespo over 8 years ago

  • Target version changed from Release 2.0.0 to Release 2.0.1

#6 Updated by Tim Hutchinson over 8 years ago

I thought I should add this here:

When a browse page is first loaded, the "filters" button is barely visible - light text against the light background. When you tap on it, it renders correctly, and the facets are visible and functional. The same thing happens after applying a filter.

Screenshot attached, which also shows the cut-off browse button.

As before, this just applies to the Dominion theme, not AC. Tested on an iPhone with Safari and Chrome.

#7 Updated by Tim Hutchinson over 8 years ago

You can reproduce part of this on a non-mobile browser. Reduce the width of the browser screen until the login etc. buttons disappear. At that point, the site logo is no longer hyperlinked.

There's a visual hint what's happening on the AC beta site - reduce the screen width until the "beta" image overlaps the CCA swoosh. That portion of the image will no longer be hyperlinked (which is what you get on a iPhone, portrait orientation).

The pull-down browse links issue seems to be unrelated - those still work in the non-mobile browser.

#8 Updated by Jesús García Crespo over 8 years ago

  • Target version changed from Release 2.0.1 to Release 2.0.2

#9 Updated by Kehan Harman over 8 years ago

I have just run into this issue which is further complicated by the fact that when the user actually clicks into the login box area the device freezes for a couple of seconds and then bombs out of Safari altogether. I have successfully replicated this on http://demo.accesstomemory.org/ on an iPad Mini.

#10 Updated by Kehan Harman over 8 years ago

https://github.com/twbs/bootstrap/issues/5835 seems to indicate that this is a bug with an earlier version of Bootstrap.

#11 Updated by Kehan Harman over 8 years ago

Potential fix and pull request https://github.com/artefactual/atom/pull/2

#12 Updated by Tim Hutchinson over 8 years ago

Nice catch, Kehan. Upgrading bootstrap to 2.3.2 also fixes the issue with pull-down browse button. But I still can't see the login/language area of the screen, and the home page link also doesn't work. That's testing on an iPhone.

Incidentally I also tried bootstrap 3.0.3, but that broke the pull-down browse list in IE (desktop).

#13 Updated by Dan Gillean over 8 years ago

Amazing! Thanks for the pull request, Kehan! Always appreciate your contributions. Jesus is swamped with client work, but I'll try to have one of our developers look at your pull request soon. Glad to hear it will solve a few of these issues - but I imagine this ticket will stay open so we can track and address the remaining mobile layout problems in a future release.

#14 Updated by Dan Gillean over 8 years ago

As a quick note - I am going to want to do a lot of regression testing on this, before we accept the pull request, to make sure that this is not accidentally breaking any layout/formatting/etc. elements elsewhere in the application. However, Kehan and Tim - if you have both applied this to your local environments, I'll be curious to hear about how it holds up throughout the rest of the application - let me know if you encounter any issues/regressions. Thanks.

#15 Updated by Tim Hutchinson over 8 years ago

So far I haven't come across any problems.

#16 Updated by Tim Hutchinson over 8 years ago

Some further progress... while it's the language and user menus that disappear, it turns out that the problem with the home page link not working boils down to the search-bar div. Removing this line in min.css:
#search-bar{white-space:nowrap;position:relative;}
makes the home page link work, and doesn't seem to have any ill effects on desktop browsers (tested with FF 26, Chrome 32, IE 11)

The user menu etc. still disappears – I think search-bar is still involved but I’m not fluent enough with css to figure out how.

#17 Updated by Kehan Harman over 8 years ago

I agree that this does need testing. I hadn't noticed that the home link wasn't working but I did notice that the user menu etc still don't appear unless the device is in landscape view. I propose that the whole top bar gets replaced with bootstrap's .nav-bar or .nav-bar-top class because then bootstrap can convert the menu items into mobile device friendly compacted menus, but that was a much more significant change than the one in the pull request ;) Looking at the history of header.less (where the #searchbar{... above comes from https://github.com/artefactual/atom/commit/5ca860367369084947fb359bfa22c882d04b9207 which aimed at making the search bar more responsive so I guess we just need to be aware of that.

#18 Updated by Kehan Harman over 8 years ago

header.less line 362 the nav buttons get actively hidden with :
nav {
.hide();
}

But that was also part of addition ('Restore responsive properties (Dominon Header)') of responsive design in commit 414c05542e1a7d85bc597ae5ff785b2b567a24aa

#19 Updated by Tim Hutchinson over 8 years ago

Right, from my earlier testing it looks like the home page link not working occurs only with the iPhone, not iPad. But I'm able to reproduce it on a desktop by reducing the width of the browser window until the login etc. buttons disappear.

#20 Updated by Dan Gillean over 8 years ago

  • Priority changed from Low to High

Thank you for all this feedback, Tim and Kehan. This will be incredibly useful. Kehan, we're still hard at work on this end, but we haven't forgotten about your pull request!

#21 Updated by Jesús García Crespo over 8 years ago

Dan, I've merged Kehan's PR: https://github.com/artefactual/atom/pull/2.
Thank you everyone! I can cherry-pick the changes into stable/2.0.x (for 2.0.2) too if Dan verifies.

#22 Updated by Dan Gillean over 8 years ago

I have done some initial regression testing in the site, and so far the only glitch I found that may have been caused by the Bootstrap upgrade was a change in the width of the dedicated search boxes available on the Institutions, Subjects, Places, Authority records, Users, etc etc etc pages. Jesus has already pushed a commit to address this - see: https://github.com/artefactual/atom/commit/6146f0ecca4dc8a992fabac312482b7a44a13b46

So far I haven't found any other problems caused by the Bootstrap update. Thanks again Kehan.

#23 Updated by Jesús García Crespo over 7 years ago

  • Target version changed from Release 2.0.2 to Release 2.1.0

#24 Updated by Jesús García Crespo over 7 years ago

  • Status changed from New to QA/Review
  • Assignee changed from Jesús García Crespo to Dan Gillean

Let me know what you think. Fixed in 698ff4ede.
Tim and Kehan, thanks for the great feedback.

#25 Updated by Dan Gillean over 7 years ago

Tested on 2.1rc2. Tested using an android (Jelly bean) HTC phone, and Dolphin Browser - I then recreated the available screen (approx 370x480, when the browser header is taken into account) size on Firefox using the mobile tools and tested there as well, on my desktop.

The main issue found that relates to something originally reported in this issue has to do with the browse menu - now, when you click the dropdown, no text is visible, and it still sometimes selects elements behind the browse dropdown. see: mobile-browse-menu.png

Note that additionally, I noticed that the filters button, which the facets collapse into on mobile, is not really visible on the Dominion theme - see mobile-filter-loggedIn.png. Note that this is true whether or not the user is logged in.

See also: mobile-subjects-reports-etc-dominion.png - the same thing is true of the right-hand context menu items, which appear as buttons below the description in mobile. Here the text is still blue, so they are fairly visible, but the white button-outlining doesn't come through very clearly in the Dominion theme.

I am also going to add other notes for now, about logged in stuff. In the future, we might open a separate issue about it, but it was never really our intent to have users editing descriptions on a mobile device such as a phone. Adding here for now, in case they become relevant.

  • View of bow header bar appeared on my mobile device when logged in - mobile-header-loggedIn-370x480.png
  • view of button block when logged in on mobile - mobile-button-block-description.png
  • Drop down menus on main menu items open off-screen on mobile - mobile-dropdown-menus.png
  • Treeview hovermenu in mobile device appears off-screen - mobile-treeview-hover.png

In terms of this issue, I think we should try to fix the browse menu issue, and ideally the filter button.

#26 Updated by Jesús García Crespo over 7 years ago

  • Status changed from Feedback to QA/Review
  • Assignee changed from Jesús García Crespo to Dan Gillean

Ok, they should be fixed now, excepting the one in the treeview that I think we should pass for this release.

#27 Updated by Dan Gillean over 7 years ago

  • Status changed from QA/Review to Verified

Going to mark this verified. All the original issues outlined in this issue ticket have been resolved, and then some. There are still improvements that could be made for logged in users on mobile, but this was never something we consciously set out to support - creating descriptions on a small device is not very practical, and in any case the application is still very usable (if not perfectly beautiful for all screen sizes) even when logged in. In the future, if further support for mobile improvements is found, we can revisit this, or file new issues for specific problems.

Thanks Jesús!

Also available in: Atom PDF