From dda2e2c36f5702417f52b991b2c10f99f2c233c1 Mon Sep 17 00:00:00 2001 From: Antonio De Lucreziis Date: Wed, 11 Jan 2023 16:19:16 +0100 Subject: [PATCH] fix: changed back table style to side scrolling on mobile --- client/pages/AdminPage.tsx | 36 +++---- client/styles/main.scss | 196 +++++++++++-------------------------- 2 files changed, 74 insertions(+), 158 deletions(-) diff --git a/client/pages/AdminPage.tsx b/client/pages/AdminPage.tsx index ca6217d..434a02b 100644 --- a/client/pages/AdminPage.tsx +++ b/client/pages/AdminPage.tsx @@ -123,23 +123,25 @@ export const AdminPage = ({}) => { <>
Controlli speciali solo per Admin
-
-
Username Ateneo
-
Nome Utente
-
Ruolo
-
Azioni
- - {users.map(user => ( - <> -
{user.id}
-
{user.fullName}
-
{user.role}
-
- - -
- - ))} +
+
+
Username Ateneo
+
Nome Utente
+
Ruolo
+
Azioni
+ + {users.map(user => ( + <> +
{user.id}
+
{user.fullName}
+
{user.role}
+
+ + +
+ + ))} +
su $USER
diff --git a/client/styles/main.scss b/client/styles/main.scss index bd60514..8ba32bf 100644 --- a/client/styles/main.scss +++ b/client/styles/main.scss @@ -24,6 +24,8 @@ body { font-weight: 300; font-size: 18px; + color: #222; + line-height: 1; } @@ -385,135 +387,42 @@ main.page-problem { } main.page-scores { - .scrollable { - display: flex; - overflow: auto; + .table { + grid-template-columns: repeat(3, auto); - max-width: 100%; - padding: 1rem; + .icon { + cursor: pointer; + display: grid; + place-content: center; + } - .table { - grid-template-columns: repeat(3, auto); + .cell { + padding: 1rem 2rem 1rem 1rem; - .icon { - cursor: pointer; - display: grid; - place-content: center; - } + &.header { + font-weight: 400; + font-size: 22px; - .cell { - padding: 1rem 2rem 1rem 1rem; + padding-right: 0.5rem; - &.header { - font-weight: 400; - font-size: 22px; + background: #f0f0f0; - padding-right: 0.5rem; + display: flex; + gap: 1rem; - background: #f0f0f0; + align-items: center; + text-align: center; + justify-content: space-between; + } - display: flex; - gap: 1rem; + &:nth-child(3) { + border-top-right-radius: 0.5rem; + } - align-items: center; - text-align: center; - justify-content: space-between; - } + &:nth-last-child(3) { + border-bottom-left-radius: 0.5rem; } } - - // .table { - // display: grid; - - // 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; - - // user-select: none; - - // position: relative; - - // .cell { - // padding: 1rem 2rem; - - // gap: 0.5rem; - - // border-left: 1px solid #ddd; - // border-top: 1px solid #ddd; - - // &:nth-child(3n + 3) { - // border-right: 1px solid #ddd; - // } - - // &:nth-last-child(1), - // &:nth-last-child(2), - // &:nth-last-child(3) { - // border-bottom: 1px solid #ddd; - // } - - // &: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; - // } - - // &: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; - // } - // } - // } - // } - // } } } @@ -521,6 +430,14 @@ main.page-scores { // Components // +.scrollable { + display: flex; + overflow: auto; + + max-width: 100%; + padding: 1rem; +} + .table { display: grid; @@ -533,11 +450,11 @@ main.page-scores { user-select: none; - overflow: hidden; - .cell { padding: 0.75rem; + white-space: nowrap; + border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; @@ -547,6 +464,12 @@ main.page-scores { align-items: center; justify-content: start; + &:first-child { + border-top-left-radius: 0.5rem; + } + &:last-child { + border-top-left-radius: 0.5rem; + } &.last-col { border-right: none; } @@ -574,27 +497,12 @@ main.page-scores { } @media screen and (max-width: $device-s-width), (pointer: coarse) { - display: flex; - flex-direction: column; - - width: 100%; - .cell { - padding: 0.5rem 0.75rem; - - border-bottom: 1px dashed #ddd; - border-right: none; - - &.last-row { - border-bottom: 1px dashed #ddd; - } - - &.last-col { - border-bottom: 1px solid #bbb; - } + padding: 0.5rem; + gap: 0.5rem; - &.last-row.last-col { - border-bottom: none; + &.header { + padding: 0.75rem 0.5rem; } } } @@ -907,8 +815,14 @@ main.page-admin { grid-template-columns: auto 1fr auto auto; - width: 100%; - max-width: 80ch; + .cell { + &:nth-child(4) { + border-top-right-radius: 0.5rem; + } + &:nth-last-child(4) { + border-bottom-left-radius: 0.5rem; + } + } } }