diff --git a/client/pages/ScoresPage.tsx b/client/pages/ScoresPage.tsx index c260d29..72e6dc8 100644 --- a/client/pages/ScoresPage.tsx +++ b/client/pages/ScoresPage.tsx @@ -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 = () => {
Classifica
-
-
- Studente - setSortState(transitionMap[sortStateColumn][sortStateOrder]('student'))}> - - {sortStateColumn === 'student' - ? sortStateOrder === 'ascending' - ? 'expand_more' - : 'expand_less' - : 'unfold_more'} +
+
+
+ Studente + setSortState(transitionMap[sortStateColumn][sortStateOrder]('student'))}> + + {sortStateColumn === 'student' + ? sortStateOrder === 'ascending' + ? 'expand_more' + : 'expand_less' + : 'unfold_more'} + - -
-
- Soluzioni Inviate - setSortState(transitionMap[sortStateColumn][sortStateOrder]('sent'))}> - - {sortStateColumn === 'sent' - ? sortStateOrder === 'ascending' - ? 'expand_more' - : 'expand_less' - : 'unfold_more'} +
+
+ Soluzioni Inviate + setSortState(transitionMap[sortStateColumn][sortStateOrder]('sent'))}> + + {sortStateColumn === 'sent' + ? sortStateOrder === 'ascending' + ? 'expand_more' + : 'expand_less' + : 'unfold_more'} + - -
-
- Soluzioni Corrette - setSortState(transitionMap[sortStateColumn][sortStateOrder]('correct'))}> - - {sortStateColumn === 'correct' - ? sortStateOrder === 'ascending' - ? 'expand_more' - : 'expand_less' - : 'unfold_more'} +
+
+ Soluzioni Corrette + setSortState(transitionMap[sortStateColumn][sortStateOrder]('correct'))}> + + {sortStateColumn === 'correct' + ? sortStateOrder === 'ascending' + ? 'expand_more' + : 'expand_less' + : 'unfold_more'} + - +
+ {orderedStats.map(([user, s]) => ( + <> +
+ @{user} +
+
{s.sentSolutionsCount}
+
{s.correctSolutionsCount}
+ + ))}
- {orderedStats.map(([user, s]) => ( - <> -
{user}
-
{s.sentSolutionsCount}
-
{s.correctSolutionsCount}
- - ))}
diff --git a/client/styles/main.scss b/client/styles/main.scss index 5f9f5aa..50254c9 100644 --- a/client/styles/main.scss +++ b/client/styles/main.scss @@ -348,94 +348,116 @@ main.page-problem { } main.page-scores { - .table { - display: grid; - 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; + .scrollable { + display: flex; + overflow: auto; - user-select: none; + max-width: 100%; + padding: 1rem; - .icon { - cursor: pointer; + .table { display: grid; - place-content: center; - } - - overflow: hidden; - position: relative; + grid-template-columns: auto auto auto; - .cell { - padding: 1rem 1rem 1rem 2rem; - - gap: 0.5rem; + box-shadow: -2px 4px 6px 1px #00000018, 0 0 4px 0px #00000010; + // border: 1px solid #ddd; + border-radius: 0.5rem; + background: #ffffff; - border-left: 1px solid #ddd; - border-top: 1px solid #ddd; + user-select: none; - &:nth-child(3n + 1) { - border-left: none; + .icon { + cursor: pointer; + display: grid; + place-content: center; } - &:nth-child(1), - &:nth-child(2), - &:nth-child(3) { - border-top: none; - } + position: relative; - &.header { - font-weight: 400; - font-size: 22px; + .cell { + padding: 1rem 2rem; - background: #f0f0f0; + gap: 0.5rem; - display: flex; - align-items: center; - text-align: center; - justify-content: space-between; - } + border-left: 1px solid #ddd; + border-top: 1px solid #ddd; - &:not(.header) { - user-select: text; + &:nth-child(3n + 3) { + border-right: 1px solid #ddd; + } - &:nth-child(3n + 1) { - text-align: left; + &:nth-last-child(1), + &:nth-last-child(2), + &:nth-last-child(3) { + border-bottom: 1px solid #ddd; } - &:nth-child(3n + 2), - &:nth-child(3n + 3) { - text-align: center; + + &: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; } - &:nth-child(3n + 3) { - &::after { - content: ''; - position: absolute; + &.header { + font-weight: 400; + font-size: 22px; - left: 0; - right: 0; - height: 3rem; + padding-right: 1rem; - transform: translate(0, -1rem); + background: #f0f0f0; - pointer-events: none; - background: transparent; - } + display: flex; + align-items: center; + text-align: center; + justify-content: space-between; + } - &:hover::after { - background: #00000006; + &: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; - &:hover { - &:nth-child(3n + 1) + .cell + .cell::after { - background: #00000006; + left: 0; + right: 0; + 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; + } } } }