From 19541630fc5d9bf44b5e7ed1835c9c28ce0baff7 Mon Sep 17 00:00:00 2001
From: Antonio De Lucreziis <antonio.delucreziis@gmail.com>
Date: Thu, 5 Jan 2023 15:05:52 +0100
Subject: [PATCH] feat: link alla pagina scores e qualche tweak allo stile
 della tabella scores

---
 client/components/Header.tsx |  5 +++
 client/pages/ScoresPage.tsx  | 45 ++++++++++++++++-------
 client/styles/main.scss      | 69 ++++++++++++++++++++++++++++--------
 3 files changed, 92 insertions(+), 27 deletions(-)

diff --git a/client/components/Header.tsx b/client/components/Header.tsx
index 26a1aa9..30fc6d8 100644
--- a/client/components/Header.tsx
+++ b/client/components/Header.tsx
@@ -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) && (
diff --git a/client/pages/ScoresPage.tsx b/client/pages/ScoresPage.tsx
index 77d9c21..c260d29 100644
--- a/client/pages/ScoresPage.tsx
+++ b/client/pages/ScoresPage.tsx
@@ -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>
         </>
     )
 }
diff --git a/client/styles/main.scss b/client/styles/main.scss
index 2fbb430..5f9f5aa 100644
--- a/client/styles/main.scss
+++ b/client/styles/main.scss
@@ -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;