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.

Sign up for GitHub

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

Improve doc readability #919

Closed
octref opened this issue Sep 25, 2016 · 18 comments
Closed

Improve doc readability #919

octref opened this issue Sep 25, 2016 · 18 comments

Comments

@octref
Copy link

octref commented Sep 25, 2016

This is how the doc looks on my 15 inch RMBP using half screen. Can't even show a full function definition.

Please improve your media queries or font-size. I'm not a mobile user.

image
@phillipj
Copy link
Member

I can confirm this doesn't look optimal on a retina macbook atm. This is the caused by a media query I assume is supposed to be targeting iPad-ish devices.

@media only screen and (max-width: 1024px) {
  #content {
    font-size: 2.5em;
    overflow: visible;
  }
  ..
}

https://github.com/nodejs/node/blob/master/doc/api_assets/style.css#L463

I don't have a iPad (retina or not) at hand, so I haven't been able to test if the big font size is neccessary on those devices.. It maybe time to re-visit some of these media queries.

/cc @nodejs/documentation

@Fishrock123
Copy link
Member

Looping myself in, I had a go at working on some if the CSS the other week, but didn't finish it yet.

@phillipj
Copy link
Member

@Fishrock123 guessing that work ended up in nodejs/node#8811?

@Fishrock123
Copy link
Member

No sorry, that was for something else. This persists I'm pretty sure.

@diagramatics
Copy link
Contributor

Considering that the font-size could go from 25px to as high as 35px on a portrait oriented iPad, I agree this could be overkill. I'm pretty sure the default size of 18px would already suffice on an iPad, if not, probably just a small bump to 21px.

We could just remove the media queries completely. If that's the verdict I can go and change it.

@octref
Copy link
Author

octref commented Mar 5, 2017

I'm glad to find out changing a few css lines would take more than half a year.

Seriously. Just changing the font-size to 1.6em and it'll look much better.

image

@gibfahn
Copy link
Member

gibfahn commented Mar 5, 2017

@octref care to submit a PR?

@octref
Copy link
Author

octref commented Mar 5, 2017

Not really, and I don't have an iPad to test if the website would look good on iPad (seems the original intent for this media query is to do so).

But it's really just change the value here https://github.com/nodejs/node/blob/master/doc/api_assets/style.css#L490 and make sure it's good on iPad.

gibfahn added a commit to gibfahn/node that referenced this issue Mar 5, 2017
@gibfahn
doc: reduce font size on smaller screens
2365b3f 
The font size for tablet sized screens (or half a laptop screen) is overly
large, reduce it to a more readable size.

Fixes: nodejs/nodejs.org#919
@gibfahn gibfahn mentioned this issue Mar 5, 2017
Closed
2 tasks
@gibfahn
Copy link
Member

gibfahn commented Mar 5, 2017

PR raised: nodejs/node#11695

@bnoordhuis
Copy link
Member

I'm glad to find out changing a few css lines would take more than half a year.

You don't get to use that tone. Most people here are volunteers so pipe down.

@octref
Copy link
Author

octref commented Mar 5, 2017

I apologize. I wish the usability of the doc website can be given more attention and improved, but I could have said that in a less entitled way.

@bnoordhuis
Copy link
Member

No worries. Reading back what I wrote, I could have voiced it in a friendlier way too.

fhinkel pushed a commit to nodejs/node that referenced this issue Mar 9, 2017
@gibfahn @fhinkel
doc: reduce font size on smaller screens
7c8bbe3 
The font size for tablet sized screens (or half a laptop screen) is
overly large, reduce it to a more readable size.

Fixes: nodejs/nodejs.org#919

PR-URL: #11695
Fixes: https://github.com/nodejs/nodejs.org#919
Reviewed-By: Daijiro Wachi <daijiro.wachi@gmail.com>
Reviewed-By: Luigi Pinca <luigipinca@gmail.com>
Reviewed-By: Franziska Hinkelmann <franziska.hinkelmann@gmail.com>
@fhinkel
Copy link
Member

fhinkel commented Mar 9, 2017 •
edited
Loading

Fixed in nodejs/node@7c8bbe3. Looks like I don't have permission to close issues in this repo 🤔

