Make the showcase theme selector sticky #514
Conversation
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.
|
Ok, something is up with my setup then, because I couldn't get this to look right locally in Safari. Let me pull this down and try again. Sorry for yanking it! |
| }) | ||
| </script> | ||
|
|
||
| <template id="bullet_train_theme_selects"> | ||
| <section class="border-t w-full p-4 flex justify-end left-0 bottom-0"> | ||
| <section class="border-t w-full p-4 flex justify-end left-0 bottom-0 fixed bg-white dark:sc-bg-neutral-900" id="bt-theme-selector"> |
There was a problem hiding this comment.
Interesting, it didn't look to me like we needed bg-white dark:sc-bg-neutral-900 because we got bg-inherit automatically from being in main. Also sc-bg-neutral-900 isn't safe since that comes from Showcase's CSS build and would go away if Showcase stopped using it.
There was a problem hiding this comment.
Without those that div is transparent and content shows through it.
There was a problem hiding this comment.
Dang, wut. It seems like we don't really ship dark-mode colors, I tried dark:bg-black but that's kinda too much. I don't know if there's a way to transform colors in Tailwind, it would be nice if we didn't have to muck with the build or pollute application.css.
There was a problem hiding this comment.
I couldn't even get dark:bg-black to do anything. It seemed to fallback to bg-white, which is no good with white text.
|
I also just found out that the container disappears when running with the application.js that uses Turbo when navigating a page. |
|
Also, I just noticed that the theme selector disappears if you click on any of the sidebar links. This happens both in this branch and in |
|
lol, jinx! |
sweet 😂, let me pull your fix down! |
| }) | ||
| </script> | ||
|
|
||
| <template id="bullet_train_theme_selects"> | ||
| <section class="border-t w-full p-4 flex justify-end left-0 bottom-0"> | ||
| <section class="border-t w-full p-4 flex justify-end left-0 bottom-0 fixed bg-white dark:sc-bg-neutral-900" id="bt-theme-selector"> |
There was a problem hiding this comment.
Dang, wut. It seems like we don't really ship dark-mode colors, I tried dark:bg-black but that's kinda too much. I don't know if there's a way to transform colors in Tailwind, it would be nice if we didn't have to muck with the build or pollute application.css.
Adding
fixedto 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
fixedclass, 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
maincontainer.Doing that makes it so that there is a scrollbar if the theme selector will overlap any content at the bottom of the
maincontainer.And makes it so that you can scroll all the way down and see all of the content.