Skip to content

Style the versions dropdown for mobile

Sarah German requested to merge 27-versions-mobile into main

What does this MR do and why?

  1. Adds a generic method for collapsible sections (similar to the Bootstrap utility we use on the Nanoc site). We don't want to include all of Bootstrap just for this feature.
  2. Refactors "Version History" components to use the new expand/collapse method.
  3. Adds a mobile version of the Versions dropdown, which also uses expand/collapse.

Closes #27 (closed)

Screenshots, screen recordings, or links to review app

Closed Open
image image

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

  1. Configure a local GitLab Docs environment: https://gitlab.com/gitlab-org/technical-writing-group/gitlab-docs-hugo/-/blob/main/doc/setup.md.
  2. Check out this branch, and run make setup (this MR adds a new dependency you'll need to fetch, and make setup will take care of this)
  3. Verify "Version History" is still expandable: http://localhost:1313/shortcodes/#version-history
  4. Resize your browser window below 992px width. Verify you can open and close the navbar menu, just like the current site. Verify you can use the Versions drop down and click all the links.
  5. Resize your browser back to a wider/desktop width. The navbar should now show the menu items on the right side, without the toggle.

Note: Our expand/collapse method does not have the animation/transition like the Bootstrap one does (ours is more of an open/close versus a slide in/out). We can consider adding this in a follow-up if we decide it's important later on. For now, I think it's OK to keep it more simple.

Merge request acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Closes #27 (closed)

Edited by Hiru Fernando

Merge request reports