In this video, we are going to style our show page. If you see, our functionality is working fine, but we need to present the information in a more visually appealing way, and that's what we are going to do in this lecture.

The first step is to add a link to the show page. Open _post.html.erb and add a link on rationale, since that's a mandatory field.

<!-- app/views/posts/_post.html.erb -->

<td>
  <%= link_to truncate(post.rationale), post %>
</td>
<td>
  <%= status_label post.status %>
</td>

If you refresh the browser, you can see the link, and if you click on rationale, it takes you to the show page. Now, we have to style the show page.

Let's see, what fields do we want to display? I think it's best to leave out created_at and updated_at fields as having three dates on the same page can be confusing.

Ok, go to show.html.erb, and create different div tags. I think one of the first things that users would want to see is the rationale and overtime request. Simply add each attribute inside a div a different tag. This is how the code should look like:

<!-- app/views/posts/show.html.erb -->

<div>
  <h2><%= @post.rationale %></h2>
</div>

<div>
  <h3><span>Overtime Amount Requested:</span> <%= @post.overtime_request %></h3>
</div>

<div>
  <h3><span>Employee:</span> <%= @post.user.full_name %></h3>
</div>

<div>
  <h3><span>Date:</span> <%= @post.date %></h3>
</div>

<div>
  <h3><span>Current Stage of Approval:</span> <%= @post.status %></h3>
</div>

And if you refresh, this is how it should look in the browser.

Now, I'm going to add a little box for the content with a div class.

<!-- app/views/posts/show.html.erb -->

<div>
  <h2><%= @post.rationale %></h2>
</div>

<div class="well">
  <div>
    <h3><span>Overtime Amount Requested:</span> <%= @post.overtime_request %></h3>
  </div>

  <div>
    <h3><span>Employee:</span> <%= @post.user.full_name %></h3>
  </div>

  <div>
    <h3><span>Date:</span> <%= @post.date %></h3>
  </div>

  <div>
    <h3><span>Current Stage of Approval:</span> <%= @post.status %></h3>
  </div>
</div>

Next, I want to add an edit link for users to edit the post. However, it should be visible only for authorized users, so I'm calling our policy here.

<!-- app/views/posts/show.html.erb -->

<%= link_to 'Edit', edit_post_path(@post), class: 'btn btn-primary' if policy(@post).update? %>

That looks like the look and feel I want right now, so we'll commit it to GitHub and move along.

Resources

• Code at this stage