Other Pages

Expand All

clean_up_links_on_the_topics_list.step

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

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

  goal 'Removing the "show" link'
  goal 'Removing the "edit" link'
  goal 'Changing "destroy" to "delete"'
end

steps do
  step 'Remove the "show" and "edit" links' do
    message "Open `app/views/topics/index.html.erb` and remove these two lines:"
    source_code :erb, <<-HTML
<td><%= link_to "Show", topic %></td>
<td><%= link_to "Edit", edit_topic_path(topic) %></td>
    HTML
  end

  step 'Change "destroy" to "delete"' do
    message 'Change the line with the word "Destroy" to this:'
    source_code :erb, '<td><%= link_to "Delete", topic, method: :delete, data: { confirm: "Are you sure?" } %></td>'
  end

  step "Confirm your changes" do
    message "Now save your file and try reloading in your browser to see the changes."
  end

  step "Extra Credit!" do
    message <<-MARKDOWN
      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.
    MARKDOWN
  end
end

explanation do
  message <<-MARKDOWN
  * 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.
  MARKDOWN
end

next_step "credits_and_next_steps"