1.4: Barra de Navegación y Layout - wyeworks/rails-workshop-2017-dia-1 GitHub Wiki

Barra de Navegación y Layout

En esta parte veremos como agregar un header a nuestra aplicación, que estará presente en todas las secciones de la misma.

1. Agregamos el header

Creamos el directorio app/views/shared y un partial para el header (_header.html.erb) dentro de ese directorio:

<!-- app/views/shared/_header.html.erb -->

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <%= link_to 'Trello App', root_path, class: 'navbar-brand' %>
    </div>
  </div>

</nav>

Agregamos ese partial al layout de la aplicación:

<!-- app/views/layouts/application.html.erb -->

<!DOCTYPE html>
<html>
  <head>
    <title>TrelloApp</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <!-- El contenido del <body> es lo que estamos cambiando -->
  <body>
    <%= render 'shared/header' %>

    <div class="container-fluid">
      <div class="row">
        <div class="col-xs-12">
          <%= yield %>
        </div>
      </div>
    </div>
  </body>
  <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - -->

</html>

Probamos ver como quedaron los cambios (observar que ahora aparece un header en la parte superior).

2. Mejoramos el código del listado de boards

Hacemos render de una colección.

<!-- app/views/boards/index.html.erb -->

<h1>Boards</h1>

<div class="row">
  <%= render @boards %>

  <div class="col-xs-12 col-sm-3">
    <div class="panel panel-default">
      <%= link_to new_board_path do %>
        <div class="panel-body">
          <h3 class="panel-title">Create new board...</h3>
        </div>
      <% end %>
    </div>
  </div>
</div>

Usaremos un partial para el HTML de cada board. Para eso es necesario crear el partial _board.html.erb.

<!-- app/views/boards/_board.html.erb -->

<div class="col-xs-12 col-sm-3">
  <div class="panel panel-default">
    <%= link_to board do %>
      <div class="panel-body">
        <h3 class="panel-title"><%= board.name %></h3>
      </div>
    <% end %>
  </div>
</div>

Probamos en el browser:

Commit en Git

git add -A
git commit -m "Barra de navegación y layout"

Siguiente: 1.5. Validaciones

⚠️ **GitHub.com Fallback** ⚠️