Merge pull request jspsych#3162 from jspsych/v8-css-updates

CSS updates for v8
vzhang03 · Jul 12, 2024 · 29e7451 · 29e7451
2 parents dca26f1 + 1be7700
commit 29e7451
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 7 deletions.
diff --git a/.changeset/proud-stingrays-wonder.md b/.changeset/proud-stingrays-wonder.md
@@ -0,0 +1,5 @@
+---
+"jspsych": major
+---
+
+Removed `max-width: 95%` CSS rule on the `.jspsych-content` `<div>`. This rule existed to address an old IE bug with flex layouts.
diff --git a/.changeset/rich-cups-roll.md b/.changeset/rich-cups-roll.md
@@ -0,0 +1,7 @@
+---
+"@jspsych/plugin-canvas-button-response": patch
+"@jspsych/plugin-canvas-keyboard-response": patch
+"@jspsych/plugin-canvas-slider-response": patch
+---
+
+Change canvas display to `block` to fix issues when canvas is full screen.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/jspsych/src/index.scss b/packages/jspsych/src/index.scss
@@ -30,7 +30,6 @@
 }
 
 .jspsych-content {
-  max-width: 95%; /* this is mainly an IE 10-11 fix */
   text-align: center;
   margin: auto; /* this is for overflowing content */
 }
@@ -73,7 +72,6 @@
   margin-left: auto;
 }
 
-/* borrowing Bootstrap style for btn elements, but combining styles a bit */
 .jspsych-btn {
   display: inline-block;
   padding: 8px 12px;
@@ -123,10 +121,11 @@
   width: 100%;
   background: transparent;
 }
+
 .jspsych-slider:focus {
   outline: none;
 }
-/* track */
+
 .jspsych-slider::-webkit-slider-runnable-track {
   appearance: none;
   -webkit-appearance: none;
@@ -138,6 +137,7 @@
   border-radius: 2px;
   border: 1px solid #aaa;
 }
+
 .jspsych-slider::-moz-range-track {
   appearance: none;
   width: 100%;
@@ -148,6 +148,7 @@
   border-radius: 2px;
   border: 1px solid #aaa;
 }
+
 .jspsych-slider::-ms-track {
   appearance: none;
   width: 99%;
@@ -158,7 +159,7 @@
   border-radius: 2px;
   border: 1px solid #aaa;
 }
-/* thumb */
+
 .jspsych-slider::-webkit-slider-thumb {
   border: 1px solid #666;
   height: 24px;
@@ -169,6 +170,7 @@
   -webkit-appearance: none;
   margin-top: -9px;
 }
+
 .jspsych-slider::-moz-range-thumb {
   border: 1px solid #666;
   height: 24px;
@@ -177,6 +179,7 @@
   background: #ffffff;
   cursor: pointer;
 }
+
 .jspsych-slider::-ms-thumb {
   border: 1px solid #666;
   height: 20px;
@@ -187,7 +190,7 @@
   margin-top: -2px;
 }
 
-/* jsPsych progress bar */
+/* progress bar */
 
 #jspsych-progressbar-container {
   color: #555;
@@ -199,10 +202,12 @@
   width: 100%;
   line-height: 1em;
 }
+
 #jspsych-progressbar-container span {
   font-size: 14px;
   padding-right: 14px;
 }
+
 #jspsych-progressbar-outer {
   background-color: #eee;
   width: 50%;
@@ -212,13 +217,14 @@
   vertical-align: middle;
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 }
+
 #jspsych-progressbar-inner {
   background-color: #aaa;
   width: 0%;
   height: 100%;
 }
 
-/* Control appearance of jsPsych.data.displayData() */
+/* Appearance of jsPsych.data.displayData() */
 #jspsych-data-display {
   text-align: left;
 }
diff --git a/packages/plugin-canvas-button-response/src/index.ts b/packages/plugin-canvas-button-response/src/index.ts
@@ -142,6 +142,7 @@ class CanvasButtonResponsePlugin implements JsPsychPlugin<Info> {
     canvasElement.id = "jspsych-canvas-stimulus";
     canvasElement.height = trial.canvas_size[0];
     canvasElement.width = trial.canvas_size[1];
+    canvasElement.style.display = "block";
     stimulusElement.appendChild(canvasElement);
 
     display_element.appendChild(stimulusElement);

diff --git a/packages/plugin-canvas-keyboard-response/src/index.ts b/packages/plugin-canvas-keyboard-response/src/index.ts
@@ -114,6 +114,7 @@ class CanvasKeyboardResponsePlugin implements JsPsychPlugin<Info> {
     // draw
     display_element.innerHTML = new_html;
     let c = document.getElementById("jspsych-canvas-stimulus");
+    c.style.display = "block";
     trial.stimulus(c);
     // store response
     var response = {

diff --git a/packages/plugin-canvas-slider-response/src/index.ts b/packages/plugin-canvas-slider-response/src/index.ts
@@ -166,6 +166,7 @@ class CanvasSliderResponsePlugin implements JsPsychPlugin<Info> {
 
     // draw
     let c = document.getElementById("jspsych-canvas-stimulus");
+    c.style.display = "block";
     trial.stimulus(c);
 
     var response = {