Merge branch 'dev' of https://git.phc.dm.unipi.it/phc/problemi into dev

client/components/Header.tsx

@@ -1,5 +1,5 @@
 import { Link } from 'preact-router/match'
-import { isAdministrator, User, UserRole } from '../../shared/model'
+import { isAdministrator, UserRole } from '../../shared/model'
 import { prependBaseUrl } from '../api'
 import { useCurrentUser } from '../hooks/useCurrentUser'
 
@@ -18,11 +18,14 @@ export const Header = ({}) => {
                 <a href={prependBaseUrl('/')}>PHC / Problemi</a>
             </div>
             <nav>
+                <div class="nav-left">
                     <div class="nav-item">
                         <Link activeClassName="active" href={prependBaseUrl('/scores')}>
                             Classifica
                         </Link>
                     </div>
+                </div>
+                <div class="nav-right">
                     {user ? (
                         <>
                             {isAdministrator(user.role) && (
@@ -35,7 +38,6 @@ export const Header = ({}) => {
                             <div class="nav-item">
                                 <Link activeClassName="active" href={prependBaseUrl('/profile')}>
                                     @{user.id}
-                                {isAdministrator(user.role) && <> ({ROLE_LABEL[user.role]})</>}
                                 </Link>
                             </div>
                         </>
@@ -46,6 +48,7 @@ export const Header = ({}) => {
                             </Link>
                         </div>
                     )}
+                </div>
             </nav>
         </header>
     )

client/styles/main.scss

@@ -318,6 +318,7 @@ main {
         grid-template-columns: auto auto;
         gap: 1rem;
     }
+
     .info-box {
         padding: 1rem;
         font-size: 28px;
@@ -415,12 +416,15 @@ main.page-scores {
                 &: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;
                 }
@@ -445,6 +449,7 @@ main.page-scores {
                     &:nth-child(3n + 1) {
                         text-align: left;
                     }
+
                     &:nth-child(3n + 2),
                     &:nth-child(3n + 3) {
                         text-align: center;
@@ -474,6 +479,7 @@ main.page-scores {
                         &:nth-child(3n + 1)+.cell+.cell::after {
                             background: #00000006;
                         }
+
                         &:nth-child(3n + 2)+.cell::after {
                             background: #00000006;
                         }
@@ -535,13 +541,26 @@ header {
 
     nav {
         position: absolute;
-        right: 2rem;
+        width: 100%;
+        height: 100%;
 
-        display: flex;
+        .nav-left {
             gap: 1rem;
+            display: flex;
+            height: 100%;
+            align-items: center;
+            position: absolute;
+            left: 2rem;
+        }
 
+        .nav-right {
+            gap: 1rem;
+            display: flex;
             height: 100%;
             align-items: center;
+            position: absolute;
+            right: 2rem;
+        }
 
         .nav-item {
             font-size: 20px;
@@ -778,7 +797,8 @@ 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;
 
@@ -799,14 +819,23 @@ header {
 
         nav {
             position: relative;
-            right: unset;
-
             display: flex;
             flex-direction: column;
             align-items: center;
+            gap: 1rem;
+
+            .nav-left, .nav-right {
+                left: unset;
+                right: unset;
+                position: relative;
+    
+                flex-direction: column;
             }
         }
 
+     
+    }
+
     .problem {
         padding: 0.75rem;
     }
@@ -845,7 +874,8 @@ 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;