Requerimientos para avanzar
- El sitio deberá usar Bootstrap para un estilo moderno.
- Cuando inicies sesión, el correo del usuario deberá aparecer en la parte superior derecha en la esquina de la barra de navegación.
¡Establece un límite de tiempo!
El propósito de esta sección es hacer tu aplicación visualmente atractiva y demostrar cómo agregar un framework CSS como Bootstrap usando Gemfile. No te preocupes por tener tu CSS perfecto, a menos que eso sea una prioridad para ti.
Puntos de Discusión
- Herramientas de desarrollo de Chrome / plugin Firebug de Firefox - ¡cómo utilizarlas!
- ¿Qué es Bootstrap y (opcional) por qué todos lo aman (o al menos lo utilizan en todos lados)?
- Tal vez revisar el archivo home/index.html.erb y cómo se relaciona con layouts/application.html.erb, y ver cómo podrías editarlos para tomar ventaja de bootstrap.
- Alguien debe explicar cómo funciona erb - lo estarás usando para mostrar el correo del usuario en la parte derecha.
Pistas
- ¡No olvides leer el readme!
- Existen un par de formas para mover el texto - busca "Component alignment" en la documentación.
- Devise tiene un método helper para accesar al usuario actual - regresa al readme de devise y búscalo.
Una Gran Pista
Si no puedes conseguir el código HTML para la barra de navegación con Bootstrap, o quieras moverte rápido a la siguente página, aquí hay un código que puedes usar en tu diseño (¡después de instalar Bootstrap!) que funcionará. El código deberá ir inmediatamente después de tu etiqueta <body>.
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Tablero de Mensajes</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="/">Inicio</a></li>
</ul>
<p class="navbar-text pull-right">usuario_con_sesion@email.com | <a href="log_out_link_here">Cerrar Sesión</a></p>
</div>
</div>
¡Todavía tienes que agregar código para mostrar el usuario que inició sesión y agregar un botón para cerrarla!