phc
/
problemi
6
3
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: ora funge decentemente anche su mobile

Browse Source
pull/1/head
Antonio De Lucreziis 2 years ago
parent 19541630fc
commit 5ffa1b4cb1
2 changed files with 131 additions and 104 deletions
Show Stats Download Patch File Download Diff File

85
client/pages/ScoresPage.tsx
Unescape Escape View File

@ -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>
</> </>

150
client/styles/main.scss
Unescape Escape View File

@ -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;
border: 1px solid #ddd;
border-radius: 0.5rem;
background: #ffffff;
user-select: none; max-width: 100%;
padding: 1rem;
.icon { .table {
cursor: pointer;
display: grid; display: grid;
place-content: center;
}
overflow: hidden;
position: relative; grid-template-columns: auto auto auto;
.cell { box-shadow: -2px 4px 6px 1px #00000018, 0 0 4px 0px #00000010;
padding: 1rem 1rem 1rem 2rem; // border: 1px solid #ddd;
border-radius: 0.5rem;
gap: 0.5rem; background: #ffffff;
border-left: 1px solid #ddd; user-select: none;
border-top: 1px solid #ddd;
&:nth-child(3n + 1) { .icon {
border-left: none; cursor: pointer;
display: grid;
place-content: center;
} }
&: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) { &:nth-child(3n + 3) {
user-select: text; border-right: 1px solid #ddd;
}
&:nth-child(3n + 1) { &:nth-last-child(1),
text-align: left; &:nth-last-child(2),
&:nth-last-child(3) {
border-bottom: 1px solid #ddd;
} }
&:nth-child(3n + 2),
&:nth-child(3n + 3) { &:first-child {
text-align: center; 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;
} }
&:nth-child(3n + 3) { &.header {
&::after { font-weight: 400;
content: ''; font-size: 22px;
position: absolute;
left: 0; padding-right: 1rem;
right: 0;
height: 3rem;
transform: translate(0, -1rem); background: #f0f0f0;
pointer-events: none; display: flex;
background: transparent; align-items: center;
} text-align: center;
justify-content: space-between;
}
&:hover::after { &:not(.header) {
background: #00000006; user-select: text;
&:nth-child(3n + 1) {
text-align: left;
} }
} &:nth-child(3n + 2),
&:nth-child(3n + 3) {
text-align: center;
}
&:nth-child(3n + 3) {
&::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;
}
} }
} }
} }

Write Preview
Loading…
Cancel
Save