From da01aac40764c0227cd48659caea2a5b04803187 Mon Sep 17 00:00:00 2001 From: Jeremy Green Date: Fri, 1 Sep 2023 11:22:26 -0700 Subject: [PATCH] Make the showcase theme selector sticky (#514) * Make the showcase theme selector sticky Adding `fixed` to the theme selector make it stick to the bottom of the browser window instead of being stuck all the way at the bottom of the scroll. But if we _just_ add the `fixed` class, then the theme selector will overlap the content at the very bottom of the page and we have no way to get to it. We can fix that by using a little bit of JS to calculate the height of the theme selector and then set that amount of padding on the bottom of the `main` container. Doing that makes it so that there is a scrollbar if the theme selector will overlap any content at the bottom of the `main` container. And makes it so that you can scroll all the way down and see all of the content. * make it work with turbo --- .../app/views/showcase/engine/_head.html.erb | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/bullet_train-themes-light/app/views/showcase/engine/_head.html.erb b/bullet_train-themes-light/app/views/showcase/engine/_head.html.erb index cff37c3e5..a76bbf18c 100644 --- a/bullet_train-themes-light/app/views/showcase/engine/_head.html.erb +++ b/bullet_train-themes-light/app/views/showcase/engine/_head.html.erb @@ -33,14 +33,19 @@ BulletTrain.theme = new ___theme() BulletTrain.theme.start() - document.addEventListener("DOMContentLoaded", () => { + function placeThemeSelector() { const node = document.getElementById("bullet_train_theme_selects").content.cloneNode(true) document.querySelector("main").appendChild(node) - }) + const selectorNode = document.getElementById("bt-theme-selector") + document.querySelector("main").style.paddingBottom = selectorNode.offsetHeight + "px" + } + + document.addEventListener("DOMContentLoaded", placeThemeSelector); + document.addEventListener("turbo:load", placeThemeSelector);