feat: ora funge decentemente anche su mobile
This commit is contained in:
+45
-40
@@ -1,6 +1,7 @@
|
|||||||
import { useContext, useState } from 'preact/hooks'
|
import { useContext, useState } from 'preact/hooks'
|
||||||
import { SolutionStat } from '../../shared/model'
|
import { SolutionStat } from '../../shared/model'
|
||||||
import { sortByNumericKey, sortByStringKey } from '../../shared/utils'
|
import { sortByNumericKey, sortByStringKey } from '../../shared/utils'
|
||||||
|
import { prependBaseUrl } from '../api'
|
||||||
import { Header } from '../components/Header'
|
import { Header } from '../components/Header'
|
||||||
|
|
||||||
import { useResource, MetadataContext } from '../hooks'
|
import { useResource, MetadataContext } from '../hooks'
|
||||||
@@ -49,50 +50,54 @@ export const ScoresPage = () => {
|
|||||||
<Header />
|
<Header />
|
||||||
<main class="page-scores">
|
<main class="page-scores">
|
||||||
<div class="subtitle">Classifica</div>
|
<div class="subtitle">Classifica</div>
|
||||||
<div class="table">
|
<div class="scrollable">
|
||||||
<div class="cell header">
|
<div class="table">
|
||||||
<span>Studente</span>
|
<div class="cell header">
|
||||||
<span onClick={() => setSortState(transitionMap[sortStateColumn][sortStateOrder]('student'))}>
|
<span>Studente</span>
|
||||||
<span class="material-symbols-outlined icon">
|
<span onClick={() => setSortState(transitionMap[sortStateColumn][sortStateOrder]('student'))}>
|
||||||
{sortStateColumn === 'student'
|
<span class="material-symbols-outlined icon">
|
||||||
? sortStateOrder === 'ascending'
|
{sortStateColumn === 'student'
|
||||||
? 'expand_more'
|
? sortStateOrder === 'ascending'
|
||||||
: 'expand_less'
|
? 'expand_more'
|
||||||
: 'unfold_more'}
|
: 'expand_less'
|
||||||
|
: 'unfold_more'}
|
||||||
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</div>
|
||||||
</div>
|
<div class="cell header">
|
||||||
<div class="cell header">
|
<span>Soluzioni Inviate</span>
|
||||||
<span>Soluzioni Inviate</span>
|
<span onClick={() => setSortState(transitionMap[sortStateColumn][sortStateOrder]('sent'))}>
|
||||||
<span onClick={() => setSortState(transitionMap[sortStateColumn][sortStateOrder]('sent'))}>
|
<span class="material-symbols-outlined icon">
|
||||||
<span class="material-symbols-outlined icon">
|
{sortStateColumn === 'sent'
|
||||||
{sortStateColumn === 'sent'
|
? sortStateOrder === 'ascending'
|
||||||
? sortStateOrder === 'ascending'
|
? 'expand_more'
|
||||||
? 'expand_more'
|
: 'expand_less'
|
||||||
: 'expand_less'
|
: 'unfold_more'}
|
||||||
: 'unfold_more'}
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</div>
|
||||||
</div>
|
<div class="cell header">
|
||||||
<div class="cell header">
|
<span>Soluzioni Corrette</span>
|
||||||
<span>Soluzioni Corrette</span>
|
<span onClick={() => setSortState(transitionMap[sortStateColumn][sortStateOrder]('correct'))}>
|
||||||
<span onClick={() => setSortState(transitionMap[sortStateColumn][sortStateOrder]('correct'))}>
|
<span class="material-symbols-outlined icon">
|
||||||
<span class="material-symbols-outlined icon">
|
{sortStateColumn === 'correct'
|
||||||
{sortStateColumn === 'correct'
|
? sortStateOrder === 'ascending'
|
||||||
? sortStateOrder === 'ascending'
|
? 'expand_more'
|
||||||
? 'expand_more'
|
: 'expand_less'
|
||||||
: 'expand_less'
|
: 'unfold_more'}
|
||||||
: 'unfold_more'}
|
</span>
|
||||||
</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>
|
</div>
|
||||||
{orderedStats.map(([user, s]) => (
|
|
||||||
<>
|
|
||||||
<div class="cell">{user}</div>
|
|
||||||
<div class="cell">{s.sentSolutionsCount}</div>
|
|
||||||
<div class="cell">{s.correctSolutionsCount}</div>
|
|
||||||
</>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</>
|
</>
|
||||||
|
|||||||
+88
-66
@@ -348,94 +348,116 @@ main.page-problem {
|
|||||||
}
|
}
|
||||||
|
|
||||||
main.page-scores {
|
main.page-scores {
|
||||||
.table {
|
.scrollable {
|
||||||
display: grid;
|
display: flex;
|
||||||
grid-template-columns: auto auto auto;
|
overflow: auto;
|
||||||
|
|
||||||
box-shadow: -2px 4px 6px 1px #00000018, 0 0 4px 0px #00000010;
|
max-width: 100%;
|
||||||
border: 1px solid #ddd;
|
padding: 1rem;
|
||||||
border-radius: 0.5rem;
|
|
||||||
background: #ffffff;
|
|
||||||
|
|
||||||
user-select: none;
|
.table {
|
||||||
|
|
||||||
.icon {
|
|
||||||
cursor: pointer;
|
|
||||||
display: grid;
|
display: grid;
|
||||||
place-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
overflow: hidden;
|
grid-template-columns: auto auto auto;
|
||||||
|
|
||||||
position: relative;
|
box-shadow: -2px 4px 6px 1px #00000018, 0 0 4px 0px #00000010;
|
||||||
|
// border: 1px solid #ddd;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
background: #ffffff;
|
||||||
|
|
||||||
.cell {
|
user-select: none;
|
||||||
padding: 1rem 1rem 1rem 2rem;
|
|
||||||
|
|
||||||
gap: 0.5rem;
|
.icon {
|
||||||
|
cursor: pointer;
|
||||||
border-left: 1px solid #ddd;
|
display: grid;
|
||||||
border-top: 1px solid #ddd;
|
place-content: center;
|
||||||
|
|
||||||
&:nth-child(3n + 1) {
|
|
||||||
border-left: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-child(1),
|
position: relative;
|
||||||
&:nth-child(2),
|
|
||||||
&:nth-child(3) {
|
|
||||||
border-top: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.header {
|
.cell {
|
||||||
font-weight: 400;
|
padding: 1rem 2rem;
|
||||||
font-size: 22px;
|
|
||||||
|
|
||||||
background: #f0f0f0;
|
gap: 0.5rem;
|
||||||
|
|
||||||
display: flex;
|
border-left: 1px solid #ddd;
|
||||||
align-items: center;
|
border-top: 1px solid #ddd;
|
||||||
text-align: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(.header) {
|
|
||||||
user-select: text;
|
|
||||||
|
|
||||||
&:nth-child(3n + 1) {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
&:nth-child(3n + 2),
|
|
||||||
&:nth-child(3n + 3) {
|
&:nth-child(3n + 3) {
|
||||||
|
border-right: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-last-child(1),
|
||||||
|
&:nth-last-child(2),
|
||||||
|
&:nth-last-child(3) {
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
border-top-left-radius: 0.5rem;
|
||||||
|
}
|
||||||
|
&:nth-child(3) {
|
||||||
|
border-top-right-radius: 0.5rem;
|
||||||
|
}
|
||||||
|
&:nth-last-child(3) {
|
||||||
|
border-bottom-left-radius: 0.5rem;
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
border-bottom-right-radius: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.header {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 22px;
|
||||||
|
|
||||||
|
padding-right: 1rem;
|
||||||
|
|
||||||
|
background: #f0f0f0;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-child(3n + 3) {
|
&:not(.header) {
|
||||||
&::after {
|
user-select: text;
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
left: 0;
|
&:nth-child(3n + 1) {
|
||||||
right: 0;
|
text-align: left;
|
||||||
height: 3rem;
|
}
|
||||||
|
&:nth-child(3n + 2),
|
||||||
transform: translate(0, -1rem);
|
&:nth-child(3n + 3) {
|
||||||
|
text-align: center;
|
||||||
pointer-events: none;
|
|
||||||
background: transparent;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover::after {
|
&:nth-child(3n + 3) {
|
||||||
background: #00000006;
|
&::after {
|
||||||
}
|
content: '';
|
||||||
}
|
position: absolute;
|
||||||
|
|
||||||
&:hover {
|
left: 0;
|
||||||
&:nth-child(3n + 1) + .cell + .cell::after {
|
right: 0;
|
||||||
background: #00000006;
|
height: 3rem;
|
||||||
|
|
||||||
|
transform: translate(0, -1rem);
|
||||||
|
|
||||||
|
pointer-events: none;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover::after {
|
||||||
|
background: #00000006;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&:nth-child(3n + 2) + .cell::after {
|
|
||||||
background: #00000006;
|
&:hover {
|
||||||
|
&:nth-child(3n + 1) + .cell + .cell::after {
|
||||||
|
background: #00000006;
|
||||||
|
}
|
||||||
|
&:nth-child(3n + 2) + .cell::after {
|
||||||
|
background: #00000006;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user