DocOps / asciidocsy-jekyll-theme

Jekyll/AsciiDoc port of Docsy theme for scalable technical documentation projects
https://asciidocsy.netlify.app/docs
Apache License 2.0
9 stars 9 forks source link

Frontend fixes #75

Closed briandominick closed 3 years ago

briandominick commented 3 years ago

Resolves #13, #14, #15.

Also adjusts placement of second search field at mobile widths.

briandominick commented 3 years ago

Would love a review from you @faunaee if you would.

https://deploy-preview-75--asciidocsy.netlify.app/docs/theme

faunaee commented 3 years ago

On initial load, viewing at mobile widths, the page header looks like this:

Screen Shot 2021-08-21 at 10 46 02 AM

Notice the horizontal scrollbar just above the "Search non-docs PAGES" field. Mobile users shouldn't have to scroll horizontally to see all navigation elements here.

When I click on the About label I see:

Screen Shot 2021-08-21 at 10 48 57 AM

Now there is a vertical scrollbar in the area and the dropdown's items are cropped. Since the scrollbars are subtle. On my iPhone X, no scrollbars are present at all (at least, not until you try to scroll that area), so it is not obvious that there are more items than just "Theme Background".

Ideally, the dropdown's contents would appear in full, overlapping the header area and extending into the content area as necessary.

briandominick commented 3 years ago

Okay @faunaee I was able to reproduce that in Firefox desktop, and I think I undid all the settings causing that. Here's what I'm seeing now.

asciidocsy-mobile-navbar-fixed

It's not super at extremely narrow widths, as it can crop the navbar, but I don't think I'm going to be able to solve that at this time. We're talking <350px width, which I would imagine is extremely rare.

briandominick commented 3 years ago

I am going to merge this PR so I can get 0.2.1 out the door and start on 0.3.0. If there's anything remaining on this we can reopen.

Thanks @faunaee!

faunaee commented 3 years ago

LGTM! 👍