phc/website
6
4
Fork 1
Code Issues 9 Pull Requests Projects 1 Releases Wiki Activity

style changes

Browse Source
This commit is contained in:
aziis98
2025-06-25 18:23:21 +02:00
parent 4c19ffdd9f
commit bbad670baa
6 changed files with 819 additions and 492 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/MediaPesataApp.tsx
+185 -195
View File
@@ -186,7 +186,7 @@ const CORSI_DISPONIBILI: Corso[] = [
{ nome: 'Ultrafiltri e metodi non-standard', anno: 'M', cfu: 6 }, { nome: 'Ultrafiltri e metodi non-standard', anno: 'M', cfu: 6 },
] ]
function MediaPesataApp() { export function MediaPesataApp() {
// Funzioni per localStorage // Funzioni per localStorage
const loadFromStorage = () => { const loadFromStorage = () => {
try { try {
@@ -220,13 +220,22 @@ function MediaPesataApp() {
} }
// Inizializzazione con dati salvati // Inizializzazione con dati salvati
const initialData = loadFromStorage() // const initialData = loadFromStorage()
const [tipoStudente, setTipoStudente] = useState<TipoStudente>(initialData.tipoStudente) const [tipoStudente, setTipoStudente] = useState<TipoStudente>('triennale')
const [corsiSelezionati, setCorsiSelezionati] = useState<CorsoSelezionato[]>(initialData.corsiSelezionati) const [corsiSelezionati, setCorsiSelezionati] = useState<CorsoSelezionato[]>([])
const [showCustomForm, setShowCustomForm] = useState(false) const [showCustomForm, setShowCustomForm] = useState(false)
const [customCorso, setCustomCorso] = useState<CorsoCustom>({ nome: '', cfu: 0 }) const [customCorso, setCustomCorso] = useState<CorsoCustom>({ nome: '', cfu: 0 })
const [sezioniAperte, setSezioniAperte] = useState<Record<string, boolean>>(initialData.sezioniAperte) const [sezioniAperte, setSezioniAperte] = useState<Record<string, boolean>>({})
const [mostraRisultati, setMostraRisultati] = useState(initialData.mostraRisultati) const [mostraRisultati, setMostraRisultati] = useState(false)
// Load data from localStorage on mount
useEffect(() => {
const initialData = loadFromStorage()
setTipoStudente(initialData.tipoStudente)
setCorsiSelezionati(initialData.corsiSelezionati)
setSezioniAperte(initialData.sezioniAperte)
setMostraRisultati(initialData.mostraRisultati)
}, [])
// Salva automaticamente quando cambiano i dati importanti // Salva automaticamente quando cambiano i dati importanti
useEffect(() => { useEffect(() => {
@@ -482,15 +491,6 @@ function MediaPesataApp() {
} }
const cambiaTipoStudente = (nuovoTipo: TipoStudente) => { const cambiaTipoStudente = (nuovoTipo: TipoStudente) => {
if (corsiSelezionati.length > 0 && nuovoTipo !== tipoStudente) {
if (
!confirm(
'Cambiando il tipo di studente, alcune materie potrebbero non essere più disponibili. Continuare?',
)
) {
return
}
}
setTipoStudente(nuovoTipo) setTipoStudente(nuovoTipo)
} }
@@ -501,217 +501,207 @@ function MediaPesataApp() {
const cfuError = totaleCfu > maxCfu const cfuError = totaleCfu > maxCfu
return ( return (
<div className="media-pesata-app"> <div class="media-pesata-app">
{/* Selezione tipo studente */} {/* Selezione tipo studente */}
<div className="student-type-selector"> <div class="card student-type-switcher wide">
<h2>Corso di Laurea</h2> <div class="grid-center">
<div className="radio-group"> <h2>Corso di Laurea</h2>
<label> <div class="compound-button">
<input <button
type="radio" class={tipoStudente === 'triennale' ? 'active' : ''}
value="triennale" onClick={() => cambiaTipoStudente('triennale')}
checked={tipoStudente === 'triennale'} >
onChange={e => cambiaTipoStudente((e.target as HTMLInputElement).value as TipoStudente)} Triennale
/> </button>
Triennale <button
</label> class={tipoStudente === 'magistrale' ? 'active' : ''}
<label> onClick={() => cambiaTipoStudente('magistrale')}
<input >
type="radio" Magistrale
value="magistrale" </button>
checked={tipoStudente === 'magistrale'} </div>
onChange={e => cambiaTipoStudente((e.target as HTMLInputElement).value as TipoStudente)}
/>
Magistrale
</label>
</div> </div>
</div> </div>
{/* Counter CFU */} {/* Counter CFU */}
<div className={`cfu-counter ${cfuError ? 'error' : ''}`}> <div class={`cfu-counter wide ${cfuError ? 'error' : ''}`}>
<h3> <h3>
CFU Totali: {totaleCfu}/{maxCfu} CFU Totali: {totaleCfu}/{maxCfu}
{tipoStudente === 'triennale' ? ' (+9 tesi)' : ' (+27 tesi)'} {tipoStudente === 'triennale' ? ' (+9 tesi)' : ' (+27 tesi)'}
</h3> </h3>
{cfuError && <p className="error-text">⚠️ Hai superato il limite di CFU consentiti!</p>} {cfuError && <p class="error-text">⚠️ Hai superato il limite di CFU consentiti!</p>}
</div> </div>
<div className="main-content"> {/* Sezione selezione corsi */}
{/* Sezione selezione corsi */} <div class="card">
<div className="course-selection"> <div class="title">
<h2>Seleziona Materie</h2> <h2>Seleziona Materie</h2>
</div>
{Object.entries(gruppiCorsi).map(([categoria, corsi]) => ( {Object.entries(gruppiCorsi).map(([categoria, corsi]) => (
<div key={categoria} className="course-category"> <div key={categoria} class="course-category">
<button className="category-header" onClick={() => toggleSezione(categoria)}> <button onClick={() => toggleSezione(categoria)}>
<h3>{categoria}</h3> <div class="h-flex">
<span className={`toggle-icon ${sezioniAperte[categoria] ? 'expanded' : ''}`}>▶</span> {categoria}
</button> <div class="spacer"></div>
<span class={`toggle-icon ${sezioniAperte[categoria] ? 'expanded' : ''}`}>▶</span>
</div>
</button>
{sezioniAperte[categoria] && ( {sezioniAperte[categoria] && (
<div className="course-grid"> <div class="course-grid">
{corsi.map((corso, index) => ( {corsi.map((corso, index) => (
<button <button
key={index} key={index}
className="course-button" class="course-button"
onClick={() => aggiungiCorso(corso)} onClick={() => aggiungiCorso(corso)}
disabled={corsiSelezionati.some(c => c.nome === corso.nome)} disabled={corsiSelezionati.some(c => c.nome === corso.nome)}
> >
<span className="course-name">{corso.nome}</span> <span class="course-name">{corso.nome}</span>
<span className="course-cfu">{corso.cfu} CFU</span> <span class="course-cfu">{corso.cfu} CFU</span>
</button> </button>
))} ))}
</div>
)}
</div>
))}
{/* Form per materia custom */}
<div className="custom-course">
<h3>Materia Personalizzata</h3>
{!showCustomForm ? (
<button onClick={() => setShowCustomForm(true)} className="add-custom-btn">
+ Aggiungi Materia Personalizzata
</button>
) : (
<div className="custom-form">
<input
type="text"
placeholder="Nome materia"
value={customCorso.nome}
onChange={e =>
setCustomCorso({ ...customCorso, nome: (e.target as HTMLInputElement).value })
}
/>
<input
type="number"
placeholder="CFU"
min="1"
max="30"
step="1"
value={customCorso.cfu || ''}
onChange={e =>
setCustomCorso({
...customCorso,
cfu: parseInt((e.target as HTMLInputElement).value) || 0,
})
}
/>
<button onClick={aggiungiCorsoCustom} className="confirm-btn">
Aggiungi
</button>
<button onClick={() => setShowCustomForm(false)} className="cancel-btn">
Annulla
</button>
</div> </div>
)} )}
</div> </div>
</div> ))}
{/* Sezione lista corsi selezionati */} {/* Form per materia custom */}
<div className="selected-courses"> <div class="custom-course">
<div className="section-header"> <h3>Materia Personalizzata</h3>
<h2>Materie Selezionate</h2> {!showCustomForm ? (
{corsiSelezionati.length > 0 && ( <button onClick={() => setShowCustomForm(true)}>+ Aggiungi Materia Personalizzata</button>
<button onClick={resetTutto} className="reset-btn">
🗑️ Cancella Tutto
</button>
)}
</div>
{corsiSelezionati.length === 0 ? (
<p className="no-courses">Nessuna materia selezionata</p>
) : ( ) : (
<div className="courses-list"> <div class="custom-form">
{corsiSelezionati.map(corso => ( <input
<div key={corso.id} className="course-item"> type="text"
<div className="course-info"> placeholder="Nome materia"
<span className="course-name">{corso.nome}</span> value={customCorso.nome}
<span className="course-cfu">{corso.cfu} CFU</span> onChange={e =>
{corso.passFailOnly && <span className="pass-fail-badge">Pass/Fail</span>} setCustomCorso({ ...customCorso, nome: (e.target as HTMLInputElement).value })
</div> }
/>
{!corso.passFailOnly && ( <input
<div className="course-grade"> type="number"
<input placeholder="CFU"
type="number" min="1"
placeholder="Voto" max="30"
min="18" step="1"
max="30" value={customCorso.cfu || ''}
step="1" onChange={e =>
value={corso.voto || ''} setCustomCorso({
onChange={e => ...customCorso,
aggiornaVoto( cfu: parseInt((e.target as HTMLInputElement).value) || 0,
corso.id, })
parseInt((e.target as HTMLInputElement).value) || null, }
) />
} <button onClick={aggiungiCorsoCustom}>Aggiungi</button>
/> <button onClick={() => setShowCustomForm(false)}>Annulla</button>
<label className={`lode-checkbox ${corso.voto !== 30 ? 'disabled' : ''}`}>
<input
type="checkbox"
checked={corso.lode}
disabled={corso.voto !== 30}
onChange={e =>
aggiornaLode(corso.id, (e.target as HTMLInputElement).checked)
}
/>
Lode
</label>
</div>
)}
<button
onClick={() => rimuoviCorso(corso.id)}
className="remove-btn"
title="Rimuovi materia"
>
×
</button>
</div>
))}
</div> </div>
)} )}
</div> </div>
</div> </div>
{/* Sezione lista corsi selezionati */}
<div class="card">
<div class="h-flex">
<div class="title">
<h2>Materie Selezionate</h2>
</div>
<div class="spacer"></div>
{corsiSelezionati.length > 0 && <button onClick={resetTutto}>🗑️ Cancella Tutto</button>}
</div>
{corsiSelezionati.length === 0 ? (
<p>Nessuna materia selezionata</p>
) : (
<div class="courses-list">
{corsiSelezionati.map(corso => (
<div key={corso.id} class="course-item">
<span class="course-name">{corso.nome}</span>
<span class="course-cfu">{corso.cfu} CFU</span>
{!corso.passFailOnly && (
<div class="course-grade tall">
<input
type="number"
placeholder="Voto"
min="18"
max="30"
step="1"
value={corso.voto || ''}
onChange={e =>
aggiornaVoto(
corso.id,
parseInt((e.target as HTMLInputElement).value) || null,
)
}
/>
<label class={`lode-checkbox ${corso.voto !== 30 ? 'disabled' : ''}`}>
<input
class="star"
type="checkbox"
checked={corso.lode}
disabled={corso.voto !== 30}
onChange={e =>
aggiornaLode(corso.id, (e.target as HTMLInputElement).checked)
}
/>
Lode
</label>
</div>
)}
<div class="actions tall">
<button
class="icon remove-btn"
onClick={() => rimuoviCorso(corso.id)}
title="Rimuovi materia"
>
×
</button>
</div>
</div>
))}
</div>
)}
</div>
{/* Pulsante Calcola */} {/* Pulsante Calcola */}
{corsiSelezionati.length > 0 && ( {corsiSelezionati.length > 0 && (
<div className="calculate-section"> <div class="calculate-section wide">
<button onClick={calcolaMedia} className="calculate-btn"> <button onClick={calcolaMedia}>🧮 Calcola Media e Voto di Laurea</button>
🧮 Calcola Media e Voto di Laurea
</button>
</div> </div>
)} )}
{/* Risultati */} {/* Risultati */}
{risultati && mostraRisultati && ( {risultati && mostraRisultati && (
<div className="results"> <div class="results wide">
<h2>Risultati</h2> <h2>Risultati</h2>
{risultati.errore ? ( {risultati.errore ? (
<div className="error-message"> <div class="error-message">
<p>⚠️ {risultati.errore}</p> <p>⚠️ {risultati.errore}</p>
</div> </div>
) : ( ) : (
<div className="results-grid"> <div class="results-grid">
<div className="result-item"> <div class="result-item">
<span className="label">Media Pesata:</span> <span class="label">Media Pesata:</span>
<span className="value">{risultati.mediaPesata}</span> <span class="value">{risultati.mediaPesata}</span>
</div> </div>
<div className="result-item"> <div class="result-item">
<span className="label">Bonus Lodi:</span> <span class="label">Bonus Lodi:</span>
<span className="value">+{risultati.bonusLodi}</span> <span class="value">+{risultati.bonusLodi}</span>
</div> </div>
<div className="result-item highlight"> <div class="result-item highlight">
<span className="label">Voto di Ammissione:</span> <span class="label">Voto di Ammissione:</span>
<span className="value">{risultati.votoAmmissione}</span> <span class="value">{risultati.votoAmmissione}</span>
</div> </div>
<div className="result-item highlight"> <div class="result-item highlight">
<span className="label">Massimo Voto Di Laurea Possibile:</span> <span class="label">Massimo Voto Di Laurea Possibile:</span>
<span className="value"> <span class="value">
{risultati.massimoVotoLaurea} {risultati.massimoVotoLaurea}
{risultati.conLode && <span className="lode-badge">(+lode)</span>} {risultati.conLode && <span class="lode-badge">(+lode)</span>}
</span> </span>
</div> </div>
</div> </div>
@@ -720,9 +710,9 @@ function MediaPesataApp() {
)} )}
{/* Nota informativa */} {/* Nota informativa */}
<div className="info-section"> <div class="card wide">
<h3>📋 Come viene calcolata la media</h3> <h3>📋 Come viene calcolata la media</h3>
<div className="info-content"> <div class="info-content">
<h4>Regole di esclusione CFU:</h4> <h4>Regole di esclusione CFU:</h4>
<ul> <ul>
<li> <li>
@@ -763,11 +753,11 @@ function MediaPesataApp() {
} }
// Funzione per inizializzare l'app // Funzione per inizializzare l'app
export function initMediaPesataApp() { // export function initMediaPesataApp() {
const container = document.getElementById('media-pesata-app') // const container = document.getElementById('media-pesata-app')
if (container) { // if (container) {
render(<MediaPesataApp />, container) // render(<MediaPesataApp />, container)
} // }
} // }
export default MediaPesataApp // export default MediaPesataApp
src/pages/media-pesata.astro
+11 -32
View File
@@ -1,42 +1,21 @@
--- ---
import '@/styles/pages/media-pesata.css' import '@/styles/pages/media-pesata.css'
import PageLayout from '../layouts/PageLayout.astro' import PageLayout from '../layouts/PageLayout.astro'
import { MediaPesataApp } from '@/client/MediaPesataApp'
--- ---
<PageLayout title="Voto Laurea" description="Calcola la tua media pesata e il voto di laurea seguendo le regole del dipartimento"> <PageLayout
title="Voto Laurea"
description="Calcola la tua media pesata e il voto di laurea seguendo le regole del dipartimento"
>
<div class="media-pesata-container"> <div class="media-pesata-container">
<h1>Calcolo Media e Voto di Laurea</h1> <h1>Calcolo Media e Voto di Laurea</h1>
<p>Calcola la tua media pesata e il voto con cui ti siederai alla discussione di laurea, seguendo le regole del dipartimento di Matematica.</p> <p>
Calcola la tua media pesata e il voto con cui ti siederai alla discussione di laurea, seguendo le regole del
dipartimento di Matematica.
</p>
<div id="media-pesata-app"></div> <MediaPesataApp client:load />
</div> </div>
</PageLayout> </PageLayout>
<script>
// Importiamo e inizializziamo l'applicazione
import('../client/MediaPesataApp')
.then(module => {
const { initMediaPesataApp } = module
initMediaPesataApp()
})
</script>
<style>
.media-pesata-container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
h1 {
text-align: center;
margin-bottom: 1rem;
color: var(--color-primary);
}
p {
text-align: center;
margin-bottom: 2rem;
color: var(--color-text-secondary);
}
</style>
src/styles/controls.css
+90 -1
View File
@@ -75,7 +75,7 @@ Controls - for things like buttons, input, select
input[type='text'], input[type='text'],
input[type='password'] { input[type='password'] {
width: 100%; width: 100%;
height: 2.5rem; min-height: 1.75rem;
/* @include neo-brutalist-card; */ /* @include neo-brutalist-card; */
border: 3px solid #222; border: 3px solid #222;
@@ -89,6 +89,95 @@ Controls - for things like buttons, input, select
} }
} }
input[type='checkbox'] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: calc(1.5rem + 1px);
height: calc(1.5rem + 1px);
background: #fff;
border: 3px solid #222;
border-radius: 4px;
box-shadow: 3px 3px 0 0 #222;
position: relative;
cursor: pointer;
transition: all 64ms linear;
&:hover {
transform: translate(-1px, -1px);
box-shadow: 4px 4px 0 0 #222;
}
&:active {
transform: translate(1px, 1px);
box-shadow: 2px 2px 0 0 #222;
}
&:checked {
background: #1e6733;
&::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0.8rem;
height: 0.8rem;
background: #1e6733;
clip-path: polygon(10% 55%, 35% 75%, 85% 25%, 90% 35%, 40% 95%, 5% 60%);
}
&:hover {
background: #2b8b47;
}
}
&:disabled {
background: #eee;
border-color: #888;
box-shadow: 3px 3px 0 0 #888;
cursor: not-allowed;
&:hover {
transform: none;
box-shadow: 3px 3px 0 0 #888;
}
&:checked {
background: #aaa;
&::after {
background: #666;
}
}
}
&.star {
&:checked::after {
background: rgb(255, 197, 49);
clip-path: polygon(
50% 0%,
61% 35%,
98% 35%,
68% 57%,
79% 91%,
50% 70%,
21% 91%,
32% 57%,
2% 35%,
39% 35%
);
}
}
}
form { form {
display: grid; display: grid;
gap: 1rem; gap: 1rem;
src/styles/main.css
+32
View File
@@ -325,6 +325,38 @@ Custom Page Styles
opacity: 0 !important; opacity: 0 !important;
} }
.grid-center {
display: grid;
place-content: center;
place-items: center;
}
.h-flex {
display: flex;
gap: 0.5rem;
flex-direction: row;
}
.v-flex {
display: flex;
gap: 0.5rem;
flex-direction: column;
}
.h-flex,
.v-flex {
place-self: stretch;
align-items: center;
> * {
flex-shrink: 0;
}
> .spacer {
flex-grow: 1;
}
}
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
.mobile-only { .mobile-only {
display: none !important; display: none !important;
src/styles/pages.scss
View File
src/styles/pages/media-pesata.css
+501 -264
View File
@@ -1,10 +1,116 @@
@layer page { @layer page {
:root {
--media-pesata-accent: #e4c5ff;
--media-pesata-bg: hsl(from var(--media-pesata-accent) h s 95%);
--media-pesata-accent-2: #ffe4c5;
--media-pesata-accent-3: #c5ffe4;
--card-base: var(--media-pesata-accent);
}
main {
justify-self: center;
background: var(--media-pesata-bg);
display: flex;
flex-direction: column;
align-items: center;
padding: 4.5rem 3rem;
gap: 4.5rem;
@media screen and (max-width: 1024px) {
padding: 3rem 1rem;
gap: 3rem;
.card {
width: 100%;
}
}
}
.media-pesata-container {
max-width: 72rem;
margin: 0 auto;
padding: 2rem;
@media screen and (max-width: 768px) {
padding: 0;
}
}
h1 {
text-align: center;
margin-bottom: 1rem;
color: var(--color-primary);
}
p {
text-align: center;
margin-bottom: 2rem;
color: var(--color-text-secondary);
}
.card {
align-content: start;
gap: 1rem;
}
button {
display: grid;
grid-auto-flow: column;
place-content: center;
place-items: center;
padding: 0.25rem 1rem;
gap: 0.5rem;
font-size: 16px;
border: 2px solid #222;
border-radius: 4px;
box-shadow: 2px 2px 0 0 #222;
transition: all 64ms linear;
text-decoration: none;
color: #222;
cursor: pointer;
&:hover {
transform: translate(-1px, -1px);
box-shadow: 3px 3px 0 0 #222;
}
&:active {
transform: translate(1px, 1px);
box-shadow: 1px 1px 0 0 #222;
}
}
.media-pesata-app { .media-pesata-app {
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 2rem; padding: 2rem;
min-height: 100vh; min-height: 100vh;
background: var(--homepage-whatsphc-bg);
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(7, auto);
align-items: start;
gap: 2rem;
> .wide {
grid-column: 1 / -1;
}
@media screen and (max-width: 1024px) {
padding: 0;
grid-template-columns: 1fr;
gap: 1rem;
}
} }
.media-pesata-title { .media-pesata-title {
@@ -24,70 +130,120 @@
box-shadow: 4px 4px 0 0 var(--palette-black); box-shadow: 4px 4px 0 0 var(--palette-black);
padding: 1.5rem; padding: 1.5rem;
margin-bottom: 2rem; margin-bottom: 2rem;
display: grid;
place-content: center;
h2 {
margin-bottom: 1rem;
color: var(--palette-black);
font-family: var(--font-display);
font-weight: 600;
font-size: 1.5rem;
text-align: center;
}
} }
.student-type-selector h2 { /* .radio-group {
margin-bottom: 1rem;
color: var(--palette-black);
font-family: var(--font-display);
font-weight: 600;
font-size: 1.5rem;
text-align: center;
}
.radio-group {
display: flex; display: flex;
gap: 1.5rem; gap: 1.5rem;
justify-content: center; justify-content: center;
}
.radio-group label { label {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.1rem;
cursor: pointer;
padding: 0.5rem 1rem;
border: 2px solid var(--palette-black);
border-radius: 6px;
background: #fff;
font-family: var(--font-secondary);
font-weight: 600;
transition: all 64ms linear;
box-shadow: 2px 2px 0 0 var(--palette-black);
}
label:hover {
transform: translate(-1px, -1px);
box-shadow: 3px 3px 0 0 var(--palette-black);
}
label:active {
transform: translate(1px, 1px);
box-shadow: 1px 1px 0 0 var(--palette-black);
}
input[type='radio'] {
width: 18px;
height: 18px;
margin: 0;
accent-color: #007bff;
}
} */
.compound-button {
display: flex; display: flex;
align-items: center; border: 3px solid #222;
gap: 0.5rem;
font-size: 1.1rem;
cursor: pointer;
padding: 0.5rem 1rem;
border: 2px solid var(--palette-black);
border-radius: 6px; border-radius: 6px;
background: #fff; box-shadow: 4px 4px 0 0 #222;
font-family: var(--font-secondary); overflow: hidden;
font-weight: 600; width: fit-content;
transition: all 64ms linear;
box-shadow: 2px 2px 0 0 var(--palette-black);
}
.radio-group label:hover { button {
transform: translate(-1px, -1px); border: none;
box-shadow: 3px 3px 0 0 var(--palette-black); border-radius: 0;
} box-shadow: none;
margin: 0;
flex: 1;
min-width: 120px;
padding: 0.5rem;
.radio-group label:active { &:not(:last-child) {
transform: translate(1px, 1px); border-right: 3px solid #222;
box-shadow: 1px 1px 0 0 var(--palette-black); }
}
.radio-group input[type='radio'] { &:hover {
width: 18px; transform: none;
height: 18px; box-shadow: none;
margin: 0; background: #f0f0f0;
accent-color: #007bff; }
&:active {
transform: none;
box-shadow: none;
background: #e0e0e0;
}
&.active {
background: hsl(from var(--media-pesata-accent) h s 75%);
color: #f4fef7;
&:hover {
background: hsl(from var(--media-pesata-accent) h s 85%);
}
&:active {
background: hsl(from var(--media-pesata-accent) h s 95%);
}
}
}
} }
/* Counter CFU */ /* Counter CFU */
.cfu-counter { .cfu-counter {
background: var(--project-card-bg); background: hsl(from var(--media-pesata-accent-2) h s 75%);
border: var(--border-large); border: var(--border-large);
border-radius: 6px; border-radius: 6px;
box-shadow: 4px 4px 0 0 var(--palette-black); box-shadow: 4px 4px 0 0 var(--palette-black);
padding: 1rem; padding: 1rem;
margin-bottom: 2rem;
text-align: center; text-align: center;
}
.cfu-counter.error { &.error {
background: #fee; background: #ffd8d8;
border-color: #dc3545; border-color: #dc3545;
}
} }
.cfu-counter h3 { .cfu-counter h3 {
@@ -119,14 +275,6 @@
text-align: center; text-align: center;
} }
/* Layout principale */
.main-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-bottom: 2rem;
}
@media (max-width: 768px) { @media (max-width: 768px) {
.main-content { .main-content {
grid-template-columns: 1fr; grid-template-columns: 1fr;
@@ -151,75 +299,97 @@
} }
.course-category { .course-category {
margin-bottom: 2rem;
}
/* Rimozione del vecchio stile per h3 che causava il rettangolo blu */
.course-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 0.5rem; gap: 0.5rem;
margin-top: 1rem;
padding-top: 0.5rem;
}
.course-button { > button {
display: flex; padding: 0.25rem 0.75rem 0.25rem 0.5rem;
flex-direction: column; font-size: 20px;
align-items: flex-start;
padding: 0.75rem;
border: 2px solid var(--palette-black);
border-radius: 4px;
background: #f8f9fa;
cursor: pointer;
transition: all 64ms linear;
text-align: left;
font-family: var(--font-secondary);
box-shadow: 2px 2px 0 0 var(--palette-black);
}
.course-button:hover:not(:disabled) { place-content: stretch;
background: var(--homepage-projects-bg); place-items: stretch;
transform: translate(-1px, -1px); }
box-shadow: 3px 3px 0 0 var(--palette-black);
}
.course-button:active:not(:disabled) { .course-grid {
transform: translate(1px, 1px); display: grid;
box-shadow: 1px 1px 0 0 var(--palette-black); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
} gap: 0.5rem;
.course-button:disabled { padding: 0.25rem;
opacity: 0.5;
cursor: not-allowed;
background: #e0e0e0;
}
.course-button.selected { border-radius: 0.25rem;
background: var(--guide-base); overflow-y: auto;
transform: translate(1px, 1px); max-height: 50vh;
box-shadow: 1px 1px 0 0 var(--palette-black);
}
.course-name { position: relative;
font-weight: 600;
font-size: 0.9rem;
line-height: 1.3;
margin-bottom: 0.25rem;
color: var(--palette-black);
}
.course-cfu { /* bottom linear gradient for scroll */
font-size: 0.8rem; &::after {
color: #666; content: '';
font-weight: bold; position: sticky;
font-family: var(--font-mono); bottom: -0.25rem;
left: 0;
right: 0;
height: 1rem;
margin-top: calc(-1rem - 0.25rem);
background: linear-gradient(to top, #0004, transparent);
}
.course-button {
display: grid;
grid-template-rows: auto auto;
padding: 0.5rem;
gap: 0.25rem;
justify-content: stretch;
justify-items: start;
border: 2px solid var(--palette-black);
border-radius: 4px;
background: #f8f9fa;
cursor: pointer;
transition: all 64ms linear;
text-align: left;
font-family: var(--font-secondary);
box-shadow: 2px 2px 0 0 var(--palette-black);
&:hover:not(:disabled) {
background: var(--homepage-projects-bg);
transform: translate(-1px, -1px);
box-shadow: 3px 3px 0 0 var(--palette-black);
}
&:active:not(:disabled) {
transform: translate(1px, 1px);
box-shadow: 1px 1px 0 0 var(--palette-black);
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
background: #e0e0e0;
}
> .course-name {
font-weight: 600;
font-size: 0.9rem;
line-height: 1.3;
color: var(--palette-black);
}
> .course-cfu {
font-size: 0.8rem;
color: #666;
font-weight: bold;
/* font-family: var(--font-mono); */
}
}
}
} }
/* Materia personalizzata */ /* Materia personalizzata */
.custom-course { .custom-course {
margin-top: 2rem; margin-top: 1rem;
padding-top: 1.5rem; padding-top: 1.5rem;
border-top: 3px solid var(--palette-black); border-top: 3px solid var(--palette-black);
} }
@@ -252,29 +422,31 @@
box-shadow: 5px 5px 0 0 var(--palette-black); box-shadow: 5px 5px 0 0 var(--palette-black);
} }
.custom-form { input {
display: flex; padding: 0.25rem 0.5rem;
gap: 0.5rem; font-size: 14px;
flex-wrap: wrap;
margin-top: 1rem;
}
.custom-form input { border: 2px solid #222;
padding: 0.5rem;
border: 2px solid var(--palette-black);
border-radius: 4px; border-radius: 4px;
font-size: 0.9rem; box-shadow: 2px 2px 0 0 #222;
background: #fff; background: #fff;
font-family: var(--font-primary); font-family: var(--font-primary);
} }
.custom-form input[type='text'] { .custom-form {
flex: 2; display: flex;
min-width: 200px; gap: 0.5rem;
} flex-wrap: wrap;
.custom-form input[type='number'] { input[type='text'] {
flex: 0 0 80px; flex: 2;
min-width: 200px;
}
input[type='number'] {
flex: 0 0 80px;
}
} }
.confirm-btn, .confirm-btn,
@@ -351,122 +523,150 @@
.courses-list { .courses-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 0.5rem;
/* @media screen and (max-width: 1024px) {
gap: 0;
.course-item {
&:first-child:not(:last-child) {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
&:last-child:not(:first-child) {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-top: none;
}
&:not(:first-child, :last-child) {
border-radius: 0;
border-top: none;
}
}
} */
} }
.course-item { .course-item {
display: flex; display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: 1fr auto auto;
align-items: center; align-items: center;
gap: 1rem;
padding: 1rem;
background: var(--guide-base);
border: 2px solid var(--palette-black);
border-radius: 4px;
transition: all 64ms linear;
}
.course-item:hover { gap: 0.5rem 1rem;
transform: translate(-1px, -1px); padding: 0.5rem 1rem 0.5rem 0.5rem;
box-shadow: 2px 2px 0 0 var(--palette-black);
}
.course-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.course-info .course-name {
font-weight: 600;
font-size: 0.9rem;
color: var(--palette-black);
font-family: var(--font-secondary);
}
.course-info .course-cfu {
font-size: 0.8rem;
color: #666;
font-family: var(--font-mono);
}
.course-grade {
display: flex;
align-items: center;
gap: 0.75rem;
}
.course-grade input[type='number'] {
width: 90px;
padding: 0.5rem;
border: 2px solid var(--palette-black);
border-radius: 4px;
font-size: 0.9rem;
text-align: center;
background: #fff; background: #fff;
font-weight: 600;
font-family: var(--font-primary);
}
.lode-checkbox {
display: flex;
align-items: center;
gap: 0.25rem;
font-size: 0.8rem;
cursor: pointer;
font-weight: 600;
font-family: var(--font-secondary);
}
.lode-checkbox.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.lode-checkbox input[type='checkbox'] {
width: 16px;
height: 16px;
margin: 0;
}
.remove-btn {
background: #d63031;
color: white;
border: 2px solid var(--palette-black); border: 2px solid var(--palette-black);
width: 30px; border-radius: 4px;
height: 30px;
border-radius: 50%;
aspect-ratio: 1;
cursor: pointer;
font-size: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
transition: all 64ms linear; transition: all 64ms linear;
flex-shrink: 0;
box-shadow: 2px 2px 0 0 var(--palette-black);
}
.remove-btn:hover { > .course-name {
background: #b71c1c; grid-column: 1 / 2;
transform: translate(-1px, -1px); grid-row: 1 / 2;
box-shadow: 3px 3px 0 0 var(--palette-black);
}
.remove-btn:active { font-weight: 600;
transform: translate(1px, 1px); font-size: 0.9rem;
box-shadow: 1px 1px 0 0 var(--palette-black); color: var(--palette-black);
} font-family: var(--font-secondary);
}
/* Calcolo e risultati */ > .course-cfu {
.calculation-section { grid-column: 1 / 2;
background: var(--homepage-principal-bg); grid-row: 2 / 3;
border: var(--border-large);
border-radius: 6px; font-size: 0.8rem;
box-shadow: 4px 4px 0 0 var(--palette-black); font-weight: bold;
padding: 2rem; color: #666;
text-align: center; /* font-family: var(--font-mono); */
margin-top: 2rem; }
> .tall {
grid-row: 1 / -1;
}
.course-grade {
display: grid;
grid-auto-flow: column;
place-content: center;
gap: 0.5rem;
}
> .actions {
grid-column: -2 / -1;
}
.lode-checkbox {
display: flex;
align-items: center;
gap: 0.25rem;
font-size: 0.8rem;
cursor: pointer;
font-weight: 600;
font-family: var(--font-secondary);
&.disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
.remove-btn {
background: #d63031;
color: white;
width: 1.75rem;
height: 1.75rem;
font-size: 20px;
padding: 0;
margin-top: 4px;
&:hover {
background: #b71c1c;
}
}
@media screen and (max-width: 1024px) {
justify-items: start;
align-items: center;
gap: 0.5rem;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
padding: 0.5rem;
.course-name {
display: grid;
place-content: center;
place-items: center;
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.course-cfu {
display: grid;
justify-self: center;
align-self: start;
grid-column: 2 / 3;
grid-row: 1 / 2;
}
.course-grade {
grid-row: 2 / 3;
}
.actions {
grid-column: 2 / 3;
grid-row: 2 / 3;
justify-self: end;
}
}
} }
.calculate-button { .calculate-button {
@@ -482,17 +682,17 @@
cursor: pointer; cursor: pointer;
transition: all 64ms linear; transition: all 64ms linear;
margin-bottom: 2rem; margin-bottom: 2rem;
}
.calculate-button:hover { &:hover {
background: #2b8b47; background: #2b8b47;
transform: translate(-1px, -1px); transform: translate(-1px, -1px);
box-shadow: 5px 5px 0 0 var(--palette-black); box-shadow: 5px 5px 0 0 var(--palette-black);
} }
.calculate-button:active { &:active {
transform: translate(2px, 2px); transform: translate(2px, 2px);
box-shadow: 2px 2px 0 0 var(--palette-black); box-shadow: 2px 2px 0 0 var(--palette-black);
}
} }
.results { .results {
@@ -502,21 +702,25 @@
box-shadow: 4px 4px 0 0 var(--palette-black); box-shadow: 4px 4px 0 0 var(--palette-black);
padding: 2rem; padding: 2rem;
margin-top: 1rem; margin-top: 1rem;
}
.results h2 { > h2 {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
color: var(--palette-black); color: var(--palette-black);
font-family: var(--font-display); font-family: var(--font-display);
font-weight: 600; font-weight: 600;
font-size: 1.6rem; font-size: 1.6rem;
text-align: center; text-align: center;
} }
.results-grid { .results-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem; gap: 1rem;
}
@media screen and (max-width: 1024px) {
padding: 1rem;
}
} }
/* Ordine degli elementi: il massimo voto di laurea al centro */ /* Ordine degli elementi: il massimo voto di laurea al centro */
@@ -533,7 +737,7 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 1rem; padding: 1rem;
background: var(--guide-base); background: hsl(from var(--media-pesata-accent-3) h s 75%);
border: 2px solid var(--palette-black); border: 2px solid var(--palette-black);
border-radius: 4px; border-radius: 4px;
font-family: var(--font-secondary); font-family: var(--font-secondary);
@@ -542,7 +746,7 @@
} }
.result-item.highlight { .result-item.highlight {
background: var(--homepage-projects-bg); background: hsl(from var(--media-pesata-accent-2) h s 75%);
font-weight: bold; font-weight: bold;
font-size: 1.2rem; font-size: 1.2rem;
} }
@@ -579,11 +783,7 @@
} }
/* Responsive */ /* Responsive */
@media (max-width: 768px) { /* @media (max-width: 768px) {
.media-pesata-app {
padding: 1rem;
}
.course-grid { .course-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
@@ -629,17 +829,16 @@
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
/* Mantieni il massimo voto centrato anche su mobile */
.result-item:nth-child(4) { .result-item:nth-child(4) {
order: -1; order: -1;
grid-column: 1; grid-column: 1;
justify-self: center; justify-self: center;
max-width: 100%; max-width: 100%;
} }
} } */
/* Layout ultra-compatto per schermi molto piccoli */ /* Layout ultra-compatto per schermi molto piccoli */
@media (max-width: 480px) { /* @media (max-width: 480px) {
.course-item { .course-item {
padding: 0.5rem; padding: 0.5rem;
gap: 0.25rem; gap: 0.25rem;
@@ -678,7 +877,7 @@
height: 26px; height: 26px;
font-size: 0.9rem; font-size: 0.9rem;
} }
} } */
.section-header { .section-header {
display: flex; display: flex;
@@ -773,8 +972,31 @@
/* Calculate button */ /* Calculate button */
.calculate-section { .calculate-section {
text-align: center; display: grid;
margin: 2rem 0; place-content: center;
padding: 2rem 0 1rem;
button {
font-size: 20px;
padding: 1rem;
/* border 3px */
border: 3px solid var(--palette-black);
border-radius: 6px;
box-shadow: 4px 4px 0 0 var(--palette-black);
&:hover {
transform: translate(-1px, -1px);
box-shadow: 5px 5px 0 0 var(--palette-black);
}
&:active {
transform: translate(2px, 2px);
box-shadow: 2px 2px 0 0 var(--palette-black);
}
background: hsl(from var(--media-pesata-accent-2) h s 75%);
}
} }
.calculate-btn { .calculate-btn {
@@ -855,3 +1077,18 @@
} }
} }
} }
@layer utility {
@media screen and (max-width: 1024px) {
.card {
> .h-flex {
flex-direction: column;
align-items: start;
> .spacer {
display: none;
}
}
}
}
}