963199 - input.mozilla.org dashboard uses UA sniffing to block mobile browsers from accessing content

Status: RESOLVED FIXED

(Input Graveyard :: Dashboard, defect)

Description

[Matt Brubeck (:mbrubeck)]

Steps to reproduce:
1. Go to input.mozilla.org on your phone.
2. "Dashboard is not available on mobile devices, yet."
3. What?
4. Come on input.mozilla.org, that's no way to behave.

Comment 1

[Will Kahn-Greene [:willkg] ET needinfo? me]

The current dashboard is too complex for a phone-sized screen, so it's probably the case we have to slim it down in some way. Further the way you interact with the dashboard probably won't work with touch devices very well. I thought there was a bug for this already, but I'm not seeing it right now. I haven't had time to work on this, yet.

If someone wants to work on this, here's the list of things that probably need to get done to move this along:

1. do mock-ups of what the dashboard page should look like and act like on phones and on tablets--they're both "mobile" but the screen size is different and thus it's probably the case we have to treat them differently

2. figure out how to rework the dashboard code such that the user ends up in the appropriate version of the dashboard--if we're not into UA sniffing, then someone has to implement a different solution

3. make the code changes and submit a PR

Hope that helps!

Comment 2

[Matt Brubeck (:mbrubeck)]

(In reply to Will Kahn-Greene [:willkg] from comment #1)
> The current dashboard is too complex for a phone-sized screen, so it's
> probably the case we have to slim it down in some way.

If I spoof my user-agent, I can actually use the dashboard just fine on my phone (which has more pixels than most desktops and laptops I've owned).  I have all my bookmarked searches synced from my computer, so I don't even need to type anything, and Firefox for Android automatically resizes the text to make everything readable.

So while a mobile-optizimed design would be a great, just serving mobile browsers the "desktop" template would still be a lot better than nothing.

> 2. figure out how to rework the dashboard code such that the user ends up in
> the appropriate version of the dashboard--if we're not into UA sniffing,
> then someone has to implement a different solution

Ideally we could serve the same markup to all browsers, and use CSS media queries to tweak the layout to fit various screen sizes.

> 3. make the code changes and submit a PR

I'll do this if I have time.  Thanks!

Comment 3

[Matt Brubeck (:mbrubeck)]

Attachment: Screenshot: Viewing the "desktop" dashboard on mobile

For reference, here's what the dashboard looks like if I do a search with "Request Desktop View" enabled in Firefox for Android, then double-tap on the main column.

Comment 4

[Will Kahn-Greene [:willkg] ET needinfo? me]

I chatted with Mike and Ricky about it. I'm going to grab this and just remove the mobile template decorator. I still maintain the dashboard is not usable on mobile devices, but nixing the mobile template decorator will let you do what you're able to do.

Comment 5

[Will Kahn-Greene [:willkg] ET needinfo? me]

In a PR: https://github.com/mozilla/fjord/pull/200

Comment 6

[Will Kahn-Greene [:willkg] ET needinfo? me]

Landed in master in https://github.com/mozilla/fjord/commit/7d71678

Pushed to stage and production just now.

That solves the primary issue in this bug, so marking it FIXED.

Comment 7

[Matt Brubeck (:mbrubeck)]

Thanks!