Use more horizontal space on smaller screens

[zachallaun]

Hi there! I tend to spend a lot of time browsing HexDocs on my phone and have been wanting to do a quick pass to improve the use of horizontal space on smaller screens. This PR is the result of that.

• Decrease size of left gutter, allowing hamburger to overlap content.
• Full-bleed code blocks.
• Full-bleed admonition blocks.
• Tweak various mobile styles.
• Improve transition effect when opening/closing sidebar.

I don't love how the hamburger overlaps headers, especially when navigating to an anchor link, but I think the trade-off is worth it here. (Before/After screenshots to follow.)

[zachallaun]

Before	After

[josevalim]

Yeah, unfortunately I am a 👎 on the gutter changes. Which other changes make sense without the gutter change?

[zachallaun]

No worries! I'm not sure any of the other changes are much of a win without the gutter changes, so probably best to close this if that won't move forward.

For my own understanding, could you share what you specifically don't like about these changes? I think the sidebar icon overlapping is definitely not optimal, but that may be a problem with a solution if it's the primary point of contention. If you are against more full-bleed blocks/etc however, then I think it's definitely safe to close this.

[josevalim]

Sorry for not being clear. I was mostly agreeing with you on the overlap. :) The other ones I don't have an opinion (so I would be glad to hear from the community).

[DavidOliver]

These changes make sense to me (at small viewport widths when in portrait orientation). An extra word or two on each line makes a significant difference to the reading experience, eh?

Edit: I also like the full-bleed blocks at this width for the same reason.

As width is more limited and probably more valuable than height at this viewport size and orientation, to avoid the overlap of the hamburger menu perhaps a solid background could be added, either to just the menu icon as a square (which might be weird/annoying?) or as full-width?

By the way, nice keyboards!

[cw789]

I also find the gutter on small screens just for the menu icon wast of space. But still think the overlay of the icon (also with solid background) problematic.
I personally would prefer a header bar taking the space containing the menu icon and probably the search bar or icon and additionally the settings icon. Perhaps a bit inspired how mdBook is doing it.
In my opinion taking horizontal space is much less problematic in the contrast to have the benefit having the headline as very first element on the pages.

[josevalim]

@DavidOliver a full-width background around the hamburger sounds like a good idea to me. Perhaps as a gradient so it feels more like a blend-in? I also like the full-bleed but I would only for it for code blocks for now (and the copy button should still be aligned to whatever is left of the gutter).

@zachallaun what do you think about these changes? :)

[zachallaun]

I think a full-width background around the hamburger would be fine, especially since there's already room for it at the top of the page. We'll have to pull some margin tricks to make sure that it doesn't appear on top of headers when you visit an anchor link, but should be very doable.

@josevalim To make sure I understand, requested changes are:

• Full-width background for hamburger icon
• Align code block copy button and anchor link icons

Could you expand on the last one? Do you mean the copy code button for code blocks? That is currently still in the top right of the code block, same as previous. The copy-anchor button for headers, however, has moved to the right because the gutter is pretty narrow for it now. I'll get a screenshot in a moment, currently figuring out a style bug I introduced when rebasing main into this branch 😅

[zachallaun]

Copy code	Anchor link

[zachallaun]

Have a gradient background set up and adjusted anchor link positioning. Here's a sampling of screenshots:

[josevalim]

Please keep the gutter for admonition and code. :) I will write more soon!

[josevalim]

Could you expand on the last one? Do you mean the copy code button for code blocks? That is currently still in the top right of the code block, same as previous.

I mean to say that the copy button for anchors and for code should have the same alignment from the right, that's all. :)

[josevalim]

The gradient looks great. I think we can move the hamburger a bit more to the left. It should not be aligned to the text because it is not part of the text... unless you believe it looks weird?

[zachallaun]

Please keep the gutter for admonition and code. :) I will write more soon!

Sorry, did you mean keep it for admonition and the function headers, and let code blocks be full-width? I believe this is what you said earlier, "I also like the full-bleed but I would only for it for code blocks for now..."

I mean to say that the copy button for anchors and for code should have the same alignment from the right, that's all. :)

Got it! Right now the anchor link is a bit further to the left than the copy buttons; I'll try to align them.

I think we can move the hamburger a bit more to the left. It should not be aligned to the text because it is not part of the text... unless you believe it looks weird?

I don't feel strongly. Here's what it looks like if we don't align it to the text:

[josevalim]

Sorry, did you mean keep it for admonition and the function headers, and let code blocks be full-width?

Sorry :( My communication is not the best today. I meant to keep full-width as both look great.

Here's what it looks like if we don't align it to the text:

I like it. Thank you ❤️

[zachallaun]

Okay, got it! I'm going to clean a few more things up and then will post an updated set of before/after screenshots to evaluate.

[zachallaun]

Updated screenshots:

Before	After

[josevalim]

Hi @zachallaun, everything looks great! I would only remove the full-width for the function/type signatures (the purple boxes). That's what I meant to say in the past but I failed in portraying this information correctly 3 different times (apologies).

Also, just to double check, does it also work on day mode? :)

Thank you very much! ❤️ Once the full width is removed, I will merge and ship a new beautiful version!

[zachallaun]

Hi @zachallaun, everything looks great! I would only remove the full-width for the function/type signatures (the purple boxes). That's what I meant to say in the past but I failed in portraying this information correctly 3 different times (apologies).

Hah, understood now. =) Not just your fault -- My comprehension definitely could have been better.

Also, just to double check, does it also work on day mode? :)

Yep, it does! If you (or anyone else reading) wouldn't mind building the docs and poking around a bit before merging, I'd appreciate it. Want to make sure that there isn't something obvious that I've missed.

I'll remove the function signature changes now.

[josevalim]

💚 💙 💜 💛 ❤️

[josevalim]

Yep, it does! If you (or anyone else reading) wouldn't mind building the docs and poking around a bit before merging, I'd appreciate it. Want to make sure that there isn't something obvious that I've missed.

I will just merge for now then and hexdocs.pm/elixir/master should use ExDoc master once the next commit lands. Then we can all take it for a spin. :)

[josevalim]

The preview is live: https://hexdocs.pm/elixir/master/Kernel.html

feel free to share it online and collect feedback!

[zachallaun]

@josevalim awesome! Already found one tiny bug: there’s like a 1-2px horizontal scroll due to the code blocks extending slightly past the edge of the screen. I’ll try to get a fix in tonight for it.