He realizado algunos ajustes sencillos en la página de chat para mejorar el diseño y que se sienta más fluida. Aquí tienes un resumen de los cambios que hice:
- Moví el indicador de escritura:
Reposicioné el indicador de escritura para que ahora aparezca encima del cuadro de texto en lugar de debajo. Se siente más natural y es más fácil de notar cuando alguien está escribiendo. - Aumenté el tamaño de fuente del indicador de escritura:
Hice que el tamaño de fuente del indicador de escritura fuera un poco más grande. Ahora es más visible y destaca un poco más, lo que facilita su lectura de un vistazo. - Limpié las imágenes:
Eliminé el nombre/URL del documento que solía rodear las imágenes y les añadí un pequeño radio de borde. Esto le da a las imágenes un aspecto más limpio y pulido, y elimina el desorden innecesario. - Hice el indicador de escritura más dinámico:
Añadí un pequeño efecto dinámico al indicador de escritura. Ahora, cuando aparece, los mensajes se deslizan ligeramente hacia arriba para hacer espacio, y cuando el indicador desaparece, los mensajes se deslizan hacia abajo. Esta transición suave hace que toda la experiencia se sienta más fluida e interactiva.
Estos son solo pequeños ajustes de diseño. Para mí, se ve más limpio, se siente más suave y, en general, más pulido. ¡Hazme saber lo que piensas y no dudes en sugerir cualquier otro cambio o mejora!
Aquí está el código:
// typing indicator
/* Add space below the replying indicator */
.chat-replying-indicator-container {
order: -1; /* Moves the replying indicator above the text area */
}
.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; /* Cover the container to preserve the border-radius */
max-height: 300px;
max-width: 90%;
width: unset;
overflow: hidden;
border-radius: 20px; /* Rounded corners */
}
.chat-replying-indicator {
color: var(--primary-medium);
display: inline-flex;
font-size: 1em;
padding-bottom:10px;
}
.chat-replying-indicator-container {
margin-bottom: 10px; /* Adjust the value as needed */
margin-top: -20px;
}
.chat-replying-indicator-container {
margin-top: -30px; /* Default position when not typing */
transition: margin-top 0.3s ease; /* Smooth transition */
}
.chat-replying-indicator-container:has(.chat-replying-indicator__text) {
margin-top: 0px; /* Position when typing */
}
PD: Esto es especialmente para móviles.
Así es como se ve ahora:
