From 0955f18e04eae65bc060a792b298f0db0daa81b1 Mon Sep 17 00:00:00 2001
From: Antonio De Lucreziis <antonio.delucreziis@gmail.com>
Date: Wed, 11 Jan 2023 17:52:29 +0100
Subject: [PATCH] fix: table style and empty scoreboard page

---
 client/pages/ScoresPage.tsx | 94 ++++++++++++++++++++-----------------
 client/styles/main.scss     |  5 +-
 2 files changed, 53 insertions(+), 46 deletions(-)

diff --git a/client/pages/ScoresPage.tsx b/client/pages/ScoresPage.tsx
index 56810cb..99bcc58 100644
--- a/client/pages/ScoresPage.tsx
+++ b/client/pages/ScoresPage.tsx
@@ -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>
         </>
     )
diff --git a/client/styles/main.scss b/client/styles/main.scss
index 92f934b..dbe2aac 100644
--- a/client/styles/main.scss
+++ b/client/styles/main.scss
@@ -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;
         }