monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-10-15 01:56:18 +08:00
Code Issues Projects Releases Packages Wiki Activity

added groups to correct title and input spacing

Browse source
This commit is contained in:
Jack 2021-03-29 20:10:26 +01:00
parent 38fff4d01d
commit 02fd9f658a
3 changed files with 35 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/js/popups/word-filter-popup.js
View file

@ -12,7 +12,9 @@ export async function showWordFilterPopup() {
<option value=${language}>${prettyLang}</option>
`);
});
$("#languageList").select2();
$("#languageList").select2({
width: "100%",
});
}
function hideWordFilterPopup() {

21
src/sass/style.scss
View file

@ -636,23 +636,28 @@ a:hover {
gap: 1rem;
width: 400px;
input {
width: 100%;
}
.group {
display: grid;
gap: 0.5rem;
}
.lengthgrid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 0.2rem;
grid-template-rows: auto 1fr;
column-gap: 1rem;
}
.wordLength {
width: 10rem;
}
.wftip {
.tip {
color: var(--sub-color);
font-size: 0.8rem;
}
.wfload {
.loadingIndicator {
justify-self: center;
}
}

30
static/index.html
View file

@ -146,11 +146,13 @@
</div>
<div id="wordFilterPopupWrapper" class="hidden">
<div id="wordFilterPopup">
<div class="wftitle">language</div>
<select id="languageList" class=""></select>
<div class="lengthgrid">
<div class="wftitle">min length</div>
<div class="wftitle">max length</div>
<div class="group">
<div class="title">language</div>
<select id="languageList" class=""></select>
</div>
<div class="group lengthgrid">
<div class="title">min length</div>
<div class="title">max length</div>
<input
id="wordMin"
class="wordLength"
@ -164,15 +166,21 @@
type="number"
/>
</div>
<div class="wftitle">include</div>
<input id="wordFilter" autocomplete="off" />
<div class="wftitle">exclude</div>
<input id="wordExclude" autocomplete="off" />
<div class="wftip">
<div class="group">
<div class="title">include</div>
<input id="wordFilter" autocomplete="off" />
</div>
<div class="group">
<div class="title">exclude</div>
<input id="wordExclude" autocomplete="off" />
</div>
<div class="tip">
Use the above filters to include and exclude words or characters
(separated by spaces)
</div>
<i class="fas fa-fw fa-spin fa-circle-notch hidden wfload"></i>
<i
class="fas fa-fw fa-spin fa-circle-notch hidden loadingIndicator"
></i>
<div class="button">ok</div>
</div>
</div>