UI tweaks
This commit is contained in:
parent
d3d51176ca
commit
0a5d39dc34
|
|
@ -1,11 +1,10 @@
|
|||
.flex-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: normal;
|
||||
align-items: normal;
|
||||
align-content: normal;
|
||||
margin: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
.flex-items {
|
||||
|
|
@ -19,8 +18,11 @@
|
|||
flex-basis: auto;
|
||||
align-self: auto;
|
||||
order: 0;
|
||||
width: 300px;
|
||||
width: 500px;
|
||||
border: 2px black solid;
|
||||
font-size: 44px;
|
||||
text-align: center;
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
|
||||
.flex-items:nth-child(2) {
|
||||
|
|
@ -31,7 +33,8 @@
|
|||
align-self: auto;
|
||||
order: 0;
|
||||
border: 2px black solid;
|
||||
margin-left: 12px;
|
||||
margin: 0 auto;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
#keyboard {
|
||||
|
|
@ -42,6 +45,7 @@
|
|||
grid-template-rows: repeat(2, 1fr);
|
||||
grid-row-gap: 12px;
|
||||
padding: 12px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.keyboard-key {
|
||||
|
|
@ -81,9 +85,4 @@
|
|||
|
||||
#keyboard-key:nth-child(8) {
|
||||
grid-area: 2 / 4 / 3 / 5;
|
||||
}
|
||||
|
||||
.flex-items:nth-child(1) {
|
||||
margin: 0 auto;
|
||||
font-size: 44px;
|
||||
}
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<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 id="keyboard">
|
||||
<div class="keyboard-key"></div>
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ $(document).ready(async function() {
|
|||
for (let key in mappings) {
|
||||
await sleep(1000);
|
||||
console.log(key);
|
||||
$('#letterbox').text(key.split('_')[1].toUpperCase())
|
||||
$('#text-to-type').text(key.split('_')[1].toUpperCase())
|
||||
artsey_draw(mappings[key]);
|
||||
}
|
||||
artsey_reset();
|
||||
|
|
|
|||
Loading…
Reference in New Issue