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

feat: link alla pagina scores e qualche tweak allo stile della tabella scores

Browse Source
This commit is contained in:
aziis98
2023-01-05 15:05:52 +01:00
parent 0ad660b33c
commit 19541630fc
3 changed files with 92 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/components/Header.tsx
+5
View File
@@ -22,6 +22,11 @@ export const Header = ({ noLogin }: Props) => {
<a href={prependBaseUrl('/')}>PHC / Problemi</a>
</div>
<nav>
<div class="nav-item">
<Link activeClassName="active" href={prependBaseUrl('/scores')}>
Classifica
</Link>
</div>
{user ? (
<>
{isAdministrator(user.role) && (
client/pages/ScoresPage.tsx
+33 -12
View File
@@ -1,5 +1,5 @@
import { useContext, useState } from 'preact/hooks'
import { Solution as SolutionModel, SolutionStat, User } from '../../shared/model'
import { SolutionStat } from '../../shared/model'
import { sortByNumericKey, sortByStringKey } from '../../shared/utils'
import { Header } from '../components/Header'
@@ -16,13 +16,13 @@ export const ScoresPage = () => {
type Order = 'ascending' | 'descending'
type SortStateSpace = [Column, Order]
const [[sortStateColumn, sortStateOrder], setSortState] = useState<SortStateSpace>(['sent', 'descending'])
const [[sortStateColumn, sortStateOrder], setSortState] = useState<SortStateSpace>(['correct', 'descending'])
const transitionColumn: (k: Column) => Partial<Record<Column, Record<Order, (c: Column) => SortStateSpace>>> = k => ({
[k]: {
'ascending': (c: Column) => c === k ? [k, 'descending'] : [c, 'ascending'],
'descending': (c: Column) => c === k ? [k, 'ascending'] : [c, 'ascending']
}
ascending: (c: Column) => (c === k ? [k, 'descending'] : [c, 'ascending']),
descending: (c: Column) => (c === k ? [k, 'ascending'] : [c, 'ascending']),
},
})
const transitionMap: Record<Column, Record<Order, (c: Column) => SortStateSpace>> = {
@@ -36,8 +36,12 @@ export const ScoresPage = () => {
if (sortStateColumn === 'student') {
orderedStats = sortByStringKey(Object.entries(stats), ([user, s]) => user, sortStateOrder === 'ascending')
} else {
// @ts-ignore
orderedStats = sortByNumericKey(Object.entries(stats), ([user, s]) => s[sortStateColumn + 'SolutionsCount'], sortStateOrder === 'ascending')
orderedStats = sortByNumericKey(
Object.entries(stats),
// @ts-ignore
([user, s]) => s[sortStateColumn + 'SolutionsCount'],
sortStateOrder === 'ascending'
)
}
return (
@@ -49,20 +53,37 @@ export const ScoresPage = () => {
<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 class="material-symbols-outlined icon">
{sortStateColumn === 'student'
? sortStateOrder === 'ascending'
? 'expand_more'
: 'expand_less'
: 'unfold_more'}
</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'}</span>
<span class="material-symbols-outlined icon">
{sortStateColumn === 'sent'
? sortStateOrder === 'ascending'
? 'expand_more'
: 'expand_less'
: 'unfold_more'}
</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'}</span>
<span class="material-symbols-outlined icon">
{sortStateColumn === 'correct'
? sortStateOrder === 'ascending'
? 'expand_more'
: 'expand_less'
: 'unfold_more'}
</span>
</span>
</div>
{orderedStats.map(([user, s]) => (
@@ -73,7 +94,7 @@ export const ScoresPage = () => {
</>
))}
</div>
</main >
</main>
</>
)
}
client/styles/main.scss
+54 -15
View File
@@ -223,7 +223,7 @@ p {
margin: 0;
}
p+p {
p + p {
margin-top: 0.5rem;
}
@@ -353,6 +353,7 @@ main.page-scores {
grid-template-columns: auto auto auto;
box-shadow: -2px 4px 6px 1px #00000018, 0 0 4px 0px #00000010;
border: 1px solid #ddd;
border-radius: 0.5rem;
background: #ffffff;
@@ -366,19 +367,17 @@ main.page-scores {
overflow: hidden;
position: relative;
.cell {
text-align: center;
padding: 1rem 2rem;
display: flex;
align-items: center;
text-align: center;
padding: 1rem 1rem 1rem 2rem;
gap: 0.5rem;
border-left: 1px solid #ddd;
border-top: 1px solid #ddd;
&:nth-child(3n+1) {
&:nth-child(3n + 1) {
border-left: none;
}
@@ -392,13 +391,55 @@ main.page-scores {
font-weight: 400;
font-size: 22px;
background: #fdfdfd;
background: #f0f0f0;
padding-right: 1rem;
display: flex;
align-items: center;
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) {
text-align: center;
}
&:nth-child(3n + 3) {
&::after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 3rem;
transform: translate(0, -1rem);
pointer-events: none;
background: transparent;
}
&:hover::after {
background: #00000006;
}
}
&:hover {
&:nth-child(3n + 1) + .cell + .cell::after {
background: #00000006;
}
&:nth-child(3n + 2) + .cell::after {
background: #00000006;
}
}
}
}
}
}
@@ -693,8 +734,7 @@ header {
}
// On mobile
@media screen and (max-width: $device-s-width),
(pointer: coarse) {
@media screen and (max-width: $device-s-width), (pointer: coarse) {
main {
padding: 2rem 1rem 6rem;
@@ -761,8 +801,7 @@ header {
}
}
@media screen and (max-width: $device-m-width),
(pointer: coarse) {
@media screen and (max-width: $device-m-width), (pointer: coarse) {
.markdown-editor {
grid-template-columns: auto;
grid-template-rows: auto auto;