search

code-hike / codehike

Marvellous code walkthroughs
https://codehike.org
MIT License
4.39k stars 135 forks source link

Make CH.Spotlight mobile responsive #387

Open MorningLit opened 1 year ago

MorningLit commented 1 year ago

Hi! Thanks for creating this amazing library, I am really loving it so far.

I created this issue because I am wondering if it is possible to make the CH.Spotlight mobile responsive? image I've created an article with it and it doesn't look the best on mobile 🙁 Maybe one possible solution is to make the code appear below the sections when there is not enough space?

pomber commented 1 year ago

👍 we should do the same as with Scrollycoding and fallback to a static version of the component

DanielFGray commented 1 year ago

+1 we should do the same as with Scrollycoding and fallback to a static version of the component

I have a horizontal spotlight component that works great on mobile, about half-way down the page here: https://danielfgray.com/articles/ez-react-forms

Maybe the fallback behavior can be controlled somehow?

pomber commented 1 year ago

Ideally, all the components should have a static version, not only for mobile but also for print, and for readers that don't like the interactivity.

The idea is to use staticMediaQuery to control when to show the static version. It will be possible to set it at the component level. See this issue.