Other Pages

Make The Topic Title A Link

Goals

    Usability testing (= some friends trying out the app) found that the front page is too cluttered and should look more like a list:

  • Don't show the description on the list page

  • Make the title a link and only when it's clicked show all the details like the description

Steps

Step 1: Replace the partial in the index view.

Right now the _topic partial is used on the index page and on the show page. If we want to have two different ways of displaying a topic we need split this apart. find the line in app/views/topcis/index.html.erb

<%= render @topic %>

and replace this line with all the code you find in the partial app/views/topics/_topic.html.erb

Reload the index page in the browser to check that the app still looks the same as before in the browser.

What you just did is called 'refactoring': you changed how the code is written, but did not change what the code does.

Step 2: Remove the description

Let's start by removing the description. Open app/views/topics/index.html.erb and delete the lines that looks like this:

<p>
  <strong>Description:</strong>
  <%= topic.description %>
</p>

If you save and try to load it in the browser you should see that the description no longer appears on the index page but is still shown when you click on 'show this topic'.

Step 3: Make the title a link

Now make the title a link by editing app/views/topics/index.html.erb (again) and replacing this line:

<p>
  <strong>Title:</strong>
  <%= topic.title %>
</p>

with this:

<h2><%= link_to topic.title, topic %></h2>

Explanation

<%= link_to topic.title, topic %>

In Rails, we don't write our own <a href> Tags, we use the link_to helper method instead. It takes two arguments: first the text that should be displayed, and second the URL we want to link to. In this case we just supplied a model, and Rails figured out the URL for showing this model.

Next Step:

Go on to Clean Up Links On The Topics List