Skip to content

Commit

Permalink
Add vertical scrollbar to sidebars that extend outside the viewport
Browse files Browse the repository at this point in the history
Viewing overflowing sidebar content requires scrolling the entire page which is annoying and causes the reader to lose their place.

Use CSS `calc` to approximate height of the sidebar (`100vh` - height of the masthead) and apply `overflow-y: auto` to add vertical scrollbars when needed.

Fixes mmistakes#706
  • Loading branch information
mmistakes committed Jul 12, 2017
1 parent 3223203 commit 302a1f5
Show file tree
Hide file tree
Showing 4 changed files with 25 additions and 1 deletion.
6 changes: 6 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
## Unreleased

### Enhancements

- Add scrollbar to sidebars with overflowing content that extends outside the viewport's height. [#706](https://github.com/mmistakes/minimal-mistakes/issues/706)

## [4.4.2](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.4.2)

### Enhancements
Expand Down
6 changes: 6 additions & 0 deletions _sass/minimal-mistakes/_sidebar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,12 @@
&:hover {
opacity: 1;
}

&.sticky {
overflow-y: auto;
/* calculate height of nav list */
height: calc(100vh - 90px - 2em); // viewport height - approx. masthead height - main content top margin
}
}

@include breakpoint($x-large) {
Expand Down
8 changes: 7 additions & 1 deletion docs/_docs/18-history.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,15 @@ permalink: /docs/history/
excerpt: "Change log of enhancements and bug fixes made to the theme."
sidebar:
nav: docs
last_modified_at: 2017-07-07T15:45:45-04:00
last_modified_at: 2017-07-12T11:57:08-04:00
---

## Unreleased

### Enhancements

- Add scrollbar to sidebars with overflowing content that extends outside the viewport's height. [#706](https://github.com/mmistakes/minimal-mistakes/issues/706)

## [4.4.2](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.4.2)

### Enhancements
Expand Down
6 changes: 6 additions & 0 deletions docs/_sass/minimal-mistakes/_sidebar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,12 @@
&:hover {
opacity: 1;
}

&.sticky {
overflow-y: auto;
/* calculate height of nav list */
height: calc(100vh - 90px - 2em); // viewport height - approx. masthead height - main content top margin
}
}

@include breakpoint($x-large) {
Expand Down

0 comments on commit 302a1f5

Please sign in to comment.