Quick tip 1: Using a bootstrap panel

At this point, our cases 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.

Here's how our page looks initially:

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/cases/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 case id. So what we need to do is change from:

<p> <%= "Case id: " +  c.id.to_s %> </p>

to

  <div class="panel-heading">
    <h3 class="panel-title"><%= "Case id: " +  c.id.to_s %></h3>
  </div>

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

<%= image_tag(c.image_link, width: 600 ) %>

we move to:

<div class="panel-body">
  <%= image_tag(c.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:

<span class="label label-default"><%= "Created by: " + c.user.email %></span>
<p> <% if current_user == c.user %>
      <%=link_to("Edit", edit_case_path(c)) %>
      <%=link_to("Delete", case_path(c), method: :delete) %>
    <% end %>
</p>

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

<div class="panel-footer">
  <span class="label label-default"><%= "Created by: " + c.user.email %></span>
  <p>
      <% if current_user == c.user %>
        <%=link_to("Edit", edit_case_path(c)) %>
        <%=link_to("Delete", case_path(c), method: :delete) %>
      <% end %>
  </p>
</div>

Save and refresh...

Good enough.

I still feel like the <p> </p> solution for the Edit and Delete links is not orthodox and the white space around the image could use some improvements... but hey, it's progress!

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

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

<div class="container">
<h1>Cases</h1>
<ul>
  <% Case.all.each do |c| %>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title"><%= "Case id: " +  c.id.to_s %></h3>
      </div>
      <div class="panel-body">
        <%= image_tag(c.image_link, width: 600 ) %>
      </div>
      <div class="panel-footer">
        <span class="label label-default"><%= "Created by: " + c.user.email %></span>
        <p>
            <% if current_user == c.user %>
              <%=link_to("Edit", edit_case_path(c)) %>
              <%=link_to("Delete", case_path(c), method: :delete) %>
            <% end %>
        </p>
      </div>
    </div>
  <% end %>
</ul>
</div>

Prettier things will follow. Stay tuned for more tips!