mirror of
https://github.com/Rushilwiz/eldrow.git
synced 2025-04-03 20:20:17 -04:00
fixed mobile/bug
This commit is contained in:
parent
887d8e86ad
commit
0c681d3a99
28
index.css
28
index.css
|
@ -87,15 +87,24 @@ header p {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 100;
|
||||
}
|
||||
@media (max-width: 786px) {
|
||||
.letters {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
.letters .row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
@media (max-width: 786px) {
|
||||
.letters .row {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
.letters .row .letter {
|
||||
width: 3rem;
|
||||
height: 4rem;
|
||||
|
@ -109,6 +118,13 @@ header p {
|
|||
transition: all 0.3s;
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
@media (max-width: 786px) {
|
||||
.letters .row .letter {
|
||||
width: 1.75rem;
|
||||
height: 3rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
.letters .row .letter.correct {
|
||||
background-color: #6aaa64 !important;
|
||||
color: #fff;
|
||||
|
@ -127,6 +143,11 @@ header p {
|
|||
.letters .row #backspace {
|
||||
width: 5rem;
|
||||
}
|
||||
@media (max-width: 786px) {
|
||||
.letters .row #backspace {
|
||||
width: 3rem;
|
||||
}
|
||||
}
|
||||
.letters .row #backspace svg {
|
||||
transform: scale(-1, 1);
|
||||
width: 50%;
|
||||
|
@ -134,6 +155,11 @@ header p {
|
|||
.letters .row #enter {
|
||||
width: 5rem;
|
||||
}
|
||||
@media (max-width: 786px) {
|
||||
.letters .row #enter {
|
||||
width: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.toast {
|
||||
background: black !important;
|
||||
|
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["index.sass","index.css"],"names":[],"mappings":"AAWA;EACE,UAAA;EACA,SAAA;EACA,sBAAA;ACVF;;ADYA;EACE,YAAA;EACA,aAAA;EAEA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,mBAAA;EAEA,yBAAA;KAAA,sBAAA;UAAA,iBAAA;ACXF;;ADaA;EACE,sCA5BM;EA6BN,iBAAA;EACA,gBAAA;EACA,mBAAA;EACA,uBAAA;ACVF;ADYE;EACE,iBAAA;EACA,gBAAA;EACA,mBAAA;ACVJ;;ADYA;EACE,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,WAAA;EACA,kCA3CW;ACkCb;;ADWA;EACE,aAAA;EACA,sBAAA;EACA,WAAA;ACRF;ADUE;EACE,aAAA;EACA,mBAAA;EACA,WAAA;ACRJ;ADUI;EACE,WAAA;EACA,YAAA;EACA,yBAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,eAAA;EACA,gBAAA;EACA,YAAA;ACRN;ADUM;EACE,YAAA;EACA,uBAAA;ACRR;ADUM;EACE,YAAA;EACA,uBAAA;EACA,oBAAA;ACRR;ADUM;EACE,yBAzEQ;EA0ER,WAAA;EACA,YAAA;ACRR;ADUM;EACE,yBA/EQ;EAgFR,WAAA;EACA,YAAA;ACRR;ADUM;EACE,yBAlFO;EAmFP,WAAA;EACA,YAAA;ACRR;;ADUA;EACE,aAAA;EACA,sBAAA;EACA,SAAA;EACA,iBAAA;EACA,gBAAA;ACPF;ADSE;EACE,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,SAAA;ACPJ;ADSI;EACE,WAAA;EACA,YAAA;EACA,uBAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,eAAA;EACA,gBAAA;EACA,eAAA;EACA,oBAAA;EACA,uBAAA;ACPN;ADSM;EACE,oCAAA;EACA,WAAA;EACA,YAAA;ACPR;ADSM;EACE,yBApHY;EAqHZ,WAAA;EACA,YAAA;ACPR;ADSM;EACE,yBAvHW;EAwHX,WAAA;EACA,YAAA;ACPR;ADSI;EACE,WAAA;ACPN;ADSM;EACE,uBAAA;EACA,UAAA;ACPR;ADUI;EACE,WAAA;ACRN;;ADUA;EACE,4BAAA;EACA,YAAA;EACA,kCAjJW;EAkJX,gBAAA;EACA,6BAAA;EACA,kCAAA;ACPF;;ADSA;EACE,sCAxJM;EAyJN,eAAA;EACA,gBAAA;EACA,gBAAA;ACNF;ADQE;EACE,WAAA;EACA,qBAAA;EACA,gBAAA;EACA,oBAAA;ACNJ;ADQI;EACE,WAAA;ACNN","file":"index.css"}
|
||||
{"version":3,"sources":["index.sass","index.css"],"names":[],"mappings":"AAgBA;EACE,UAAA;EACA,SAAA;EACA,sBAAA;ACfF;;ADiBA;EACE,YAAA;EACA,aAAA;EAEA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,mBAAA;EAEA,yBAAA;KAAA,sBAAA;UAAA,iBAAA;AChBF;;ADkBA;EACE,sCAjCM;EAkCN,iBAAA;EACA,gBAAA;EACA,mBAAA;EACA,uBAAA;ACfF;ADiBE;EACE,iBAAA;EACA,gBAAA;EACA,mBAAA;ACfJ;;ADiBA;EACE,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,WAAA;EACA,kCAhDW;ACkCb;;ADgBA;EACE,aAAA;EACA,sBAAA;EACA,WAAA;ACbF;ADeE;EACE,aAAA;EACA,mBAAA;EACA,WAAA;ACbJ;ADeI;EACE,WAAA;EACA,YAAA;EACA,yBAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,eAAA;EACA,gBAAA;EACA,YAAA;ACbN;ADeM;EACE,YAAA;EACA,uBAAA;ACbR;ADeM;EACE,YAAA;EACA,uBAAA;EACA,oBAAA;ACbR;ADeM;EACE,yBA9EQ;EA+ER,WAAA;EACA,YAAA;ACbR;ADeM;EACE,yBApFQ;EAqFR,WAAA;EACA,YAAA;ACbR;ADeM;EACE,yBAvFO;EAwFP,WAAA;EACA,YAAA;ACbR;;ADeA;EACE,aAAA;EACA,sBAAA;EACA,SAAA;EACA,gBAAA;ACZF;AD5EE;EAoFF;IAOI,WAAA;ECXF;AACF;ADYE;EACE,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,SAAA;ACVJ;ADvFE;EA6FA;IAOI,WAAA;ECTJ;AACF;ADUI;EACE,WAAA;EACA,YAAA;EACA,uBAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,eAAA;EACA,gBAAA;EACA,eAAA;EACA,oBAAA;EACA,uBAAA;ACRN;ADzGE;EAsGE;IAcI,cAAA;IACA,YAAA;IACA,iBAAA;ECPN;AACF;ADQM;EACE,oCAAA;EACA,WAAA;EACA,YAAA;ACNR;ADQM;EACE,yBAnIY;EAoIZ,WAAA;EACA,YAAA;ACNR;ADQM;EACE,yBAtIW;EAuIX,WAAA;EACA,YAAA;ACNR;ADQI;EACE,WAAA;ACNN;ADlIE;EAuIE;IAII,WAAA;ECLN;AACF;ADMM;EACE,uBAAA;EACA,UAAA;ACJR;ADOI;EACE,WAAA;ACLN;AD9IE;EAkJE;IAII,aAAA;ECJN;AACF;;ADKA;EACE,4BAAA;EACA,YAAA;EACA,kCAtKW;EAuKX,gBAAA;EACA,6BAAA;EACA,kCAAA;ACFF;;ADIA;EACE,sCA7KM;EA8KN,eAAA;EACA,gBAAA;EACA,gBAAA;ACDF;ADGE;EACE,WAAA;EACA,qBAAA;EACA,gBAAA;EACA,oBAAA;ACDJ;ADGI;EACE,WAAA;ACDN","file":"index.css"}
|
2
index.js
2
index.js
|
@ -72,7 +72,7 @@ let handleButtonPress = (button) => {
|
|||
};
|
||||
|
||||
onkeyup = (event) => {
|
||||
if (!running || runningAnim) {
|
||||
if (!running || runningAnim || !event.key.match(/[a-z]/i)) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
25
index.sass
25
index.sass
|
@ -8,7 +8,12 @@ $color-absent: #787c7e
|
|||
$key-color-present: #c9b458
|
||||
$key-color-correct: #6aaa64
|
||||
$key-color-absent: #787c7e
|
||||
|
||||
|
||||
@mixin mobile
|
||||
@media (max-width: 786px)
|
||||
@content
|
||||
|
||||
|
||||
*
|
||||
padding: 0
|
||||
margin: 0
|
||||
|
@ -93,15 +98,20 @@ header
|
|||
display: flex
|
||||
flex-direction: column
|
||||
gap: 1rem
|
||||
font-size: 1.2rem
|
||||
font-weight: 100
|
||||
|
||||
@include mobile
|
||||
gap: 0.5rem
|
||||
|
||||
.row
|
||||
display: flex
|
||||
flex-direction: row
|
||||
justify-content: center
|
||||
gap: 1rem
|
||||
|
||||
@include mobile
|
||||
gap: 0.5rem
|
||||
|
||||
.letter
|
||||
width: 3rem
|
||||
height: 4rem
|
||||
|
@ -115,6 +125,11 @@ header
|
|||
transition: all 0.3s
|
||||
transform: scale(-1, 1)
|
||||
|
||||
@include mobile
|
||||
width: 1.75rem
|
||||
height: 3rem
|
||||
font-size: .8rem
|
||||
|
||||
&.correct
|
||||
background-color: $key-color-correct !important
|
||||
color: #fff
|
||||
|
@ -132,6 +147,9 @@ header
|
|||
|
||||
#backspace
|
||||
width: 5rem
|
||||
|
||||
@include mobile
|
||||
width: 3rem
|
||||
|
||||
svg
|
||||
transform: scale(-1, 1)
|
||||
|
@ -141,6 +159,9 @@ header
|
|||
#enter
|
||||
width: 5rem
|
||||
|
||||
@include mobile
|
||||
width: 3.5rem
|
||||
|
||||
.toast
|
||||
background: black !important
|
||||
color: white
|
||||
|
|
Loading…
Reference in New Issue
Block a user