Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

x/website: go.dev/play UX regressions on mobile compared to play.golang.org #49829

Closed
theckman opened this issue Nov 28, 2021 · 4 comments
Closed

x/website: go.dev/play UX regressions on mobile compared to play.golang.org #49829

theckman opened this issue Nov 28, 2021 · 4 comments
Labels
FrozenDueToAge NeedsInvestigation Someone must examine and confirm this is a valid issue and not a duplicate of an existing one.
Milestone
Unreleased

Comments

@theckman
Copy link
Contributor

theckman commented Nov 28, 2021 •
edited

Hello,

I am most often looking at Playground code via an Android phone while helping folks learn Go in the Slack workspace. In this workflow I tend to click links shared in Slack, which open up in a Google Chrome-powered web view. After the migration from play.golang.org to go.dev/play, I'm now recognizing some regressions in the user experience on mobile devices that's making it much harder for me to read code when folks are looking for help.

Attached to the bottom of this issue is a screenshot from my phone. Unfortunately, I can't figure out how to load the old UI to do side-by-side comparisons. So, hopefully the screenshot of the current Playground is sufficient.

Here are the immediate things that jumped out at me.

  1. The line number UI elements are visually broken. You can't see the whole number, and I think it's rendering most of them with scrollbars at the bottom?
  2. The line numbers are much larger than before. That may be causing the above problem, and I wonder if we could have them take up less space.
  3. The code text seems larger than before, which may also contribute to item 2, meaning I cannot see as much code on screen at once.

I seem to remember the old Playground having smaller text by default, which allowed me to zoom in if I needed to see something more closely. With the new Playground I'm more frequently scrolling left and right to read shared code which can make it much harder to grok what you're trying to read unfamiliar code.

Screenshot_20211128-093424
@gopherbot gopherbot added this to the Unreleased milestone Nov 28, 2021
@mknyszek
Copy link
Contributor

CC @dmitshur

@mknyszek mknyszek added the NeedsInvestigation Someone must examine and confirm this is a valid issue and not a duplicate of an existing one. label Nov 30, 2021
@rsc
Copy link
Contributor

rsc commented Nov 30, 2021

@theckman, the old play.golang.org site did not have the viewport meta tag, and so mobile browsers rendered it as a desktop-sized site and then shrunk it down to fit the screen. That's clearly sub-optimal in general. The new go.dev/play has the viewport meta tag that tells browsers to actually render the page in the size available on the screen.

The scrollbars under the line numbers I will make go away. A reasonably-sized font is preferable to a tiny unreadable font 99 times out of 100.

@gopherbot
Copy link

Change https://golang.org/cl/367976 mentions this issue: _content/css: hide scroll bars under each line number on phone screens

@theckman
Copy link
Contributor Author

theckman commented Dec 1, 2021

@rsc @dmitshur it still doesn't look right. Line numbers are now getting written over by the code.

Can you re-open this issue as I don't think the CL above fully resolved it.

Screenshot_20211201-102836

@MasterInQuestion MasterInQuestion mentioned this issue Sep 17, 2022
Closed
passionSeven added a commit to passionSeven/website that referenced this issue Oct 18, 2022
@passionSeven
_content/css: hide scroll bars under each line number on phone screens
396281f 
jquery-linedtextarea sets the line numbers to be width 3%
because then it can set the main box to be 97%.
Ideally we'd do something like 3ex and 100% - 3ex
but I've failed to get that to work with the jquery we are using.

On very narrow screens like phones, 3% is too narrow for the
line numbers, and the browser shows a tiny little horizontal
scroll bar under each line number. Make those go away.

Fixes golang/go#49829.

Change-Id: Iccb51a885076d4cbdf91429485960f5ab7790f8b
Reviewed-on: https://go-review.googlesource.com/c/website/+/367976
Trust: Russ Cox <rsc@golang.org>
Run-TryBot: Russ Cox <rsc@golang.org>
TryBot-Result: Go Bot <gobot@golang.org>
Reviewed-by: Jamal Carvalho <jamal@golang.org>
@golang golang locked and limited conversation to collaborators Dec 1, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
FrozenDueToAge NeedsInvestigation Someone must examine and confirm this is a valid issue and not a duplicate of an existing one.
Projects
None yet
Milestone
Unreleased
Development

No branches or pull requests
4 participants
@rsc @theckman @mknyszek @gopherbot