Using a panel

At this point, our posts are image-based. It would be great, though, if they would look a bit better, a bit more like on Instagram, with a simple and clear flow for the user. We can use Bootstrap's Panel component to get closer to what we need.

We'd like to have the title in the header and the additional info and actions in the footer. You already know that we will be changing the layout in the /app/views/posts/index.html.erb file.

Looking at the Panel documentation we can see that there is a panel with header example, that looks like this:

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Hmm... We have the panel-default part and a <p></p> block with the post description. So what we need to do is change from:

<p><%= post.title %></p>

to

<div class="panel-heading">
  <h3 class="panel-title"><%= post.title  %></h3>
</div>

and move it one line up exchanging places with <span class="label label-default"><%="Created by: #{post.user.try(:email)}"%></span> line.

We would also like to move the image to the panel body, so instead of:

<p><%= image_tag(post.image_link, width: 600) %></p>

we move to:

<div class="panel-body">
  <%= image_tag(post.image_link, width: 600) %>
</div>

Save and refresh...

Much better. Let's move to the footer.

The documentation tell us:

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

This means that we take the part with created by, move it to edit and delete links:

<span class="label label-default"><%= "Created by: #{post.user.try(:email)}"%></span>
<% if current_user == post.user %>
  <%=link_to("Delete", post_path(post), method: :delete) %>
  <%=link_to("Edit", edit_post_path(post)) %>
<% end %>

and all together move it inside <div class="panel-footer"></div>, like this:

<div class="panel-footer">
  <span class="label label-default"><%= "Created by: #{post.user.try(:email)}"%></span>
  <% if current_user == post.user %>
    <%=link_to("Delete", post_path(post), method: :delete) %>
    <%=link_to("Edit", edit_post_path(post)) %>
  <% end %>
</div>

Save and refresh...

Good enough.

Finally, this is what I have in the /app/views/posts/index.html.erb file:

<%=link_to("Create a new post", new_post_path) %>
<%= link_to('Logout', destroy_user_session_path, method: :delete) %>

<div class="container">
  <h1>Posts</h1>
  <ul>
    <% Post.all.each do |post| %>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title"><%= post.title  %></h3>
        </div>
        <p><%= post.description %></p>
        <div class="panel-body">
          <%= image_tag(post.image_link, width: 600) %>
        </div>
        <div class="panel-footer">
          <span class="label label-default"><%= "Created by: #{post.user.try(:email)}"%></span>
          <% if current_user == post.user %>
            <%=link_to("Delete", post_path(post), method: :delete) %>
            <%=link_to("Edit", edit_post_path(post)) %>
          <% end %>
        </div>
      </div>
    <% end %>
  </ul>
</div>

Prettier things will follow. Next we'll style the edit and delete links.