[go: nahoru, domu]

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

Code snippets are impossible to read due to 10 letter visible column on mobile #2313

Open
juliankim opened this issue Jan 30, 2019 · 7 comments · May be fixed by #11172
Open

Code snippets are impossible to read due to 10 letter visible column on mobile #2313

juliankim opened this issue Jan 30, 2019 · 7 comments · May be fixed by #11172
Labels
e1-hours Effort: < 8 hrs infra.design Relates to the design of docs.flutter.dev infra.structure Relates to the tools that create docs.flutter.dev p3-low Valid but not urgent concern. Resolve when possible. Encourage upvote to surface. t.mobile Relates to the mobile friendliness of an app

Comments

@juliankim
Copy link
juliankim commented Jan 30, 2019

S9, Android 8, Firefox.

It's nearly impossible to read code snippets on mobile as you can't fully expand, zoom in/out on code snippets.

The most code snippets on the doc are wasting the half, sometimes even 2/3 of screen width with excessive white spaces.

Make sure you get rid of excessive margin, paddings on mobile. Better yet, try to keep things in new lines in block structure manner for each HTML elements. There is absolutely no reason for code snippets to have outside left indentation on mobile.

@sfshaza2 sfshaza2 added the t.mobile Relates to the mobile friendliness of an app label Jan 30, 2019
@sfshaza2
Copy link
Contributor

@chalin, thoughts?

@sfshaza2 sfshaza2 added the infra.structure Relates to the tools that create docs.flutter.dev label Jan 30, 2019
@chalin
Copy link
Contributor
chalin commented Jan 30, 2019

We're almost in the same situation for our other Dart sites. (I'll comment a bit more later.)

@chalin chalin added p3-low Valid but not urgent concern. Resolve when possible. Encourage upvote to surface. e0-minutes Effort: < 60 min e1-hours Effort: < 8 hrs infra.design Relates to the design of docs.flutter.dev and removed infra.structure Relates to the tools that create docs.flutter.dev labels Jan 30, 2019
@chalin
Copy link
Contributor
chalin commented Jan 30, 2019

Here are examples from dartlang.org:
screen shot 2019-01-30 at 13 25 08
screen shot 2019-01-30 at 13 23 24

This is from flutter.io:

screen shot 2019-01-30 at 13 26 49

So we do have a bit more margins on the left and right, but not that much more. I expect that most folks view code in a landscape view like this:

screen shot 2019-01-30 at 13 26 56

Of course the problem is exacerbated by the fact that in some cases we show code excerpts under a bulleted list or a numbered list and that pushes the indentation even further:

screen shot 2019-01-30 at 13 28 05

In conclusion we should adjust margins on mobile, but it would buy us much.
@InMatrix @galeyang @fertolg - any comments about this?

@InMatrix
Copy link
Contributor

@juliankim Could you tell us how often and under what circumstances do you use Flutter's documentation from a mobile phone? We're under the impression that developers use our documentation mostly from a desktop browser. We might be overlooking something here.

@juliankim
Copy link
Author
juliankim commented Jan 31, 2019

@InMatrix it's not just about how often people use it on mobile in my opinion. It's about having a completed, fully functional website, not "half-responsive" website.

I have written my own opinion on LinkedIn.
https://www.linkedin.com/feed/update/urn:li:activity:6496341900012945408

@ened
Copy link
Contributor
ened commented Feb 4, 2019

@InMatrix To answer your question, I often check Flutter docs before heading to bed, or while commuting. RSS feeds often link to interesting articles, which follow up with links to the documentation site.

While a mobile site hardly is enough to go to extreme detail (like, reading the source for some standard widgets), I'm thankful for any website that provides dense content in such context.

@InMatrix
Copy link
Contributor
InMatrix commented Feb 4, 2019

@ened Thank you for telling us how and when you use Flutter's documentation on mobile.
@juliankim We do want to make the website display its content properly on mobile. It's really a matter of prioritization.

I'd say reducing the right and left margin of snippets on mobile could be helpful. The snippet does allows me to scroll it horizontally, FWIW.

@atsansone atsansone added infra.structure Relates to the tools that create docs.flutter.dev and removed e0-minutes Effort: < 60 min labels Jun 10, 2023
@parlough parlough linked a pull request Sep 24, 2024 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
e1-hours Effort: < 8 hrs infra.design Relates to the design of docs.flutter.dev infra.structure Relates to the tools that create docs.flutter.dev p3-low Valid but not urgent concern. Resolve when possible. Encourage upvote to surface. t.mobile Relates to the mobile friendliness of an app
Projects
None yet
7 participants