6.3 Playtime 6.1 Iteration A1: Creating the Products Maintenance Application
Show the relationship between various artifacts: seed data, stylesheets, html, and images.
Copy some images
cp -vp /home/rubys/git/awdwr/edition4/data/assets/* app/assets/images/
‘/home/rubys/git/awdwr/edition4/data/assets/7apps.jpg’ -> ‘app/assets/images/7apps.jpg’
‘/home/rubys/git/awdwr/edition4/data/assets/adrpo.jpg’ -> ‘app/assets/images/adrpo.jpg’
‘/home/rubys/git/awdwr/edition4/data/assets/dcbang.jpg’ -> ‘app/assets/images/dcbang.jpg’
‘/home/rubys/git/awdwr/edition4/data/assets/logo.svg’ -> ‘app/assets/images/logo.svg’
‘/home/rubys/git/awdwr/edition4/data/assets/lorem.jpg’ -> ‘app/assets/images/lorem.jpg’
‘/home/rubys/git/awdwr/edition4/data/assets/rails.png’ -> ‘app/assets/images/rails.png’
‘/home/rubys/git/awdwr/edition4/data/assets/ruby.jpg’ -> ‘app/assets/images/ruby.jpg’
Add some style
edit app/assets/stylesheets/products.scss
// Place all the styles related to the Products controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
.products {
margin: 0;
padding: 0.5em;
a {
padding: 0.354em 0.5em;
border-radius: 0.354em;
}
table {
border-collapse: collapse;
}
td {
padding: 0.5em;
margin: 0;
}
tr.list_line_odd {
background-color: #effeef;
}
td.image {
// Hide this on mobile devices
display: none;
// Assume anything bigger than 30em
// is a non-mobile device and can
// fit the image.
@media (min-width: 30em) {
display: block;
img {
height: 11.3em;
}
}
}
td.description {
h1 {
font-size: 1.4em;
}
}
td.actions {
ul {
padding: 0;
list-style: none;
li {
padding: 0.5em 0.5em;
}
}
}
tfoot {
td {
padding: 0.5em 0;
}
}
}
Load some "seed" data
edit db/seeds.rb
Product.delete_all
# . . .
Product.create!(title: 'Seven Mobile Apps in Seven Weeks',
description:
%{<p>
<em>Native Apps, Multiple Platforms</em>
Answer the question “Can we build this for ALL the devices?” with a
resounding YES. This book will help you get there with a real-world
introduction to seven platforms, whether you’re new to mobile or an
experienced developer needing to expand your options. Plus, you’ll find
out which cross-platform solution makes the most sense for your needs.
</p>},
image_url: '7apps.jpg',
price: 26.00)
# . . .
rails db:seed
Link to the stylesheet in the layout
edit app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Depot</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all',
'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<main class='<%= controller.controller_name %>'>
<%= yield %>
</main>
</body>
</html>
Replace the scaffold generated view with some custom HTML
edit app/views/products/index.html.erb
<% if notice %>
<aside id="notice"><%= notice %></aside>
<% end %>
<h1>Products</h1>
<table>
<tfoot>
<tr>
<td colspan="3">
<%= link_to 'New product', new_product_path %>
</td>
</tr>
</tfoot>
<tbody>
<% @products.each do |product| %>
<tr class="<%= cycle('list_line_odd', 'list_line_even') %>">
<td class="image">
<%= image_tag(product.image_url, class: 'list_image') %>
</td>
<td class="description">
<h1><%= product.title %></h1>
<p>
<%= truncate(strip_tags(product.description),
length: 80) %>
</p>
</td>
<td class="actions">
<ul>
<li><%= link_to 'Show', product %></li>
<li><%= link_to 'Edit', edit_product_path(product) %></li>
<li>
<%= link_to 'Destroy',
product,
method: :delete,
data: { confirm: 'Are you sure?' } %>
</li>
</ul>
</td>
</tr>
<% end %>
</tbody>
</table>
See the finished result
get /products
| New product | ||
|
Rails, Angular, Postgres, and BootstrapPowerful, Effective, and Efficient Full-Stack Web Development As... |
|
|
Seven Mobile Apps in Seven WeeksNative Apps, Multiple Platforms Answer the question “Can we buil... |
|
|
Ruby Performance OptimizationWhy Ruby Is Slow, and How to Fix It You don’t have to accept sl... |
|
6.3 Playtime 6.1 Iteration A1: Creating the Products Maintenance Application