virtual-keypad 5.4.0 → 5.6.0

package/dist/receiver.html

@@ -75,7 +75,7 @@
       let keypad_options = {
         // Specify a 'keypadUrl' field to redirect to a keypad hosted elsewhere
         // FUTURE should be able to have a visual keypress or not from here
-        alphabet: [..."CDHKNORSVZ".split(""), "ESC", "SPACE"], // Set of symbols to display; array perfered
+        alphabet: [..."CDHKNORSVZ".split(""), "RETURN", "SPACE"], // Set of symbols to display; array perfered
         font: "Arial", // Supported font, in which to display letters
         targetElementId: "display", // id of the the div where messages should be displayed
         visualResponseFeedback: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtual-keypad",
-  "version": "5.4.0",
+  "version": "5.6.0",
   "description": "User response at a distance. Simple utility to summon forth a virtual keypad webapp.",
   "main": "dist/main.js",
   "directories": {

package/src/keypad.css

@@ -7,7 +7,7 @@
   display: grid;
   grid-template-columns: 1fr;
   /* Make header text as big as the text, keys take up as much space as needed, and control keys take up bottom space */
-  grid-template-rows: max-content auto max-content;
+  grid-template-rows: max-content auto 15vh;
 
   align-items: center;
   justify-content: center;
@@ -48,7 +48,7 @@
   width: 100%;
   height: 100%;
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: wrap-reverse;
   flex-direction: row;
   column-gap: 5px;
   row-gap: 5px;
@@ -57,15 +57,22 @@
   justify-content: center;
 
   /* Vertical shift of buttons */
-  /* align-items: center; */
-  align-items: flex-end;
+  align-items: center;
+
+  /* Hide scrollbar */
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+#keypad-keys::-webkit-scrollbar {
+  /* Hide scrollbar */
+  display: none;
 }
 
 .response-button {
   width: 100%;
   height: 100%;
-  max-width: min(25vw, 150px);
-  max-height: min(25vw, 150px);
+  max-width: min(25vw, 25vh, 150px);
+  max-height: min(25vw, 25vh, 150px);
   min-width: 44px;
   min-height: 44px;
   cursor: pointer;
@@ -76,7 +83,7 @@
   justify-content: center;
 
   /* Curve corners of buttons */
-  border-radius: 25px;
+  border-radius: min(25px, 15%);
 
   /* Make buttons square */
   aspect-ratio: 1;
@@ -106,17 +113,18 @@
   height: 95%;
   width: 95%;
   min-width: 95%;
+  max-height: min(15vh, 150px);
 }
 
 .response-button#SPACE {
   /* TODO actually make sure test doesn't clip */
-  font-size: 2rem; 
+  font-size: 1.5rem; 
   grid-column: 1;
   grid-row: 1;
 }
-.response-button#ESC {
+.response-button#RETURN {
   /* TODO actually make sure test doesn't clip */
-  font-size: 2rem; 
+  font-size: 1.5rem; 
   grid-column: 2;
   grid-row: 1;
 }

package/src/keypad.js

@@ -134,7 +134,7 @@ class Keypad extends KeypadPeer {
      * |e f g h |
      * |i j k l |
      * ----------
-     * |space esc| <- keypad-control-keys
+     * |space ret| <- keypad-control-keys
      */
     // Keypad elem is a container for a message and all keys
     const keypadElem = document.createElement("div");
@@ -259,7 +259,7 @@ class Keypad extends KeypadPeer {
       // Add the label to the button
       button.appendChild(buttonLabel);
       // Add the labeled-button to the HTML
-      if (["SPACE", "ESC"].includes(symbol.toUpperCase())){
+      if (["SPACE", "RETURN"].includes(symbol.toUpperCase())){
         document.querySelector("#keypad-control-keys").appendChild(button);
       } else {
         document.querySelector("#keypad-keys").appendChild(button);