Aplicando um design moderno com o Bootstrap

Criado por Alex Liao, @alexliao

Agora sua aplicação está rodando bem, mas ainda está com cara de que foi gerado automaticamente. Vamos adicionar algum design para fazer ele parecer como um website profissional. Você tiver terminado esse tutorial, sua aplicação deve se parecer com isso.

1.Ajuste o layout da aplicação

Abra o arquivo app/assets/stylesheets/application.css, e troque a linha

body { padding-top: 100px; }

por

body { padding-top: 60px; }

Finalmente, apague o arquivo app/assets/stylesheets/scaffolds.scss porque nós não precisaremos do estilo padrão gerado pelo Rails.

Agora, atualize a página em http://localhost:3000/ideas. Você não vai encontrar muitas mudanças, mas é uma boa preparação para os próximos passos.

2.Melhore a navegação

Considerando que uma “ideia” é a coisa mais importante na sua aplicação, nós vamos colocar o botão “Nova ideia” na barra de navegação para torná-lo sempre visível.

Abra app/views/layouts/application.html.erb, abaixo da linha

<li class="active"><a href="/ideas">Ideias</a></li>

adicione

<li ><%= link_to 'Nova Ideia', new_idea_path %></li>

3.Melhore a lista de idéias

Agora é hora de fazer a página de idéias se tornar profissional. Para isso, nós vamos substituir o layout de tabelas por divs.

Treinadores: Falem um pouco sobre tabelas vs div.

Abra app/views/ideas/index.html.erb no seu editor de texto e troque todas as linhas por:

<h1>Listando idéias</h1>

<% @ideas.in_groups_of(3) do |group| %>
  <div class="row">
    <% group.compact.each do |idea| %>
      <div class="col-md-4">
        <%= image_tag idea.picture_url, width: '100%' if idea.picture.present?%>
        <h4><%= link_to idea.name, idea %></h4>
        <%= idea.description %>
      </div>
    <% end %>
  </div>
<% end %>

Coach: Explique o novo código linha por linha, e fale um pouco sobre como o bootstrap divide o layout em 12 grids.

Atualize! Vamos ter uma lista muito mais bonita. Clique no botão “Nova idéia” e crie mais idéias com texto real e fotos bonitas - a página vai ficar muito melhor com conteúdo. Existe um princípio do design web contemporâneo: o conteúdo é a melhor decoração.

4.Melhore a página de detalhes de uma Idéia

Clique no título de uma idéia e você será levada para a página de detalhes da idéia. Agora, ainda está com o scaffold gerado pelo Rails, então vamos torná-la melhor.

Abra app/views/ideas/show.html.erb no seu editor e troque todas as linhas por:

<p id="notice"><%= notice %></p>

<div class="row">
  <div class="col-md-9">
    <%= image_tag(@idea.picture_url, width: '100%') if @idea.picture.present? %>
  </div>

  <div class="col-md-3">
    <p><b>Nome: </b><%= @idea.name %></p>
    <p><b>Descrição: </b><%= @idea.description %></p>
    <p>
      <%= link_to 'Editar', edit_idea_path(@idea) %> |
      <%= link_to 'Apagar', @idea, data: { confirm: 'Você tem certeza?' }, method: :delete %> |
      <%= link_to 'Voltar', ideas_path %>
    </p>
  </div>
</div>

Treinadores: Expliquem o novo código linha por linha.

E agora?

Anterior   Próximo