Add optional jspsych-mobile.css stylesheet - #3711
Open
jodeleeuw wants to merge 1 commit into
Open
Conversation
Adds css/jspsych-mobile.css, an opt-in stylesheet that pins response buttons to a bar at the bottom of the screen on touch devices, within reach of a thumb. The rules target .jspsych-btn-group-flex and .jspsych-btn-group-grid rather than a single plugin's element id, so they cover the audio, canvas, html, image, and video button-response plugins alike. `display` is left alone because the grid layout sets grid-template-columns and -rows inline, which a stylesheet rule could not override. Kept out of jspsych.css because a fixed bar is wrong for tasks whose response positions carry spatial meaning. Every rule sits inside a `pointer: coarse` query, so loading it is inert on mouse-driven devices. The webpack config now takes a named entry per stylesheet and emits `[name].css`. Verified that css/jspsych.css is byte-identical to the output of the previous single-entry config. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
🦋 Changeset detectedLatest commit: 081480e The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
📦 Preview build readyBuilt from PR head Changed packages: Quick-start HTML: <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@768a5fa622f4a30fbd9121caffc665bf02e5e035/packages/jspsych/dist/index.browser.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@768a5fa622f4a30fbd9121caffc665bf02e5e035/packages/jspsych/css/jspsych.css">
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@768a5fa622f4a30fbd9121caffc665bf02e5e035/packages/plugin-html-keyboard-response/dist/index.browser.min.js"></script>All package URLs
Last updated 2026-07-28 23:13 UTC for PR head |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds
css/jspsych-mobile.css, an opt-in stylesheet that moves response buttons into a bar fixed to the bottom of the screen on touch devices, where they are within reach of a thumb rather than requiring a stretch to the middle of the page.jspsych.cssis untouched. Every rule in the new file sits inside@media (pointer: coarse), so loading it is inert on mouse-driven devices.Why opt-in rather than a default
A fixed bottom bar is wrong for tasks whose response positions carry spatial meaning — a Simon task, or any design where button location is part of the manipulation. That makes it a choice the experimenter should make, not a default.
Two implementation details worth a look
It targets
.jspsych-btn-group-flexand.jspsych-btn-group-grid, not#jspsych-html-button-response-btngroup. Those layout classes are defined injspsych.cssand applied by all five*-button-responseplugins, so one rule covers audio, canvas, html, image, and video. Targeting a single plugin's element id would both miss the other four and put plugin-specific knowledge into core CSS.It deliberately does not set
display. The defaultbutton_layoutis"grid", and the plugin setsgridTemplateColumnsandgridTemplateRowsas inline styles. Adisplay: flexhere would discard that configuration, and a stylesheet rule cannot override the inline grid template anyway. Centering continues to come fromjspsych.css—justify-contentfor flex,automargins for grid.Build change
webpack.config.cjsnow takes a named entry per stylesheet and emits[name].css. The.woffcleanup is still scoped tojspsych.css, since onlyindex.scssimports the fonts.I verified that
css/jspsych.cssis byte-identical before and after this change (ac0058cd081280f52ae6a7284b65240d) by rebuilding with the previous single-entry config and comparing, so the multi-entry switch is purely additive.Changes
packages/jspsych/src/mobile.scss— newpackages/jspsych/webpack.config.cjs— named entries,[name].cssdocs/overview/style.md— usage, the caveat about spatial tasks, and the two rules most likely to need overriding.changeset/mobile-stylesheet.md—minorNotes for review
minorsince this is purely additive, but it is milestoned to 9.0 to ship alongside Increase default button and input sizing #3710.background: Canvasso it is correct in both light and dark mode. Experiments that set their own page background need to override it; the docs say so.padding-bottom: 112pxon.jspsych-contentassumes default button metrics. It is documented as something to raise if buttons are enlarged, but a more robust approach is welcome if you'd prefer one.🤖 Generated with Claude Code