Feature - Responsive Dottydoc (Part 1) - Main layout #2052

hhandoko · 2017-03-06T04:57:19Z

Related ticket: #1945

Added better responsive support to sidebar by implementing off-canvas behaviour (i.e. content body slides to the right instead of becoming narrower).

Tested on:

Chrome 56.0.2924.87
Firefox 47.0.1
Safari 10.0.3

…nt body

felixmulder

Thanks for the PR @hhandoko!

I cloned your branch and generated the dotty site from it, technically most of it looks sound :)

I have a bit of feedback and questions before we merge this:

The position of the hamburger icon has changed, we'd like to keep it where it was. Also in moving it, it looks like it lost its CSS styling
The width of the sidebar now feels a bit too wide, what was your reasoning here?
The animation from ☰ to ˿ while nice-looking, doesn't really add anything in its context, I assume it's for mobile devices / something thinner than 767px - maybe it'd look ok with the old styling restored? Let's leave it in for the next iteration of the PR.
In the <767px view the size of the sidebar exposed is huge, I'm not sure if that was intentional or if it looks better on mobile. But we should probably differentiate between rules for mobile devices and smaller viewports on desktops, just a thought

felixmulder · 2017-03-06T12:39:10Z

As a side note - we're using the imperative mood for our commit messages. This means "Add X" instead of "Added X". Here's a quick primer:

Separate subject from body with a blank line

Limit the subject line to 50 characters

Capitalize the subject line

Do not end the subject line with a period

Use the imperative mood in the subject line

Wrap the body at 72 characters

Use the body to explain what and why vs. how

taken from Chris Beams

hhandoko · 2017-03-06T13:25:46Z

Hi @felixmulder,

The position of the hamburger icon has changed, we'd like to keep it where it was. Also in moving it, it looks like it lost its CSS styling.

By CSS styling do you mean :hover styles? I missed it but I can add it back again. I changed the positions since a fixed hamburger icon positioning overlaps with the content body text (it looks less intrusive in the sidebar area). Also, I am taking these cues from Elixir's ExDocs convention [1].

The width of the sidebar now feels a bit too wide, what was your reasoning here?

I felt 250px was a bit too narrow as some package names got cut-off and most class names barely fit, so I added an extra 50px... But you have a good point, probably on narrower viewport width I can reduce it back to 250px.

The animation from ☰ to ˿ while nice-looking, doesn't really add anything in its context, I assume it's for mobile devices / something thinner than 767px - maybe it'd look ok with the old styling restored? Let's leave it in for the next iteration of the PR.

I was looking to give more context with the left-pointing arrow, I've seen it implemented on the old Google Play Store mobile sidebar. Yes, the animation has no functional purpose, I just thought it looks nice 😁

In the <767px view the size of the sidebar exposed is huge, I'm not sure if that was intentional or if it looks better on mobile. But we should probably differentiate between rules for mobile devices and smaller viewports on desktops, just a thought

Yes, it is intentional. As per earlier comments I'll reduce it back to 250px before minimising the sidebar at 576px.

So to sum it up:
[ ] - Add :hover styles to hamburger menu
[ ] - Reduce sidebar width to 250px on 576px < x < 768px
[ ] - Switch to minimise sidebar at x < 576px from x < 768px

Did I miss anything? Let me know if you have any further thoughts.

Notes:
[1] - Example of Elixir's ExDocs output: https://hhandoko.github.io/diskusi/readme.html

felixmulder · 2017-03-06T15:02:20Z

By CSS styling do you mean :hover styles?

I mean:

vs before:

a fixed hamburger icon positioning overlaps with the content body text

Not sure what you mean by "overlaps" in this sentence here is what it looks like on rMBP all up to date browsers:

Also, I am taking these cues from Elixir's ExDocs

I see, let's try to do our own thing 🙂

I felt 250px was a bit too narrow as some package names got cut-off and most class names barely fit

You're right, but then again, 300px is not enough for some projects, so this will be arbitrary - if we keep it at 250px - people can override the CSS on their own docs if need be.

hhandoko · 2017-03-07T00:32:19Z

Not sure what you mean by "overlaps" in this sentence here is what it looks like on rMBP all up to date browsers:

WRT the screenshot, it looks OK when the content body fits entirely in one page, but it becomes an issue on lengthy pages.

Without fixed hamburger menu positioning, the menu gets hidden when the user scrolls towards the bottom of the page. It is especially problematic on mobile devices with lengthy content body, as the user won't be able to minimise the sidebar again without scrolling to the top of the page.
With fixed hamburger menu positioning (i.e. fixed position on top-left of content body), some left-padding must be added to the content body otherwise the menu will appear on top of the content body text / whitespace when the user scrolls towards the bottom of the page.

I see, let's try to do our own thing 🙂

Yes, I'm not saying Dottydoc should copy ExDocs, just that I found that their UI pattern is useful and solves an existing problem given that the primary layout is very similar (as mentioned above).

You're right, but then again, 300px is not enough for some projects, so this will be arbitrary - if we keep it at 250px - people can override the CSS on their own docs if need be.

Good point 👌

Let me know what you think about the menu positioning (above), and I'll update the layout 😄

Actions:
[ ] - Add :hover styles to hamburger menu
[ ] - Reduce sidebar width back to 250px
[ ] - Switch to minimise sidebar at x < 576px from x < 768px

hhandoko · 2017-03-09T00:37:43Z

@felixmulder, any thoughts? ☝️

