Agile Web Development with Rails, Edition 4

8.3 Iteration C3: Use a Helper to Format the Price 8.1 Iteration C1: Create the Catalog Listing

8.2 Iteration C2: Add a Page Layout

Expected at least 1 element matching "#banner", found 0.
<0> expected to be
>=
<1>.

Traceback:
  /home/rubys/git/awdwr/edition4/checkdepot.rb:123:in `block in <class:DepotTest>'

Demonstrate layouts.

Modify the application layout

edit app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
  <title>Pragprog Books Online Store</title>
  <!-- <label id="code.slt"/> --><%= stylesheet_link_tag    "application", media: "all",
    "data-turbolinks-track" => true %>
  <%= javascript_include_tag "application", "data-turbolinks-track" => true %><!-- <label id="code.jlt"/> -->
  <%= csrf_meta_tags %><!-- <label id="code.csrf"/> -->
</head>
<body class="<%= controller.controller_name %>">
  <div id="banner">
    <%= image_tag("logo.png") %>
    <%= @page_title || "Pragmatic Bookshelf" %><!-- <label id="code.depot.e.title"/> -->
  </div>
  <div id="columns">
    <div id="side">
      <ul>
        <li><a href="http://www....">Home</a></li>
        <li><a href="http://www..../faq">Questions</a></li>
        <li><a href="http://www..../news">News</a></li>
        <li><a href="http://www..../contact">Contact</a></li>
      </ul>
    </div>
    <div id="main">
      <%= yield %><!-- <label id="code.depot.e.include"/> -->
    </div>
  </div>
</body>
</html>

Modify the stylesheet

Rename the application stylesheet so that we can use SCSS

mv app/assets/stylesheets/application.css app/assets/stylesheets/application.css.scss

Add our style rules

edit app/assets/stylesheets/application.css.scss
/*
 * This is a manifest file that'll be compiled into application.css, which will
 * include all the files listed below.
 * 
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets,
 * vendor/assets/stylesheets, or any plugin's vendor/assets/stylesheets
 * directory can be referenced here using a relative path.
 * 
 * You're free to add application-wide styles to this file and they'll appear
 * at the bottom of the compiled file so the styles you add here take
 * precedence over styles defined in any other CSS/SCSS files in this
 * directory. Styles in this file should be added after the last require_*
 * statement. It is generally better to create a new file per style scope.
 * 
 *= require_tree .
 *= require_self
 */
 
#banner {
  background: #9c9;
  padding: 10px;
  border-bottom: 2px solid;
  font: small-caps 40px/40px "Times New Roman", serif;
  color: #282;
  text-align: center;
 
  img {
    float: left;
  }
}
 
#notice {
  color: #000 !important;
  border: 2px solid red;
  padding: 1em;
  margin-bottom: 2em;
  background-color: #f0f0f0;
  font: bold smaller sans-serif;
}
 
#columns {
  background: #141;
 
  #main {
    margin-left: 17em;
    padding: 1em;
    background: white;
  }
 
  #side {
    float: left;
    padding: 1em 2em;
    width: 13em;
    background: #141;
 
    ul {
      padding: 0;
 
      li {
        list-style: none;
 
        a {
          color: #bfb;
          font-size: small;
        }
      }
    }
  }
}

Show the results.

get /

Getting started

Here’s how to get rolling:

  1. Use bin/rails generate to create your models and controllers

    To see all available options, run it without parameters.

  2. Set up a root route to replace this page

    You're seeing this page because you're running in development mode and you haven't set a root route yet.

    Routes are set up in config/routes.rb.

  3. Configure your database

    If you're not using SQLite (the default), edit config/database.yml with your username and password.

8.3 Iteration C3: Use a Helper to Format the Price 8.1 Iteration C1: Create the Catalog Listing