Other Pages

Expand All

Clean Up Links On The Topics List

Goals

    Our app is nearly done! The main topics listing page is pretty busy. There are a lot of links that aren't necessary.

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

  • Removing the "show" link

  • Removing the "edit" link

  • Changing "destroy" to "delete"

Steps

Step 1: Remove the "show" and "edit" links

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

<td><%= link_to "Show", topic %></td>
<td><%= link_to "Edit", edit_topic_path(topic) %></td>

Step 2: Change "destroy" to "delete"

Change the line with the word "Destroy" to this:

<td><%= link_to "Delete", topic, method: :delete, data: { confirm: "Are you sure?" } %></td>

Step 3: Confirm your changes

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

Step 4: Extra Credit!

Give your new website a personal touch by styling it and adding an image.

Your Rails application loads a CSS stylesheet from the file app/assets/stylesheets/scaffolds.scss. Open this file in your text editor.

If you have web design skills already, you can go to town. If not, let's make a simple font change.

Change the body's font-family on lines 5 and 11 to serif:

font-family: serif;

Reload your browser to see your web pages styled in a different font.

Let's add an image to the layout. Open app/views/layouts/application.html.erb in your text editor.

Right after the opening <body> tag, let's add an image:

<img src="http://i.imgur.com/MQHYB.jpg"/>

Reload your browser. You should see an image!

You can choose another image from the web and change the src attribute value. If the image is too big, you can resize it like this:

<img src="http://i.imgur.com/MQHYB.jpg" height="100" />

The height="100" ensures that the image is 100 pixels tall, and no more.

Explanation

  • The two links we removed were show and edit. We did this because the title now links to the show page and from the show page you can reach the edit page.

  • The second change we made was to make the link text 'Delete' instead of destroy.

Next Step:

Go on to Credits And Next Steps

Back to Make The Topic Title A Link