diff --git a/client/components/Header.tsx b/client/components/Header.tsx index 3d668e7..bf5ecc9 100644 --- a/client/components/Header.tsx +++ b/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' @@ -9,7 +9,7 @@ const ROLE_LABEL: Record = { ['student']: 'Studente', } -export const Header = ({}) => { +export const Header = ({ }) => { const [user] = useCurrentUser() return ( @@ -18,34 +18,37 @@ export const Header = ({}) => { PHC / Problemi ) diff --git a/client/styles/main.scss b/client/styles/main.scss index 962cad0..a430d0a 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; } @@ -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; @@ -471,10 +476,11 @@ main.page-scores { } &:hover { - &:nth-child(3n + 1) + .cell + .cell::after { + &:nth-child(3n + 1)+.cell+.cell::after { background: #00000006; } - &:nth-child(3n + 2) + .cell::after { + + &:nth-child(3n + 2)+.cell::after { background: #00000006; } } @@ -535,13 +541,26 @@ header { nav { position: absolute; - right: 2rem; + width: 100%; + height: 100%; - display: flex; - gap: 1rem; + .nav-left { + gap: 1rem; + display: flex; + height: 100%; + align-items: center; + position: absolute; + left: 2rem; + } - height: 100%; - align-items: center; + .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,12 +819,21 @@ 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 { @@ -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; @@ -855,4 +885,4 @@ header { justify-self: center; } } -} +} \ No newline at end of file