When the window width of the browser displaying any of our docs is below 1024 px, the page attempts to save space by hiding the left side table of contents under a menu, and it also removes the top bar that displays your location in the site structure (e.g. "Home / Quick Docs / Fedora Quick Docs") as well as the Edit this Page link and the language selection drop-down. The location isn't really important, but the latter two are, so we should find a different way to save space on narrow screens.
The same CSS also always shows the sidebar button at widths below 1024px, even on pages with no sidebar.
Wider page:
<img alt="Screenshot_from_2020-08-26_16-33-30.png" src="/fedora-docs/fedora-docs-ui/issue/raw/files/4bbcb89f4de82b72bf2527213f2fef8d2fdbda486b53c27b9e1bcc5c7083fff5-Screenshot_from_2020-08-26_16-33-30.png" />
Same page, narrower:
<img alt="Screenshot_from_2020-08-26_16-33-45.png" src="/fedora-docs/fedora-docs-ui/issue/raw/files/ca974d7de53ef1367a840f5a2c5b5947df169f4d6dbb000a11c2fdcdada4616e-Screenshot_from_2020-08-26_16-33-45.png" />
Landing page, narrower, initial load:
<img alt="Screenshot_from_2020-08-26_16-34-02.png" src="/fedora-docs/fedora-docs-ui/issue/raw/files/3edb483970d049a5f8d987c8a51eaf25caa22cda411b101edf2c26a58447db40-Screenshot_from_2020-08-26_16-34-02.png" />
After clicking the button, "open" sidebar state (button replaced with close/back arrow):
<img alt="Screenshot_from_2020-08-26_16-34-16.png" src="/fedora-docs/fedora-docs-ui/issue/raw/files/f33a7d8ca62dcae41d814b12f66100d1b94acf2687d005e4821ba0ba54f89658-Screenshot_from_2020-08-26_16-34-16.png" />
Hi, I am an Outreachy Applicant and I was trying to fix this issue.
This is a styling issue and I tested that from browser's developer tool. Now the problem is, we have to make changes in /public/_/css/site.css file that comes from this bundle https://asamalik.fedorapeople.org/ui-bundle.zip and this URL is mentioned in /site.yml file, which is being downloaded using docker when we run ./build.sh . Should I add custom CSS? OR kindly provide me the repo URL of that bundle so that I can make the changes accordingly.
@aghasaad04
I think you're in the right place. This repo contains a src/css/ directory with the files used to generate the Docs site's https://docs.fedoraproject.org/en-US/_/css/site.css (though it's broken up into multiple source CSS files that get imported together into the final site.css).
src/css/
site.css
For example, I can see the CSS that controls the visibility of the "Edit this page" link starting on line 68 of toolbar.css, here: https://pagure.io/fedora-docs/fedora-docs-ui/blob/master/f/src/css/toolbar.css#_68
toolbar.css
yes @ferdnyc, I have created PRs related to this.
#33 merged. Thanks!
Metadata Update from @darknao: - Issue status updated to: Closed (was: Open)
Login to comment on this ticket.