feat: ora funge decentemente anche su mobile

This commit is contained in:
2023-01-05 15:24:36 +01:00
parent 19541630fc
commit 5ffa1b4cb1
2 changed files with 133 additions and 106 deletions
+45 -40
View File
@@ -1,6 +1,7 @@
import { useContext, useState } from 'preact/hooks'
import { SolutionStat } from '../../shared/model'
import { sortByNumericKey, sortByStringKey } from '../../shared/utils'
import { prependBaseUrl } from '../api'
import { Header } from '../components/Header'
import { useResource, MetadataContext } from '../hooks'
@@ -49,50 +50,54 @@ export const ScoresPage = () => {
<Header />
<main class="page-scores">
<div class="subtitle">Classifica</div>
<div class="table">
<div class="cell header">
<span>Studente</span>
<span onClick={() => setSortState(transitionMap[sortStateColumn][sortStateOrder]('student'))}>
<span class="material-symbols-outlined icon">
{sortStateColumn === 'student'
? sortStateOrder === 'ascending'
? 'expand_more'
: 'expand_less'
: 'unfold_more'}
<div class="scrollable">
<div class="table">
<div class="cell header">
<span>Studente</span>
<span onClick={() => setSortState(transitionMap[sortStateColumn][sortStateOrder]('student'))}>
<span class="material-symbols-outlined icon">
{sortStateColumn === 'student'
? sortStateOrder === 'ascending'
? 'expand_more'
: 'expand_less'
: 'unfold_more'}
</span>
</span>
</span>
</div>
<div class="cell header">
<span>Soluzioni Inviate</span>
<span onClick={() => setSortState(transitionMap[sortStateColumn][sortStateOrder]('sent'))}>
<span class="material-symbols-outlined icon">
{sortStateColumn === 'sent'
? sortStateOrder === 'ascending'
? 'expand_more'
: 'expand_less'
: 'unfold_more'}
</div>
<div class="cell header">
<span>Soluzioni Inviate</span>
<span onClick={() => setSortState(transitionMap[sortStateColumn][sortStateOrder]('sent'))}>
<span class="material-symbols-outlined icon">
{sortStateColumn === 'sent'
? sortStateOrder === 'ascending'
? 'expand_more'
: 'expand_less'
: 'unfold_more'}
</span>
</span>
</span>
</div>
<div class="cell header">
<span>Soluzioni Corrette</span>
<span onClick={() => setSortState(transitionMap[sortStateColumn][sortStateOrder]('correct'))}>
<span class="material-symbols-outlined icon">
{sortStateColumn === 'correct'
? sortStateOrder === 'ascending'
? 'expand_more'
: 'expand_less'
: 'unfold_more'}
</div>
<div class="cell header">
<span>Soluzioni Corrette</span>
<span onClick={() => setSortState(transitionMap[sortStateColumn][sortStateOrder]('correct'))}>
<span class="material-symbols-outlined icon">
{sortStateColumn === 'correct'
? sortStateOrder === 'ascending'
? 'expand_more'
: 'expand_less'
: 'unfold_more'}
</span>
</span>
</span>
</div>
{orderedStats.map(([user, s]) => (
<>
<div class="cell">
<a href={prependBaseUrl(`/u/${user}`)}>@{user}</a>
</div>
<div class="cell">{s.sentSolutionsCount}</div>
<div class="cell">{s.correctSolutionsCount}</div>
</>
))}
</div>
{orderedStats.map(([user, s]) => (
<>
<div class="cell">{user}</div>
<div class="cell">{s.sentSolutionsCount}</div>
<div class="cell">{s.correctSolutionsCount}</div>
</>
))}
</div>
</main>
</>