Other Pages

Clean Up Links On The Topics List

Goals

    Our app is nearly done! But the main topics listing page is still pretty busy, and does not look like a list at all.

    Let's clean up the topics list page by doing the following:

  • Remove the 'Show this topic' link

  • Turn it into a real list

Steps

Step 1: Remove the 'Show this topic' links

Open app/views/topics/index.html.erb and remove these two lines:

<p>
  <%= link_to "Show this topic", topic %>
</p>

Step 2: Turn it into a real list

Instead of a sequence of <div>s create a real list. Open app/views/topics/index.html.erb and replace everything inside from <div id="topics"> to the last </div>:

<ul id="topics">
  <% @topics.each do |topic| %>
    <li id="<%= dom_id topic %>">
        <%= link_to topic.title, topic %>
        <%= pluralize(topic.votes.count, "vote") %>
        <%= button_to '+1', upvote_topic_path(topic), method: :post %>
    </li>
  <% end %>
</ul>

Reload the page in the browser to see the changes. You should see a list now. But the voting-buttons still appear on a line by themselves

Step 3: Add some CSS to get the button in line

Create a new file app/assets/stylesheets/topics.css and save the following code to it:

ul#topics form {
  display: inline;
}

Step 4: Confirm your changes

Now save your file and try reloading in your browser to see the changes.

The topic listing page should now look something like this:

Explanation

  • We removed the "Show this topic" link because we have the title as a link to the same page now
  • We used the HTML Tags <ul> and <li> to display a list

Now would be a good time to commit to git

find a good commit message and commit your changes

Next Step:

Go on to Credits And Next Steps