@gibfahn gibfahn closed this as completed Mar 9, 2017
italoacasas pushed a commit to italoacasas/node that referenced this issue Mar 13, 2017
@gibfahn @italoacasas
doc: reduce font size on smaller screens
8a1b2b4 
The font size for tablet sized screens (or half a laptop screen) is
overly large, reduce it to a more readable size.

Fixes: nodejs/nodejs.org#919

PR-URL: nodejs#11695
Fixes: https://github.com/nodejs/nodejs.org#919
Reviewed-By: Daijiro Wachi <daijiro.wachi@gmail.com>
Reviewed-By: Luigi Pinca <luigipinca@gmail.com>
Reviewed-By: Franziska Hinkelmann <franziska.hinkelmann@gmail.com>
jungx098 pushed a commit to jungx098/node that referenced this issue Mar 21, 2017
@gibfahn @jungx098
doc: reduce font size on smaller screens
a9a8522 
The font size for tablet sized screens (or half a laptop screen) is
overly large, reduce it to a more readable size.

Fixes: nodejs/nodejs.org#919

PR-URL: nodejs#11695
Fixes: https://github.com/nodejs/nodejs.org#919
Reviewed-By: Daijiro Wachi <daijiro.wachi@gmail.com>
Reviewed-By: Luigi Pinca <luigipinca@gmail.com>
Reviewed-By: Franziska Hinkelmann <franziska.hinkelmann@gmail.com>
MylesBorins pushed a commit to nodejs/node that referenced this issue Apr 17, 2017
@gibfahn @MylesBorins
doc: reduce font size on smaller screens
2fa63fc 
The font size for tablet sized screens (or half a laptop screen) is
overly large, reduce it to a more readable size.

Fixes: nodejs/nodejs.org#919

PR-URL: #11695
Fixes: https://github.com/nodejs/nodejs.org#919
Reviewed-By: Daijiro Wachi <daijiro.wachi@gmail.com>
Reviewed-By: Luigi Pinca <luigipinca@gmail.com>
Reviewed-By: Franziska Hinkelmann <franziska.hinkelmann@gmail.com>
MylesBorins pushed a commit to nodejs/node that referenced this issue Apr 19, 2017
@gibfahn @MylesBorins
doc: reduce font size on smaller screens
0e13887 
The font size for tablet sized screens (or half a laptop screen) is
overly large, reduce it to a more readable size.

Fixes: nodejs/nodejs.org#919

PR-URL: #11695
Fixes: https://github.com/nodejs/nodejs.org#919
Reviewed-By: Daijiro Wachi <daijiro.wachi@gmail.com>
Reviewed-By: Luigi Pinca <luigipinca@gmail.com>
Reviewed-By: Franziska Hinkelmann <franziska.hinkelmann@gmail.com>
andrew749 pushed a commit to michielbaird/node that referenced this issue Jul 19, 2017
@gibfahn @andrew749
doc: reduce font size on smaller screens
aee1a48 
The font size for tablet sized screens (or half a laptop screen) is
overly large, reduce it to a more readable size.

Fixes: nodejs/nodejs.org#919

PR-URL: nodejs/node#11695
Fixes: https://github.com/nodejs/nodejs.org#919
Reviewed-By: Daijiro Wachi <daijiro.wachi@gmail.com>
Reviewed-By: Luigi Pinca <luigipinca@gmail.com>
Reviewed-By: Franziska Hinkelmann <franziska.hinkelmann@gmail.com>
@octref
Copy link
Author

octref commented Sep 15, 2017

Just pinging people in this thread, this issue hasn't been resolved for a whole year.

How it looks on half of my 15 inch macbook screen today:
image

Relevant CSS:
image

@thefourtheye
Copy link
Contributor

I think nodejs/node#15430 is related.

@octref
Copy link
Author

octref commented Oct 3, 2017

@bnoordhuis This bug just passed its one year birthday. I don't know what tone should I use to express my frustration. I use this layout everyday and nodejs.org/api has been unusable for me for a whole year.

image

@lpinca
Copy link
Member

lpinca commented Oct 3, 2017

@octref see nodejs/node#15660.
All I can suggest is to get you hands dirty if you want to improve things.

@octref
Copy link
Author

octref commented Oct 3, 2017

@lpinca OK I’m glad there is ongoing effort in fixing this. Thanks for linking the issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
9 participants
@fhinkel @bnoordhuis @thefourtheye @Fishrock123 @phillipj @lpinca @octref @diagramatics @gibfahn