Init Tabby only on mobile
acespace90 opened this issue · 4 comments
acespace90 commented
Hi is it possible to activate tabby only on certain viewports?
cferdinandi commented
Yes! So, you could handle this with JavaScript, by...
- Checking the viewport size with JS
- If it's below a certain size, instantiating Tabby, otherwise not.
- Listening for resize events, and then destroying or reinstantiating as needed.
But I think an easier way is to just always instantiate, and use CSS to only hide and display views on smaller screens.
/**
* The tablist
*/
/* Don't hide on bigger screens */
[role="tabpanel"][hidden] {
display: block;
}
@media (max-width: 30em) {
[role="tablist"] {
border-bottom: 1px solid lightgray;
list-style: none;
margin: 0;
padding: 0;
}
[role="tablist"] * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/**
* The tabs
*/
[role="tab"] {
border: 1px solid transparent;
border-top-color: lightgray;
display: block;
padding: 0.5em 1em;
text-decoration: none;
/**
* Active tab styling
*/
/**
* Tabs on hover
*/
}
[role="tab"][aria-selected="true"] {
background-color: lightgray;
}
[role="tab"]:hover:not([aria-selected="true"]) {
background-color: #f7f7f7;
}
/**
* Hide on smaller screens
*/
[role="tabpanel"][hidden] {
display: block;
}
}
acespace90 commented
Oh nice, I will give a try.
PS: I didn't notice before you were the author of gomakethings. Nice!
cferdinandi commented
Thanks! Let me know if you hit any snags.
acespace90 commented
It works, thanks.