A todos nos ha pasado que cuando construimos nuestras aplicaciones, por lo general enfocamos toda nuestra energía y tiempo en las funcionalidad core y muchas veces olvidamos o dejamos para última hora esos pequeños -pero no menos importantes- detalles que mejoran la experiencia del usuario cuando interactúa con nuestra aplicación.
El objetivo del tutorial es dar un estilo más «elegante» a las notificaciones flash de rails, como aquellas que utiliza Devise utilizando Sassy CSS y la archi famosa librería de Javascript: Jquery
Pre-requisito: Tener un proyecto en Rails 4.2 o superior y la gema Devise instalada y configurada en localhost. (repo en github)
1. Notificaciones y Alertas flash
Las notificaciones flash son variables en rails que viven sólo por un llamado a una página, después de eso se borran y como viven muy poco tiempo se les denomina flash, es muy común usarlas para señalizar al usuario que ha creado bien un recurso o que lo ha borrado con éxito, estas mismas variables se crean cuando creamos un recurso por scaffold o cuando instalamos la gema devise, si hacemos memoria en uno de los puntos de la instalación hay que agregar dos variables en layouts/application.html.erb cierto? que son:
<p class="notice"><%= notice %></p> <p class="alert"><%= alert %></p>
Los notice son todos aquellos mensajes que notifican al usuario como por ejemplo «Usuario registrado exitosamente» entre otros y los Alert son aquellos mensajes del tipo «Email o contraseña inválidos»…pues bien, vamos a modificar un poco estas lineas de código y las dejaremos de la siguiente manera: (justo debajo de <body> como en la imagen)
<div id="notice_wrapper"> <% if notice %> <p class="notice"><%= notice %></p> <% elsif alert %> <p class="alert"><%= alert %></p> <% end %> </div>
La razón de los ifs es para evitar poner las etiquetas html en caso de que la variable flash no esté definida.
2. SCSS (Sassy CSS).
Ahora vamos a agregar un estilo en Sassy CSS. En Rails verás en assets/stylesheets archivos con extensión .scss (Sassy CSS) generalmente cuando creas scaffold o controllers, automáticamente se agrega un archivo .scss ….por eso decidí darle una oportunidad para probar que beneficios tiene usar scss en lugar del clásico archivo .css al que estoy acostumbrada.
Una de las ventajas que noté de Sassy CSS entre otras cosas es que permite «anidación de selectores dentro de selectores». Esto lo encontré bastante práctico porque al cambiar el «nombre» de un elemento, sólo tendrás que cambiarlo en un lugar (el selector externo) en vez de numerosos lugares como lo harías al escribir CSS. (queda más claro si ves esta imagen!)
Entonces copia y pega este bloque Scss en un archivo en esta ruta app/assets/stylesheet/notice.scss
/* notice and alert devise gem in SCSS SASSY CSS*/
#notice_wrapper {
display: none;
position: absolute;
top: 0;
width: 100%;
z-index: 999;
.alert { background: rgba(255, 100, 5, 0.80); }
.notice{ background:rgba(91, 192, 222, 0.80); }
.alert, .notice {
color: #fff;
font-size: 16px;
font-weight: 700;
letter-spacing: 1px;
margin: 0;
padding: 35px 0;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
}
3. Animando con Jquery.
Por último, vamos a agregar una animación muy simple al div #notice_wrapper con Jquery. Lo que queremos lograr es que cada vez que devise envíe una notificación o alerta por pantalla al usuario, el mensaje aparezca lentamente (fadeIn), se mantenga 2 segundo (delay) y desaparezca totalmente (fadeOut). Este código te recomiendo ponerlo en tu archivo donde tienes los scripts de tu app, suele tener el nombre de app/assets/javascript/main.js
$(document).ready(function() {
$("#notice_wrapper").fadeIn("slow").delay(2000).fadeOut("slow");
});
Yo dejaría el mensaje no más de 3 segundos ya que son mensajes cortos que no requieren mucho tiempo en pantalla, y dejarlo más de ese tiempo puede llegar incluso a molestar a tus usuarios.
Puedes revisar más a fondo estos métodos fadeIn, delay y FadeOut en la documentación oficial de Jquery.
Y listo, ya tienes notificaciones y Alertas de devise más «estilosas» en tu aplicación.
Aqui comparto el repo en github
#keepCoding