monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2026-01-01 04:55:57 +08:00
Code Issues Projects Releases Packages Wiki Activity

updated prelobby structure, showing how many players are in queue

Browse source
This commit is contained in:
Jack 2021-04-11 19:54:47 +01:00
parent 6cde0b470b
commit 24e49a0749
2 changed files with 33 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/sass/style.scss
View file

@ -3601,7 +3601,7 @@ key {
grid-template-areas:
"welcome welcome"
"mm priv";
grid-template-columns: 1fr 1fr;
grid-template-columns: 3fr 1fr;
gap: 2rem;
.welcome {
display: grid;
@ -3636,18 +3636,29 @@ key {
grid-area: mm;
display: grid;
gap: 1rem;
grid-template-rows: auto auto 1fr;
grid-template-rows: auto 2.4fr 1fr auto;
.title,
.subtitle {
color: var(--sub-color);
}
.buttons {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 1rem;
// .button {
// padding: 2rem 0;
// }
.button {
display: grid;
gap: 0.25rem;
height: 100%;
.icon {
font-size: 1.5rem;
line-height: 1.5rem;
}
.subtext {
opacity: 0.5;
font-size: 0.75rem;
line-height: 0.75rem;
}
}
}
.button {
padding: 0.7rem 0.5rem;
@ -3671,10 +3682,13 @@ key {
#joinByCode {
display: grid;
grid-auto-flow: column;
grid-template-columns: 1fr 1fr;
grid-template-columns: 2fr 1fr;
gap: 1rem;
.button {
padding: 0.7rem;
i {
margin: 0;
}
}
input {
position: absolute;

21
static/index.html
View file

@ -3916,20 +3916,24 @@
<div class="title">matchmaking</div>
<div class="buttons">
<div class="button active" queue="0">
<i class="fas fa-clock"></i>
Time 15
<div class="icon"><i class="fas fa-clock"></i></div>
<div class="text">Time 15</div>
<div class="subtext">In queue: 0</div>
</div>
<div class="button active" queue="1">
<i class="fas fa-clock"></i>
Time 60
<div class="icon"><i class="fas fa-clock"></i></div>
<div class="text">Time 60</div>
<div class="subtext">In queue: 0</div>
</div>
<div class="button active" queue="2">
<i class="fas fa-quote-right"></i>
Medium Quotes
<div class="icon"><i class="fas fa-quote-right"></i></div>
<div class="text">Medium Quotes</div>
<div class="subtext">In queue: 0</div>
</div>
<div class="button active" queue="3">
<i class="fas fa-quote-right"></i>
Long Quotes
<div class="icon"><i class="fas fa-quote-right"></i></div>
<div class="text">Long Quotes</div>
<div class="subtext">In queue: 0</div>
</div>
</div>
<div class="button startMatchmakingButton">
@ -3973,7 +3977,6 @@
/>
<div class="button">
<i class="fas fa-chevron-right"></i>
Join room
</div>
</div>
</div>