++ scelta di territori e proclamatori con ricerca
Al posto delle tendine (Assegna, Registro, editor delle piantine) un
campo in cui si scrive e compaiono le proposte più vicine: uguale, inizia
con, contiene, errore di battitura ("forse cercavi"); parole in qualsiasi
ordine, senza badare a maiuscole e accenti. Campo vuoto: la tendina
completa. Fatto anche per il telefono (16px, voci da 44px, scelta al tocco).
- Logica pura in resources/js/scelta.js con test node (tests/js).
- Opzioni dal server: Territorio/Proclamatore::opzioneScelta(); i
territori già assegnati si trovano ("già assegnato a …") ma non si
scelgono. Nomi cifrati ordinati e cercati decifrati, mai in SQL.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -1686,3 +1686,125 @@ html { scroll-behavior: smooth; }
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── Campo di scelta con ricerca (<x-scelta>) ──────────────────────────────
|
||||
Al posto delle tendine di territori e proclamatori. Pensato anche per il
|
||||
telefono: testo a 16px (sotto, iOS ingrandisce la pagina al tocco), voci
|
||||
alte almeno 44px, elenco che scorre dentro mezzo schermo. I selettori
|
||||
battono `.tm-campo input[type="text"]` dell'editor delle piantine. */
|
||||
.tm-scelta {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.tm-scelta-campo {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.tm-scelta input.tm-scelta-input {
|
||||
width: 100%;
|
||||
min-height: 44px;
|
||||
padding: 8px 76px 8px 12px;
|
||||
border: 1px solid var(--tm-bordo-forte);
|
||||
border-radius: var(--tm-raggio-interno);
|
||||
background: var(--tm-superficie);
|
||||
color: var(--tm-testo);
|
||||
font-family: inherit;
|
||||
font-size: 16px;
|
||||
line-height: 1.3;
|
||||
transition: border-color .15s ease, box-shadow .15s ease;
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.tm-scelta input.tm-scelta-input { min-height: 40px; font-size: 14px; }
|
||||
}
|
||||
.tm-scelta input.tm-scelta-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--tm-accento);
|
||||
box-shadow: 0 0 0 3px var(--tm-accento-tenue);
|
||||
}
|
||||
.tm-scelta input.tm-scelta-input:disabled {
|
||||
padding-right: 12px;
|
||||
background: var(--tm-superficie-alt);
|
||||
color: var(--tm-testo-medio);
|
||||
}
|
||||
.tm-scelta input.tm-scelta-input::placeholder { color: var(--tm-testo-tenue); }
|
||||
|
||||
.tm-scelta-pulisci,
|
||||
.tm-scelta-apri {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin-top: -18px;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: var(--tm-testo-tenue);
|
||||
cursor: pointer;
|
||||
}
|
||||
.tm-scelta-pulisci { right: 38px; }
|
||||
.tm-scelta-apri { right: 2px; }
|
||||
.tm-scelta-pulisci:hover,
|
||||
.tm-scelta-apri:hover { color: var(--tm-testo); background: var(--tm-superficie-alt); }
|
||||
.tm-scelta-pulisci svg,
|
||||
.tm-scelta-apri svg { width: 18px; height: 18px; transition: transform .15s ease; }
|
||||
.tm-scelta-apri svg.tm-scelta-giu { transform: rotate(180deg); }
|
||||
|
||||
.tm-scelta-elenco {
|
||||
position: absolute;
|
||||
z-index: 40;
|
||||
top: calc(100% + 4px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-height: min(50vh, 20rem);
|
||||
margin: 0;
|
||||
padding: 4px;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
list-style: none;
|
||||
border: 1px solid var(--tm-bordo);
|
||||
border-radius: var(--tm-raggio-interno);
|
||||
background: var(--tm-superficie);
|
||||
box-shadow: var(--tm-ombra-3);
|
||||
}
|
||||
.tm-scelta-voce {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
column-gap: 8px;
|
||||
row-gap: 2px;
|
||||
min-height: 44px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
color: var(--tm-testo);
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.tm-scelta-voce { min-height: 36px; padding: 7px 10px; font-size: 14px; }
|
||||
}
|
||||
.tm-scelta-voce-attiva { background: var(--tm-accento-tenue); }
|
||||
.tm-scelta-voce-scelta .tm-scelta-etichetta { font-weight: 700; color: var(--tm-accento-scuro); }
|
||||
.tm-scelta-voce-speciale { color: var(--tm-testo-medio); }
|
||||
.tm-scelta-voce-spenta { cursor: not-allowed; color: var(--tm-testo-tenue); }
|
||||
.tm-scelta-voce-spenta.tm-scelta-voce-attiva { background: var(--tm-superficie-alt); }
|
||||
.tm-scelta-dettaglio { font-size: 13px; color: var(--tm-testo-tenue); }
|
||||
.tm-scelta-motivo { flex-basis: 100%; font-size: 12px; color: var(--tm-attesa); }
|
||||
.tm-scelta-forse {
|
||||
padding: 1px 6px;
|
||||
border-radius: 999px;
|
||||
background: var(--tm-attesa-tenue);
|
||||
color: var(--tm-attesa);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.tm-scelta-vuoto {
|
||||
padding: 12px;
|
||||
color: var(--tm-testo-tenue);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user