zach
/
artseyio-typing-tutor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI tweaks

This commit is contained in:
Zach 2023-08-03 15:23:58 -05:00
parent d3d51176ca
commit 0a5d39dc34
3 changed files with 10 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
css/artsey-tutor.css
View File

@ -1,11 +1,10 @@
.flex-container { .flex-container {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: normal; justify-content: normal;
align-items: normal; align-items: normal;
align-content: normal; align-content: normal;
margin: 20px;
padding: 20px; padding: 20px;
} }
.flex-items { .flex-items {
@ -19,8 +18,11 @@
flex-basis: auto; flex-basis: auto;
align-self: auto; align-self: auto;
order: 0; order: 0;
width: 300px; width: 500px;
border: 2px black solid; border: 2px black solid;
font-size: 44px;
text-align: center;
margin: 0 auto 20px;
} }
.flex-items:nth-child(2) { .flex-items:nth-child(2) {
@ -31,7 +33,8 @@
align-self: auto; align-self: auto;
order: 0; order: 0;
border: 2px black solid; border: 2px black solid;
margin-left: 12px; margin: 0 auto;
width: 500px;
} }
#keyboard { #keyboard {
@ -42,6 +45,7 @@
grid-template-rows: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr);
grid-row-gap: 12px; grid-row-gap: 12px;
padding: 12px; padding: 12px;
margin: 0 auto;
} }
.keyboard-key { .keyboard-key {
@ -81,9 +85,4 @@
#keyboard-key:nth-child(8) { #keyboard-key:nth-child(8) {
grid-area: 2 / 4 / 3 / 5; grid-area: 2 / 4 / 3 / 5;
}
.flex-items:nth-child(1) {
margin: 0 auto;
font-size: 44px;
} }

2
index.html
View File

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<div class="flex-container"> <div class="flex-container">
<div class="flex-items" id="letterbox"></div> <div class="flex-items" id="text-to-type"></div>
<div class="flex-items"> <div class="flex-items">
<div id="keyboard"> <div id="keyboard">
<div class="keyboard-key"></div> <div class="keyboard-key"></div>

2
js/artsey-tutor.js
View File

@ -49,7 +49,7 @@ $(document).ready(async function() {
for (let key in mappings) { for (let key in mappings) {
await sleep(1000); await sleep(1000);
console.log(key); console.log(key);
$('#letterbox').text(key.split('_')[1].toUpperCase()) $('#text-to-type').text(key.split('_')[1].toUpperCase())
artsey_draw(mappings[key]); artsey_draw(mappings[key]);
} }
artsey_reset(); artsey_reset();