lukajankovic/remote-touchpad
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Altered TextInput scene to passthrough keyboard input instead of buffering it in a textarea.

Browse source
This commit is contained in:
Roman Zupancic 2024-01-27 19:53:19 -05:00
parent fc363fe404
commit a21eb00c20
2 changed files with 17 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

8
webdata/index.html
View file

@ -24,11 +24,11 @@
<button class="bottom right" onclick="app.showTextInput()">⌨</button> <button class="bottom right" onclick="app.showTextInput()">⌨</button>
</div> </div>
<div id="text-input" class="scene"> <div id="text-input" class="scene touch-input mouse-input keyboard-input">
<textarea class="grow" cols=1 rows=1></textarea> <textarea placeholder="Touch to type" cols=1 rows=1></textarea>
<div class="buttons"> <div class="flex-between">
<button onclick="app.showKeys('text-input', 1)">≡</button> <button onclick="app.showKeys('text-input', 1)">≡</button>
<button class="grow" id="send-text">➣</button> <button id="send-text">↩</button>
</div> </div>
</div> </div>

37
webdata/main.css
View file

@ -147,10 +147,15 @@ textarea {
border: none; border: none;
resize: none; resize: none;
font-size: 2rem; font-size: 2rem;
background-color: white; background-color: #303030;
color: black; color: black;
margin: 0; margin: 0;
padding: 0 0.5rem; padding: 0 0.5rem;
width: 100%;
}
textarea:focus {
outline: none;
} }
#keys { #keys {
@ -175,35 +180,17 @@ textarea {
#text-input { #text-input {
align-items: stretch; align-items: stretch;
justify-content: end;
padding: 0; padding: 0;
gap: 0; gap: 0;
} }
#text-input .buttons > button { #text-input button {
border-bottom: none; border-bottom: none;
border-right: none;
}
#text-input .buttons > button:first-child {
border-left: none;
}
@media (min-aspect-ratio: 4/3) {
#text-input {
flex-direction: row;
}
#text-input .buttons {
flex-direction: column;
}
#text-input .buttons > button,
#text-input .buttons > button:first-child {
border-top: 1px solid black;
border-left: 1px solid black;
}
#text-input .buttons > button:first-child {
border-top: none; border-top: none;
} }
.flex-between {
display: flex;
justify-content: space-between;
} }