Ho apportato alcune semplici modifiche alla pagina della chat per migliorarne il design e renderla più fluida. Ecco un riepilogo delle modifiche apportate:
- Spostato l’indicatore di digitazione:
Ho riposizionato l’indicatore di digitazione in modo che ora venga visualizzato sopra la casella di testo anziché sotto. Sembra più naturale e più facile da notare quando qualcuno sta digitando. - Aumentata la dimensione del carattere dell’indicatore di digitazione:
Ho aumentato leggermente la dimensione del carattere dell’indicatore di digitazione. Ora è più visibile e risalta un po’ di più, rendendolo più facile da leggere a colpo d’occhio. - Pulizia delle immagini:
Ho rimosso il nome/URL del documento che circondava le immagini e ho aggiunto un piccolo raggio ai bordi. Ciò conferisce alle immagini un aspetto più pulito e raffinato e rimuove il disordine non necessario. - Reso più dinamico l’indicatore di digitazione:
Ho aggiunto un piccolo effetto dinamico all’indicatore di digitazione. Ora, quando appare, i messaggi scorrono leggermente verso l’alto per fare spazio e quando l’indicatore scompare, i messaggi scorrono di nuovo verso il basso. Questa transizione fluida rende l’intera esperienza più fluida e interattiva.
Queste sono solo piccole modifiche di design. Per me sembra più pulito, più fluido e nel complesso più rifinito. Fammi sapere cosa ne pensi e sentiti libero di suggerire altre modifiche o miglioramenti!
Ecco il codice:
// indicatore di digitazione
/* Aggiunge spazio sotto l'indicatore di risposta */
.chat-replying-indicator-container {
order: -1; /* Sposta l'indicatore di risposta sopra l'area di testo */
}
.chat-composer__outer-container {
display: flex
;
align-items: center;
box-sizing: border-box;
width: 100%;
padding-inline: 0rem;
padding-bottom: 1rem;
}
.chat-message-collapser .chat-message-collapser-header {
display: none;
align-items: center;
}
.chat-message .onebox img:not(.ytp-thumbnail-image, .onebox-avatar-inline),
.chat-message img.onebox,
.chat-message .chat-uploads img,
.chat-message p img,
.chat-message aside.onebox .onebox-body .aspect-image-full-size,
.chat-message aside.onebox .onebox-body .aspect-image-full-size img,
.chat-message .chat-message-text p img:not(.emoji) {
object-fit: cover; /* Copre il contenitore per preservare il border-radius */
max-height: 300px;
max-width: 90%;
width: unset;
overflow: hidden;
border-radius: 20px; /* Angoli arrotondati */
}
.chat-replying-indicator {
color: var(--primary-medium);
display: inline-flex;
font-size: 1em;
padding-bottom:10px;
}
.chat-replying-indicator-container {
margin-bottom: 10px; /* Regola il valore secondo necessità */
margin-top: -20px;
}
.chat-replying-indicator-container {
margin-top: -30px; /* Posizione predefinita quando non si digita */
transition: margin-top 0.3s ease; /* Transizione fluida */
}
.chat-replying-indicator-container:has(.chat-replying-indicator__text) {
margin-top: 0px; /* Posizione quando si digita */
}
PS: Questo è appositamente per dispositivi mobili.
Ecco come appare ora:
