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

client/pages/AdminPage.tsx

@@ -105,6 +105,30 @@ export const AdminPage = ({}) => {
                         <em>Nessuna soluzione ancora da correggere</em>
                     </>
                 )}
+                {user.role === 'admin' && (
+                    <>
+                        <hr />
+                        <div class="subtitle">Utenti</div>
+                        <div class="table" style={{ '--cols': 4 }}>
+                            <div class="cell header">Nome Utente</div>
+                            <div class="cell header">Username Ateneo</div>
+                            <div class="cell header">Ruolo</div>
+                            <div class="cell header last-col">Ultimo Login</div>
+                            <div class="cell">User 1</div>
+                            <div class="cell">user1</div>
+                            <div class="cell">admin</div>
+                            <div class="cell last-col">2/6/2075 20:32</div>
+                            <div class="cell">User 2</div>
+                            <div class="cell">user2</div>
+                            <div class="cell">moderator</div>
+                            <div class="cell last-col">5/12/2102 20:61</div>
+                            <div class="cell last-row">User 3</div>
+                            <div class="cell last-row">user3</div>
+                            <div class="cell last-row">studente</div>
+                            <div class="cell last-row last-col">11/5/2066 20:49</div>
+                        </div>
+                    </>
+                )}
             </main>
         </>
     )

client/styles/main.scss

@@ -494,6 +494,79 @@ main.page-scores {
 // Components
 //
 
+.table {
+    display: grid;
+
+    grid-template-columns: repeat(var(--cols), 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;
+
+    overflow: hidden;
+
+    .cell {
+        padding: 0.5rem 1rem;
+
+        border-right: 1px solid #ddd;
+        border-bottom: 1px solid #ddd;
+
+        &.last-col {
+            border-right: none;
+        }
+
+        &.last-row {
+            border-bottom: none;
+        }
+
+        &.header {
+            font-weight: 400;
+
+            padding-right: 1rem;
+
+            background: #f0f0f0;
+
+            display: flex;
+            align-items: center;
+            text-align: center;
+            justify-content: space-between;
+        }
+
+        &:not(.header) {
+            user-select: text;
+        }
+    }
+
+    @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;
+            }
+
+            &.last-row.last-col {
+                border-bottom: none;
+            }
+        }
+    }
+}
+
 details {
     width: 100%;
     max-width: 80ch;