10. Front page, books catalog - max-borisov/ihub-bookshelf GitHub Wiki

It's time to create the first web page - books catalog.

We have controller, model and view files to deal with books resource.

What we need is to update some files.

Update app/controllers/books_controller.rb file. to get all books ordered by creation date:

def index
  @books = Book.order(created_at: :asc).all
end

Update app/views/books/index.html.haml file:

= render 'shared/flash_notice' if notice
.pull-left
.pull-right.book-count-block
  %p.text-info
    = pluralize(@books.count, 'book')
    in the catalog
.clearfix
= render @books

Create _app/views/books/book.html.haml file

- book_url = book_path(book)
.row
  .col-md-2.book-cover
    = link_to book_cover(h(book.title), book.amazon_id), book_url, title: h(book.title)
  .col-md-8.book-info-block
    %h2= link_to h(book.title), book_url, title: h(book.title)
    %h5
      by #{h(book.author)}
    %p
      %span ISBN-10:
      = book.isbn
    %p
      %span Published:
      = format_pub_date(book.pub_date)
    %p
      = sanitize(book.description.truncate_words(50), tags: %w(p h5 ul li)) + ' ' + link_to('more', book_url)
      \.
  .col-md-2.book-price-block
    %p.price-box.text-center= number_to_currency(book.price)
    / = render 'add_to_cart', book: book
%hr/

Update app/controllers/helpers/books_helper.rb file

module BooksHelper
  def book_cover(title, amazon_id)
    if amazon_id.nil?
      url = "http://placehold.it/140x172"
    else
      url = "http://images.amazon.com/images/P/#{amazon_id}.01.ZTZZZZZZ.jpg"
    end
    image_tag(url, alt: title)
  end

  def format_pub_date(created_at, show_time = false)
    format = '%B %d, %Y' + (show_time === true ? ' %T' : '')
    Date.parse(created_at.to_s).strftime(format)
  end
end

Now let's add some styles to our page.

First of all rename the application.css to application.scss.

Update app/assets/stylesheets/application.scss content.

@import "bootstrap-sprockets";
@import "bootstrap";
@import "books";
@import "users";
@import "reviews";
@import "shopping_cart_items";
@import "orders";

body {
  padding-top: 20px;
  padding-bottom: 20px;
  background: #f6f8f9;
}

.navbar {
  margin-bottom: 20px;
  .nav-user-name {
    font-size: 1.1em;
    margin-top: 15px;
    margin-right: 20px;
  }  
  .navbar-header, .navbar-user {
    padding-top: 10px;
    height: 70px; 
  }
  span.badge {
    font-size: 15px;
  }
}

.debug-panel {
  margin-top: 20px;
}

#error_explanation {
  border: 2px solid #C00;
  padding: 7px 7px 12px 7px;
  margin: 0 0 20px 0;
  background: #FEE;
}

.form-suggestion-footer {
  margin-top: 20px;
  font-size: 1.1em;
}

.alert-big {
  font-size: 18px;
}

Update app/assets/stylesheets/books.scss

.price-box {
  font-size: 3em;
  margin-top: 50px;
}
.add-to-cart-btn {
  margin-top: 21px;
}
.book-cover {
  img {
    width: 140px;
  }
}
.book-cover-mini {
  img {
    width: 100px;
  }
}
.book-cover-lg {
  img {
    width: 240px;
  }
}
.back-button-block {
  margin-bottom: 10px;
}
.book-action-links {
  margin-left: -10px;
}
.book-price-block {
  background: #eee;
  padding-bottom: 30px;
}
.book-info-block {
  h2 {
    margin-top: 0;
  }
  p {
    margin-bottom: 5px;
    span {
      font-weight: bold;
    }
  }
}
.search-book-form {
  .search-book-title {
    width: 100%;
    font-size: 1.2em;
  }
  .book-search-by {
    margin-top: 5px;
    label {
      margin-right: 5px;
    }
  }
}
.book-not-found-block {
  font-size: 2em;
  margin-top: 40px;
}
.book-count-block {
  p {
    margin-top: 35px;
    font-size: 1.3em;
  }
}

Helpful links

  • rails server
  • SCSS
  • controller, views
Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️