Skip to content

Hide buttons on smaller screens (mobile). #141

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

Merged
merged 3 commits into from
Mar 5, 2024
Merged

Hide buttons on smaller screens (mobile). #141

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a473be8
Hide buttons on smaller screens (mobile).
Carreau Feb 29, 2024
edc63a8
Update jupyterlite_sphinx/jupyterlite_sphinx.css
Carreau Mar 1, 2024
072a9ed
Apply suggestions from code review
Carreau Mar 5, 2024
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
5 changes: 5 additions & 0 deletions docs/directives/try_examples.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,11 @@ Below is an example of the directive in use. The button has been styled with cus
css as explained in the configuration section below. Without custom css, the button will
be plain and unadorned.

Note that as starting JupyterLite can download a significant amount of data, and
that the Jupyter interface is not optimized for mobile, the buttons will be
hidden on mobile by default (screen width 480px or smaller). This can be
changed by overwriting with custom CSS.


```rst
Examples
Expand Down
11 changes: 11 additions & 0 deletions jupyterlite_sphinx/jupyterlite_sphinx.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,3 +64,14 @@
@keyframes l13{
100%{transform: rotate(1turn)}
}



/* we do not want the button to show on smaller screens (phones), as clicking
* can download a lot of data. 480px is a commonly used breakpoint to identify if a device is a smartphone. */

@media (max-width: 480px), (max-height: 480px) {
div.try_examples_button_container {
display: none;
}
}