Integrate the Design for the Topic Index Page
In this guide we will implement a design for the Topic index page that will render all of the topics and allow them to be clickable so users can navigate to see each topic's posts.
Guide Tasks
  • Read Tutorial

In this guide we will implement a design for the Topic index page that will render all of the topics and allow them to be clickable so users can navigate to see each topic's posts.

Right now if you navigate to http://localhost:3000/topics you'll see that we have a pretty ugly list of the topics.

large

In looking through the design mocks I didn't see anything that I really liked. My vision would be to have blocks that would run horizontally in a grid format, I used the original DevCamp layout for inspiration:

large

I like this because it's different than the rest of the site and it's also flexible, so we could integrate images or something like that later on. Also, the grid works nicely for responsive layouts for mobile devices. Thankfully Twitter Bootstrap already does the hard work for us with their grid and column system, so let's open up the topics index template and update it as below:

<!-- app/views/topics/index.html.erb -->

<div class="container">
  <div class="row">
    <%= render @topics %>
  </div>
</div>

That will leverage the row CSS class provided by Bootstrap and now we can update the single topic element in our partial:

<!-- app/views/topics/_topic.html.erb -->

<div class='col-xs-3'>
  <%= link_to topic.title, topic_posts_path(topic_id: topic) %>
</div>

If you refresh the browser you'll see the topics are now shown in a grid layout, so we're making progress:

large

Next we're going to create our own CSS class that will give our topics a block type look to them:

// app/assets/stylesheets/custom/topics.scss

.topics {
  height: 50px;
  background-color: #13809b;
  margin: 15px;
  padding: 10px;
}

.topics a {
  font-size: 1.4em;
  font-weight: 800;
  color: white;
}

If your CSS is a little rusty, this code is simply creating some boxes that match our site colors and changing the color of the Topic links to white. Now we simply need to add the topics CSS class to our partial div. We'll also add in the Bootstrap text-center class so our titles are centered in the div:

<!-- app/views/topics/_topic.html.erb -->

<div class='col-xs-3 topics text-center'>
  <%= link_to topic.title, topic_posts_path(topic_id: topic) %>
</div>

Now if you start the server up you'll see that the topics index page looks much better, nice work!

large

Running the specs will show that everything is still working properly, so our new work didn't break any of our previously implemented functionality. The site is looking good, in the next lesson we'll integrate pagination.

Resources