From 0961cf464ca95f6e26a980afb40816b3b67a99a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Sat, 14 Nov 2020 20:47:36 +0100 Subject: [PATCH] Use CSS to make Table of Contents sticky Originally we were using Foundation's sticky, which wasn't entirely compatible with our way to open/close the Table of Contents because its width would not automatically be updated when the TOC was opened/closed but when users scrolled the page. Using CSS, which is now supported in most browsers, simplifies the matter. On browsers like Internet Explorer, where it's not supported, the content will not stick but other than that it'll work fine. We're also adding `scroll: auto` so when the TOC's height will be large than the page, it'll be possible to scroll it, which users couldn't do in the original version. --- app/assets/stylesheets/legislation_process.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/app/assets/stylesheets/legislation_process.scss b/app/assets/stylesheets/legislation_process.scss index a10744841..0b557a869 100644 --- a/app/assets/stylesheets/legislation_process.scss +++ b/app/assets/stylesheets/legislation_process.scss @@ -384,6 +384,15 @@ .calc-index { max-width: calc(35% - 25px); + .draft-index { + @supports (position: sticky) { + max-height: 100vh; + overflow-y: auto; + position: sticky; + top: $line-height; + } + } + > * { padding-right: rem-calc(20); }