Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make the showcase theme selector sticky #514

Merged
merged 2 commits into from
Sep 1, 2023
Merged

Make the showcase theme selector sticky #514

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
77c5e11
Make the showcase theme selector sticky
jagthedrummer Sep 1, 2023
6a3f8bf
make it work with turbo
jagthedrummer Sep 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion bullet_train-themes-light/app/views/showcase/engine/_head.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,13 @@
document.addEventListener("DOMContentLoaded", () => {
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"
})
</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">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Without those that div is transparent and content shows through it.

CleanShot 2023-09-01 at 12 58 01

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

<h3 class="pt-2">Bullet Train Light theme options</h3>

<div>
Expand Down