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

Fix header in mobile

Browse Source
This commit is contained in:
BachoSeven
2023-01-09 15:59:52 +01:00
parent 3088faaf3f
commit c3638507ea
2 changed files with 74 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/components/Header.tsx
+30 -27
View File
@@ -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<UserRole, string> = {
['student']: 'Studente',
}
export const Header = ({}) => {
export const Header = ({ }) => {
const [user] = useCurrentUser()
return (
@@ -18,34 +18,37 @@ export const Header = ({}) => {
<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) && (
<div class="nav-item">
<Link activeClassName="active" href={prependBaseUrl('/admin')}>
Pannello Admin
</Link>
</div>
)}
<div class="nav-item">
<Link activeClassName="active" href={prependBaseUrl('/profile')}>
@{user.id}
{isAdministrator(user.role) && <> ({ROLE_LABEL[user.role]})</>}
</Link>
</div>
</>
) : (
<div class="nav-left">
<div class="nav-item">
<Link activeClassName="active" href={prependBaseUrl('/login')}>
Login
<Link activeClassName="active" href={prependBaseUrl('/scores')}>
Classifica
</Link>
</div>
)}
</div>
<div class="nav-right">
{user ? (
<>
{isAdministrator(user.role) && (
<div class="nav-item">
<Link activeClassName="active" href={prependBaseUrl('/admin')}>
Pannello Admin
</Link>
</div>
)}
<div class="nav-item">
<Link activeClassName="active" href={prependBaseUrl('/profile')}>
@{user.id}
</Link>
</div>
</>
) : (
<div class="nav-item">
<Link activeClassName="active" href={prependBaseUrl('/login')}>
Login
</Link>
</div>
)}
</div>
</nav>
</header>
)
client/styles/main.scss
+44 -14
View File
@@ -223,7 +223,7 @@ p {
margin: 0;
}
p + p {
p+p {
margin-top: 0.5rem;
}
@@ -314,6 +314,7 @@ main {
grid-template-columns: auto auto;
gap: 1rem;
}
.info-box {
padding: 1rem;
font-size: 28px;
@@ -411,12 +412,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;
}
@@ -441,6 +445,7 @@ main.page-scores {
&:nth-child(3n + 1) {
text-align: left;
}
&:nth-child(3n + 2),
&:nth-child(3n + 3) {
text-align: center;
@@ -467,10 +472,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;
}
}
@@ -528,13 +534,26 @@ header {
nav {
position: absolute;
right: 2rem;
display: flex;
gap: 1rem;
width: 100%;
height: 100%;
align-items: center;
.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;
@@ -771,7 +790,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;
@@ -792,12 +812,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 {
@@ -838,7 +867,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;
@@ -848,4 +878,4 @@ header {
justify-self: center;
}
}
}
}