search

indiana-university / rivet-docs

Website and documentation for Rivet, Indiana University’s design system for web application development
https://rivet.iu.edu/
BSD 3-Clause "New" or "Revised" License
7 stars 3 forks source link

Make header drawer positioned relative to header #134

Closed scottanthonymurray closed 3 years ago

scottanthonymurray commented 5 years ago

While working on the style guide for the Rivet React project we had the need to have multiple headers on a single page which was a bit funny with the way the CSS rules are setup for the mobile drawer. It would always be docked at the top right of the page even if the user had scrolled past it. Normally this isn't a big deal because there's only one header and it is at the top of the page, but I thought I'd share the two simple CSS fixes I added in case it makes sense for inclusion. The two rules can be seen here:

https://github.com/indiana-university/rivet-react/blob/develop/src/docs/documentation.css

An example of this can be found here if you shrink your browser to a small width:

https://indiana-university.github.io/rivet-react/#!/Header/3

The proposed CSS change makes the header have relative positioning so the absolutely positioned drawer is relative to it, and it changes the min-height of the drawer to be 100% of the view height. I haven't used vh a lot so if there's some subtlety to it or if this just doesn't make sense to include in Rivet core feel free to close this out.

zttodd commented 5 years ago

We're going to transfer this issue to the rivet-docs. Generally speaking, there will only ever be one header on a page, so this is something that can be solved with documentation.

scottanthonymurray commented 3 years ago

Closing this issue, as we're migrating to a new header system in Rivet 2.