Tablet (576px <= x < 768px) viewport sidebar is now limited to 250px to follow Desktop viewports whilst still retaining its off-canvas behaviour like Mobile. Mobile viewport (x < 576px) still implements 60% sidebar width.

Instead of specifying specific styles at a viewport width range, e.g. Tablet (576px <= x < 768px), the CSS properties are arranged as such that default CSS properties applies to Mobile, with Tablet and Desktop styles defined within media queries. Mobile-first strategy will ensure more consistency as style resolution will go in one direction, e.g. from Mobile -> Tablet -> Desktop.

The change above, in addition to qualifying `button#menu-toggle` with `div#content-wrapper` parent selector will make the existing CSS easier to refactor removing duplicates, and to swap it into CSS pre-processor languages such as SASS or Less.

Two different `div#content-body` styles was defined, one with only `position: relative` and another with the complete styles. In addition, a `div#content-body` Tablet and Desktop padding style was moved into the relevant media query to make future changes more transparent.

…h `0` Within the CSS file, RGBA property declaration is inconsistent: some with space after comma and some without, some has leading `0` for decimals and some dont'. This change make sure that one style is followed (space after comma and always use the leading `0` in decimals).

Hamburger menu now stays in the content body as per original design. However to prevent overlap with body text, a permanent 30px left padding on the body container has been added.

hhandoko · 2017-03-31T13:14:33Z

The last batch of commits completes the following:

[X] - Add :hover styles to hamburger menu
[X] - Reduce sidebar width back to 250px
[ ] - Switch to minimise sidebar at x < 576px from x < 768px

I've left default sidebar minimisation / collapse at 768px as before as the layout looks really awkward (576px <= x < 768px), as sidebar and content body is split almost equally down the middle.

felixmulder

Thoughts:

Original style of hamburger menu still not restored
Hamburger menu is still "fixed", not "absolute"
Padding increased on content to match new style, not original
We should probably default to closed menu on <768px as you said

Otherwise LGTM 🎉

As per PR review comments (scala#2052) the old hamburger menu style is restored by removing CSS transforms.

As per PR review comments (scala#2052) the hamburger menu positioning is changed back to absolute, which also means the left padding on content body is no longer needed and can be removed.

felixmulder · 2017-04-06T07:17:49Z

Thanks for the hard work @hhandoko! 🎉

hhandoko added 4 commits March 6, 2017 07:14

Added CSS media queries to support off-canvas sidebar

095ea68

Added sidebar toggle interactivity for small viewports

4d96138

Re-added sidebar toggle support for desktop viewport widths

02bd52a

Widened sidebar in mobile viewport and removed extra padding in conte…

9a589da

…nt body

felixmulder suggested changes Mar 6, 2017

View reviewed changes

hhandoko added 8 commits March 29, 2017 10:46

Merge from latest master (9ba9b14)

e6a1540

Move hamburger menu to original location and restore hover styling

b82d5f1

Hamburger menu now stays in the content body as per original design. However to prevent overlap with body text, a permanent 30px left padding on the body container has been added.

Merge from latest master (a0c0b60)

4de63f3

felixmulder suggested changes Mar 31, 2017

View reviewed changes

hhandoko added 3 commits April 5, 2017 15:24

Remove hamburger menu transformation into arrow on expansion

5ba3eda

As per PR review comments (scala#2052) the old hamburger menu style is restored by removing CSS transforms.

Change hamburger menu positioning to absolute

4d45a85

As per PR review comments (scala#2052) the hamburger menu positioning is changed back to absolute, which also means the left padding on content body is no longer needed and can be removed.

Merge from latest master (4f4e373)

b0ef5c2

felixmulder approved these changes Apr 6, 2017

View reviewed changes

felixmulder merged commit e7bad07 into scala:master Apr 6, 2017

hhandoko deleted the feature/dottydoc_responsive_pt1_main_layout branch April 6, 2017 08:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature - Responsive Dottydoc (Part 1) - Main layout #2052

Feature - Responsive Dottydoc (Part 1) - Main layout #2052

hhandoko commented Mar 6, 2017 •

edited

Loading

felixmulder left a comment

felixmulder commented Mar 6, 2017

hhandoko commented Mar 6, 2017 •

edited

Loading

felixmulder commented Mar 6, 2017

hhandoko commented Mar 7, 2017 •

edited

Loading

hhandoko commented Mar 9, 2017

hhandoko commented Mar 31, 2017 •

edited

Loading

felixmulder left a comment •

edited

Loading

felixmulder commented Apr 6, 2017

Feature - Responsive Dottydoc (Part 1) - Main layout #2052

Feature - Responsive Dottydoc (Part 1) - Main layout #2052

Conversation

hhandoko commented Mar 6, 2017 • edited Loading

felixmulder left a comment

Choose a reason for hiding this comment

felixmulder commented Mar 6, 2017

hhandoko commented Mar 6, 2017 • edited Loading

felixmulder commented Mar 6, 2017

hhandoko commented Mar 7, 2017 • edited Loading

hhandoko commented Mar 9, 2017

hhandoko commented Mar 31, 2017 • edited Loading

felixmulder left a comment • edited Loading

Choose a reason for hiding this comment

felixmulder commented Apr 6, 2017

hhandoko commented Mar 6, 2017 •

edited

Loading

hhandoko commented Mar 6, 2017 •

edited

Loading

hhandoko commented Mar 7, 2017 •

edited

Loading

hhandoko commented Mar 31, 2017 •

edited

Loading

felixmulder left a comment •

edited

Loading