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

fix: table style and empty scoreboard page

Browse Source
This commit is contained in:
aziis98
2023-01-11 17:52:29 +01:00
parent 515280621d
commit 0955f18e04
2 changed files with 53 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/pages/ScoresPage.tsx
+50 -44
View File
@@ -50,55 +50,61 @@ export const ScoresPage = () => {
<Header />
<main class="page-scores">
<div class="subtitle">Classifica</div>
<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'}
{orderedStats.length > 0 ? (
<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 last-col">{s.correctSolutionsCount}</div>
</>
))}
</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 last-col">{s.correctSolutionsCount}</div>
</>
))}
</div>
</div>
) : (
<>
<p>Nessuno ha ancora inviato soluzioni</p>
</>
)}
</main>
</>
)
client/styles/main.scss
+3 -2
View File
@@ -290,7 +290,6 @@ $heading-scale: 1.25;
flex-direction: column;
width: 100%;
}
}
.text-body {
@@ -479,9 +478,11 @@ main.page-scores {
&:first-child {
border-top-left-radius: 0.5rem;
}
&:last-child {
border-top-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
}
&.last-col {
border-right: none;
}