diff --git a/src/pages/admin/index.astro b/src/pages/admin/index.astro new file mode 100644 index 0000000..27b6d6b --- /dev/null +++ b/src/pages/admin/index.astro @@ -0,0 +1,123 @@ +--- +import Header from '@/components/Header.astro' +import BaseLayout from '@/layouts/BaseLayout.astro' +--- + + +
+
+
+ +
+
+
+
+
+ Utenti +
+
Statistiche degli utenti di Poisson e PHC
+
+
+
Utenti Poisson
+
group
+
1356
+
+
+
Utenti PHC
+
group
+
345
+
+
+
Utenti con account collegato
+
group
+
56
+
+
+
+
+
+ Appunti +
+
Statistiche degli Appunti
+
+
+
Appunti Caricati
+
book_2
+
567
+
+
+
Appunti Pubblicati
+
book_2
+
345
+
+
+
In attesa di revisione
+
book_2
+
234
+
+
+
Spazio Usato (di Minio)
+
storage
+
34.5 GB
+
+
+
+
+
+ Database +
+
Statistiche del Database
+
+
+
Record nel database
+
database
+
3456
+
+
+
Record modificati
+
database
+
234
+
+
+
Record eliminati
+
database
+
56
+
+
+
Spazio utilizzato
+
storage
+
39.5 MB
+
+
+
+
+
+
+ diff --git a/src/pages/admin/utenti.astro b/src/pages/admin/utenti.astro new file mode 100644 index 0000000..f07c757 --- /dev/null +++ b/src/pages/admin/utenti.astro @@ -0,0 +1,88 @@ +--- +import Header from '@/components/Header.astro' +import BaseLayout from '@/layouts/BaseLayout.astro' +--- + + +
+
+
+ +
+
+
+
+
+ group + Utenti +
+
+ Aggiungi +
+
+
+ + +
+
+
+
Nome
+
Cognome
+
Email
+
Ruolo
+
Azioni
+
+ { + Array.from({ length: 50 }).map(() => ( + +
+
Mario
+
Rossi
+
mario@rossi.com
+
studente
+
+ +
edit
+ + +
delete
+ +
+
+ + )) + } +
+
+
+
+ diff --git a/src/styles/components.scss b/src/styles/components.scss index d3dbccd..222b9c3 100644 --- a/src/styles/components.scss +++ b/src/styles/components.scss @@ -26,6 +26,10 @@ font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; max-width: 32px; + + &.extra-large { + font-size: 48px; + } } .title { @@ -818,4 +822,210 @@ } } } + + .layout-admin { + display: grid; + grid-template-columns: minmax(12rem, auto) 1fr; + + background: #f8f8f8; + + > .sidebar { + display: grid; + gap: 1rem; + padding: 1rem; + padding-right: calc(1rem + 2px); + + background: #e0e0e0; + border-right: 2px solid var(--palette-black); + + > nav { + > ul { + display: grid; + gap: 1rem; + padding: 0; + + list-style: none; + + align-content: start; + + > li { + > a { + display: grid; + grid-auto-flow: column; + justify-content: start; + align-items: center; + + gap: 0.25rem; + padding: 0.25rem; + + color: #222; + background: #b0b0b0; + font-family: 'Iosevka', monospace; + text-decoration: none; + + @include neo-brutalist-card(2px, 2px); + + &:hover { + background: #c0c0c0; + } + } + } + } + } + } + + > .content { + padding: 3rem 0; + + display: grid; + align-content: start; + justify-items: center; + } + } + + .admin-dashboard-grid { + display: grid; + + width: 100%; + + grid-template-columns: repeat(auto-fit, minmax(auto, 31rem)); + grid-auto-rows: auto; + + place-content: center; + + gap: 2rem; + + --card-base: #ffb6a0; + } + + .admin-table { + width: 100%; + + @include neo-brutalist-card; + + display: grid; + grid-template-rows: auto auto; + + padding: 1rem; + gap: 1rem; + + background: #b6ffa0; + + font-size: 16px; + + .table-header { + display: grid; + grid-template-columns: 1fr auto; + + .table-title { + display: grid; + grid-auto-flow: column; + align-items: center; + justify-content: start; + + gap: 0.5rem; + + font-weight: 600; + font-size: 32px; + + > * { + font-size: 32px; + } + } + } + + .table-body { + display: grid; + grid-template-columns: repeat(5, auto); + grid-auto-rows: auto; + + grid-auto-flow: row; + + @include neo-brutalist-card; + + background: #a0ffb6; + + .table-row { + grid-column: 1 / -1; + + display: grid; + grid-template-columns: subgrid; + + &:not(:last-child) { + border-bottom: 2px solid #0009; + } + + &.header { + font-weight: 600; + + .table-cell { + background: #5ec576; + } + } + + .table-cell { + display: grid; + align-items: center; + grid-auto-flow: column; + justify-content: start; + + gap: 0.5rem; + + padding: 0.25rem; + + &:not(:last-child) { + border-right: 2px solid #0009; + } + } + + &:first-child { + .table-cell:first-child { + border-top-left-radius: 0.25rem; + } + .table-cell:last-child { + border-top-right-radius: 0.25rem; + } + } + } + } + } + + .boxes { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); + grid-template-rows: auto 1fr auto; + + gap: 0.25rem 0.5rem; + + user-select: none; + + .title, + .description { + font-family: 'Iosevka', monospace; + font-weight: 700; + font-size: 16px; + + text-align: center; + } + + > .box { + display: grid; + + grid-column: span 1; + grid-row: 1 / -1; + + grid-template-rows: subgrid; + + place-items: center; + + background: #0002; + border-radius: 0.25rem; + + padding: 0.5rem; + + &:hover { + background: #0003; + } + } + } } diff --git a/src/styles/main.scss b/src/styles/main.scss index b7a3c14..22f34e8 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -2,6 +2,7 @@ $screen-desktop-min: 1024px; :root { --palette-black: #222; + --border-large: 4px solid var(--palette-black); --header-bg: #fff; diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss index 80f2ae3..e946e6a 100644 --- a/src/styles/mixins.scss +++ b/src/styles/mixins.scss @@ -15,3 +15,69 @@ } } } + +.stack-v { + display: flex; + flex-direction: column; + + &.fit > * { + flex-grow: 1; + } + + &.center { + align-items: center; + } + + > * { + flex-shrink: 0; + } + + & > .fill { + flex-grow: 1; + } + + & > .shrink { + flex-shrink: 1; + } +} + +.stack-h { + display: flex; + flex-direction: row; + + &.fit > * { + flex-grow: 1; + } + + &.center { + align-items: center; + } + + > * { + flex-shrink: 0; + } + + & > .fill { + flex-grow: 1; + } + + & > .shrink { + flex-shrink: 1; + } +} + +.fill-w { + width: 100%; +} + +.fill-h { + height: 100%; +} + +.text-center { + text-align: center; +} + +.max-width-content { + max-width: 64rem; +}