fix: make virtual keyboard work better on touchscreen devices

kantord · Apr 12, 2022 · f499d02 · f499d02
1 parent f6280a7
commit f499d02
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 2 deletions.
diff --git a/apps/web/src/client.js b/apps/web/src/client.js
@@ -12,6 +12,8 @@ import {
   faEnvelope,
   faHeart,
   faSpinner,
+  faCircleArrowRight,
+  faCircleArrowLeft,
 } from "@fortawesome/free-solid-svg-icons"
 import { faTwitter } from "@fortawesome/free-brands-svg-icons"
 
@@ -25,6 +27,8 @@ library.add(faLock)
 library.add(faEnvelope)
 library.add(faHeart)
 library.add(faSpinner)
+library.add(faCircleArrowRight)
+library.add(faCircleArrowLeft)
 dom.watch()
 
 window.startMsw = () => {

diff --git a/apps/web/src/components/InputFieldWithVirtualKeyboard/VirtualKeyboard.svelte b/apps/web/src/components/InputFieldWithVirtualKeyboard/VirtualKeyboard.svelte
@@ -1,5 +1,6 @@
 <script lang="typescript">
   import Button from "../../../../lluis/Button.svelte"
+  import Icon from "../../../../lluis/Icon.svelte"
 
   export let characters: Array<string>
   export let disabled: boolean
@@ -12,12 +13,15 @@
       style="key"
       tabIndex={-1}
       size="small"
-      disabled="{disabled}"
-      on:click="{handleVirtualKey(character)}"
+      {disabled}
+      on:click={handleVirtualKey(character)}
     >
       {character}
     </Button>
   {/each}
+
+  <div class="shadow-left"><Icon icon="circle-arrow-left" /></div>
+  <div class="shadow-right"><Icon icon="circle-arrow-right" /></div>
 </div>
 
 <style type="text/scss">
@@ -26,4 +30,46 @@
     flex-wrap: wrap;
     margin-top: 2em;
   }
+
+  .virtual-keyboard .shadow-right,
+  .virtual-keyboard .shadow-left {
+    display: none;
+  }
+
+  @media only screen and (pointer: coarse) {
+    .virtual-keyboard {
+      padding-left: 12px;
+      position: fixed;
+      bottom: 68px;
+      left: 0;
+      right: 0;
+      background-color: white;
+      z-index: 100;
+      flex-wrap: nowrap;
+      overflow-x: scroll;
+    }
+
+    .virtual-keyboard .shadow-right,
+    .virtual-keyboard .shadow-left {
+      display: block;
+      position: fixed;
+      width: 24px;
+      height: 48px;
+      line-height: 48px;
+      bottom: 68px;
+      background-color: #fafafa;
+      border-bottom: 1px solid #e6e6e6;
+      bottom: calc(100vh - 68px);
+    }
+
+    .virtual-keyboard .shadow-left {
+      left: 0;
+      background: linear-gradient(270deg, transparent, white, white);
+    }
+
+    .virtual-keyboard .shadow-right {
+      right: 0;
+      background: linear-gradient(90deg, transparent, white, white);
+    }
+  }
 </style>