Our application is coming along nicely, before we can move onto the next set of features we should fix some of the small bugs in the template files. In this guide we will clean up a few items in the view templates that will help polish up the look and feel of the application. I can't tell you how many times that I've spent weeks working tirelessly building out complex functionality in an app to only have a manager spend the entire demo harping on a spelling mistake, so I've learned that it's critical to clean up the look and fell of an application at the end of each iteration.

Let's put together a list of the items that need to be fixed and then we can knock them out one by one:

• The designer misspelled Sign Up (screenshot 1)
• The Sign Up links need to be functional (screenshot 1)
• Our list of topics for the homepage sidebar is too long (screenshot 1)
• I'm not a fan of the header having two colors (screenshot 2)
• Clicking the logo throws and error (screenshot 2)
• We don't need the placeholder items on the post show page (screenshot 2)

Screenshot 1

Screenshot 1

Customizing the Header

In looking at the screenshots, it looks like three of the issues are related to the header, so let's take care of those first, this will include:

• Having the logo link to the homepage
• Fixing spelling issues for the registration links
• Making the links functional

Let's open up the view partial for the header and make the changes:

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

<div class="grey2"></div>

<div id="header">
  <div class="container">
    <div class="row">
      <div class="grey"></div>
      <a class="col-xs-3 logo pull-left" href="<%= root_url %>">
        <%= image_tag('common/logo.png') %>
        <%= image_tag('common/logo_small.png', class: 'logo-small') %>
      </a>
      <div class="col-xs-9 pull-left">
        <div class="col-xs-6 pull-left">
          <span class="icon icon-search"></span>
          <input type="text" placeholder="Search..."/>
        </div>
        <div class="col-xs-3 avatar pull-right">
          <a href="<%= root_url %>">
            <div class="mask"></div>
            <%= image_tag('common/guest_image.png') %>
          </a>
          <strong>Welcome Guest!</strong>
          <%= link_to "Login", new_user_session_path %> or
          <%= link_to "Register", new_user_registration_path %>
        </div>
      </div>
      <div class="clearfix"></div>
    </div>
  </div>
</div>

<div id="main-menu" class="small">
  <div class="container">
    <div class="row">
    </div>
  </div>
</div>

As you can see we've made all of the links live, along with fixing the spelling issues, if you refresh the browser you'll see that it's looking better.

Do you notice how easy it was to isolate where to find what had to change? That's one of the great things about using partials since they segment view code into easy to organize chunks.

Removing Placeholder Items

It's going to be a while until we would have any data to fill the placeholder sections on the post page and I'm not a fan of keeping any placeholder data up for too long, so let's simply update the code so it looks like the snippet below. Notice that I did keep the next post placeholder there because that's going to be one of the next features that we implement.

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

<div class="container">
  <div class="row">
    <div class="col-xs-9 article-content pull-left">
      <h1 class="col-xs-6 pull-left"><%= @post.title %></h1>
      <span>By <strong><%= @post.user.full_name %></strong> <%= @post.created_at.strftime("Published: on %m/%d/%Y at %l:%M%P") %></span>

      <p><strong>Topic:</strong> <%= @post.topic.title %></p>

      <a href="#show-sidebar" class="btn btn-default btn-green show-sidebar"><span>Show More Details</span></a>

      <div class="clearfix"></div>

      <p class="col-xs-8 first"><%= @post.content %></p>

      <hr/>

      <div class="actions">
        <% if current_user && @post.user_id == current_user.id %>
          <%= link_to "Edit Post", edit_topic_post_path(topic_id: @topic.id, id: @post.id), class: 'btn btn-default btn-green' %>
        <% end %>
      </div>
    </div>
    <div class="col-xs-3 article-sidebar pull-right">
      <div class="next-article">
        <div class="btn btn-left"></div>
        <div class="btn btn-right"></div>
        <h1>Scientists find closest thing yet to Earth-sun twin system</h1>
        <span>By <strong>Thomas Gibbons-Neff</strong> and <strong>Carol Morell</strong> June 20 at 4:05 PM</span>
      </div>
    </div>
  </div>
</div>

That's looking much better!

Removing Two Tone Styles

Lastly, let's update the CSS style that is causing the header to have two different background colors. If we go to any page on the site and use the browser inspector we can see that the section to the right has a style of background: #FBFCFD;.

I want to use this color across the entire header, so let's update the #header id so that this color fills out the entire section.

/* app/assets/stylesheets/template/main.css.erb */

#header {
    height:99px;
    position:relative;
    background: #FBFCFD;   
}

Now if you refresh the browser you'll see that the colors are now uniform on the header and that's looking much better.

With all of that in place I think we're ready to close this section on implementing a design in a Rails application, in the next guide we'll create a pull request and merge our code into the master branch.

Resources

• Project code at this stage