Skip to content

Commit 06d7418

Browse files
MiodecMiodec
committed
added advanced filters to the results page
1 parent e5e2f34 commit 06d7418

3 files changed

Lines changed: 346 additions & 207 deletions

File tree

‎public/css/style.scss‎

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -941,7 +941,7 @@ key {
941941
}
942942
.triplegroup{
943943
display: grid;
944-
grid-template-columns: 1fr 1fr 2fr;
944+
grid-template-columns: 1fr 1fr 1fr;
945945
gap: 1rem;
946946
}
947947
.group{
@@ -969,6 +969,47 @@ key {
969969
}
970970
}
971971

972+
.pageAccount{
973+
.group.filterButtons{
974+
gap: 1rem;
975+
display: grid;
976+
.buttonsAndTitle{
977+
display: grid;
978+
gap: .25rem;
979+
color: var(--sub-color);
980+
line-height: 1rem;
981+
font-size: 1rem;
982+
}
983+
.buttons{
984+
display: grid;
985+
grid-auto-flow: column;
986+
gap: 1rem;
987+
.button{
988+
background: rgba(0,0,0,.1);
989+
color: var(--sub-color);
990+
text-align: center;
991+
padding: .5rem;
992+
border-radius: var(--roundness);
993+
cursor: pointer;
994+
transition: .25s;
995+
-webkit-user-select: none;
996+
&.active{
997+
background: var(--sub-color);
998+
color: var(--bg-color);
999+
}
1000+
&:hover{
1001+
color: var(--sub-color);
1002+
background: var(--main-color);
1003+
}
1004+
}
1005+
&.languages{
1006+
grid-template-columns: repeat(4,1fr);
1007+
grid-auto-flow: unset;
1008+
}
1009+
}
1010+
}
1011+
}
1012+
9721013

9731014

9741015
* {

‎public/index.html‎

Lines changed: 75 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -277,38 +277,94 @@ <h1>theme</h1>
277277
<div class="page pageAccount hidden">
278278
<div class="preloader"><i class="fas fa-fw fa-spin fa-circle-notch"></i></div>
279279
<div class="content hidden">
280-
<div class="group">
280+
<div class="group filterButtons">
281+
<div class="buttonsAndTitle">
282+
<div class="title">filters</div>
283+
<div class="buttons globalFilters">
284+
<div class="button" filter="all">all</div>
285+
<div class="button" filter="none">none</div>
286+
</div>
287+
</div>
288+
<div class="buttonsAndTitle">
289+
<div class="title">mode</div>
290+
<div class="buttons modeFilters">
291+
<div class="button" filter="words">words</div>
292+
<div class="button" filter="time">time</div>
293+
<div class="button" filter="custom">custom</div>
294+
</div>
295+
</div>
296+
<div class="buttonsAndTitle">
297+
<div class="title">words</div>
298+
<div class="buttons wordsFilter">
299+
<div class="button" filter="10">10</div>
300+
<div class="button" filter="25">25</div>
301+
<div class="button" filter="50">50</div>
302+
<div class="button" filter="100">100</div>
303+
<div class="button" filter="200">200</div>
304+
</div>
305+
</div>
306+
<div class="buttonsAndTitle">
307+
<div class="title">time</div>
308+
<div class="buttons timeFilter">
309+
<div class="button" filter="15">15</div>
310+
<div class="button" filter="30">30</div>
311+
<div class="button" filter="60">60</div>
312+
<div class="button" filter="120">120</div>
313+
</div>
314+
</div>
315+
<div class="buttonsAndTitle">
316+
<div class="title">punctuation</div>
317+
<div class="buttons punctuationFilter">
318+
<div class="button" filter="puncOn">on</div>
319+
<div class="button" filter="puncOff">off</div>
320+
</div>
321+
</div>
322+
<div class="buttonsAndTitle">
323+
<div class="title">language</div>
324+
<div class="buttons languages">
325+
326+
</div>
327+
</div>
328+
</div>
329+
<div class="group chart">
281330
<div class="title"></div>
282331
<div class="chart">
283332
<canvas id="resultHistoryChart"></canvas>
284333
</div>
285334
</div>
286-
<div class="triplegroup">
335+
<div class="triplegroup stats">
287336
<div class="group highestWpm">
288337
<div class="title">highest wpm</div>
289-
<div class="val">1</div>
338+
<div class="val">-</div>
290339
<div class="mode"></div>
291340
</div>
292-
<div class="group testsTaken">
293-
<div class="title">tests taken</div>
294-
<div class="val">1</div>
295-
</div>
296-
<div class="group favouriteTest">
297-
<div class="title">favourite test</div>
298-
<div class="val">words 10</div>
299-
</div>
300341
<div class="group averageWpm">
301342
<div class="title">average wpm</div>
302-
<div class="val">1</div>
343+
<div class="val">-</div>
344+
</div>
345+
<div class="group averageWpm10">
346+
<div class="title">average wpm<br>(last 10 tests)</div>
347+
<div class="val">-</div>
348+
</div>
349+
<div class="group testsStarted">
350+
<div class="title">tests started</div>
351+
<div class="val">-</div>
303352
</div>
304-
<div class="group testCompletion">
305-
<div class="title">test completion</div>
353+
<div class="group testsCompleted">
354+
<div class="title">tests completed</div>
306355
<div class="val">-</div>
307356
</div>
308357
<div class="group avgRestart">
309-
<div class="title">avg restarts per completed test</div>
358+
<div class="title">avg restarts<br>per completed test</div>
310359
<div class="val">-</div>
311360
</div>
361+
<!-- <div class="group favouriteTest">
362+
<div class="title">favourite test</div>
363+
<div class="val">words 10</div>
364+
</div> -->
365+
366+
367+
312368
</div>
313369
<div class="group history">
314370
<!-- <div class="title">result history</div> -->
@@ -320,6 +376,8 @@ <h1>theme</h1>
320376
<td>correct<br>chars</td>
321377
<td>incorrect<br>chars</td>
322378
<td>mode</td>
379+
<td>punctuation</td>
380+
<td>language</td>
323381
<td>date</td>
324382
</tr>
325383
</thead>
@@ -370,8 +428,9 @@ <h1>theme</h1>
370428
<script src="js/db.js"></script>
371429
<script src="js/commandline.js"></script>
372430
<script src="js/settings.js"></script>
431+
<script src="js/account.js"></script>
373432
<script src="js/userconfig.js"></script>
374433
<script src="js/script.js"></script>
375-
<script src="js/account.js"></script>
434+
376435

377436
</html>

0 commit comments

Comments
 (0)