Skip to content

V
venshop
Commit b1d3796b by Tan Phat Nguyen
Options

Change layout template for crud product on venshop

parent e805d506
Showing with 154 additions and 268 deletions
app/assets/javascripts/products.js.coffee
# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/
$(document).ready ->
$('#product_photo').bind 'change', ->
size_in_megabytes = this.files[0].size/1024/1024
if (size_in_megabytes > 5)
......
app/assets/stylesheets/custom.css.scss
@import "bootstrap-sprockets";
@import "bootstrap";
/* mixins, variables, etc. */
$gray-medium-light: #eaeaea;
@mixin box_sizing {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
.navbar-fixed-top {
border: 0;
}
/* miscellaneous */
.debug_dump {
clear: both;
float: left;
width: 100%;
margin-top: 45px;
@include box_sizing;
.sidebar {
display: none;
}
/* universal */
html {
overflow-y: scroll;
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto;
background-color: #f5f5f5;
border-right: 1px solid #eee;
}
body {
padding-top: 60px;
.nav-sidebar {
margin-right: -21px;
margin-bottom: 20px;
margin-left: -20px;
}
section {
overflow: auto;
.nav-sidebar > .active > a, .nav-sidebar > .active > a:hover, .nav-sidebar > .active > a:focus {
color: #fff;
background-color: #428bca;
}
textarea {
resize: vertical;
.nav-sidebar > li > a {
padding-right: 20px;
padding-left: 20px;
}
.center {
text-align: center;
h1 {
margin-bottom: 10px;
}
.main {
padding: 75px;
}
/* typography */
h1, h2, h3, h4, h5, h6 {
line-height: 1;
.main {
padding-right: 40px;
padding-left: 40px;
}
h1 {
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
.main .page-header {
margin-top: 0;
}
h2 {
font-size: 1.2em;
letter-spacing: -1px;
.placeholders {
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: $gray-light;
}
p {
font-size: 1.1em;
line-height: 1.7em;
}
/* header */
#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: white;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
&:hover {
color: white;
text-decoration: none;
}
}
/* footer */
footer {
margin-top: 45px;
padding-top: 5px;
border-top: 1px solid $gray-medium-light;
color: $gray-light;
a {
color: $gray;
&:hover {
color: $gray-darker;
}
}
small {
float: left;
}
ul {
float: right;
list-style: none;
li {
float: left;
margin-left: 15px;
}
}
}
/* sidebar */
aside {
section.user_info {
margin-top: 20px;
}
section {
padding: 10px 0;
margin-top: 20px;
&:first-child {
border: 0;
padding-top: 0;
}
span {
display: block;
margin-bottom: 3px;
line-height: 1;
}
h1 {
font-size: 1.4em;
text-align: left;
letter-spacing: -1px;
margin-bottom: 3px;
margin-top: 0px;
}
}
}
.gravatar {
float: left;
margin-right: 10px;
}
.gravatar_edit {
margin-top: 15px;
}
/* forms */
input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
margin-bottom: 15px;
@include box_sizing;
}
input {
height: auto !important;
.sub-header {
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
#error_explanation {
......@@ -173,83 +69,3 @@ input {
margin: 0 0 30px 0;
}
}
\ No newline at end of file
.field_with_errors {
@extend .has-error;
.form-control {
color: $state-danger-text;
}
}
.checkbox {
margin-top: -10px;
margin-bottom: 10px;
span {
margin-left: 20px;
font-weight: normal;
}
}
#session_remember_me {
width: auto;
margin-left: 0;
}
/* Users index */
.users {
list-style: none;
margin: 0;
li {
overflow: auto;
padding: 10px 0;
border-bottom: 1px solid $gray-lighter;
}
}
/* microposts */
.microposts {
list-style: none;
padding: 0;
li {
padding: 10px 0;
border-top: 1px solid #e8e8e8;
}
.user {
margin-top: 5em;
padding-top: 0;
}
.content {
display: block;
margin-left: 60px;
img {
display: block;
padding: 5px 0;
}
}
.timestamp {
color: $gray-light;
display: block;
margin-left: 60px;
}
.gravatar {
float: left;
margin-right: 10px;
margin-top: 5px;
}
}
aside {
textarea {
height: 100px;
margin-bottom: 5px;
}
}
span.picture {
margin-top: 10px;
input {
border: 0;
}
}
\ No newline at end of file
app/controllers/products_controller.rb
......@@ -20,11 +20,9 @@ class ProductsController < ApplicationController
end
def show
end
def edit
end
def update
......
app/helpers/application_helper.rb
module ApplicationHelper
def full_title(page_title = '')
base_title = "VenShop Deploy Application"
if page_title.empty?
base_title
else
"#{page_title} | #{base_title}"
end
end
end
app/models/product.rb
......@@ -3,6 +3,9 @@ class Product < ActiveRecord::Base
belongs_to :category
validates :name, presence: true, length: { maximum: 50 }
validates :price, presence: true, numericality: true,
format: { with: /\A\d+(?:\.\d{0,2})?\z/ }
validates :description, presence: true
validate :photo_size
mount_uploader :photo, ImageUploader
......
app/views/layouts/_footer.html.erb 0 → 100644
<footer class="footer">
<small>
The Venshop 2014 by <a href="http://wwww.zigexn.vn">Zigexn</a>
</small>
<nav>
<ul>
<li><%= link_to 'About', '#' %></li>
<li><%= link_to 'Contact', '#' %></li>
<li><a href="http://zigexn.vn">Zigexn VeNtura</a></li>
</ul>
</nav>
</footer>
\ No newline at end of file
app/views/layouts/_header.html.erb 0 → 100644
<nav class='navbar navbar-inverse navbar-fixed-top'>
<div class='container-fluid'>
<div class='navbar-header'>
<%= link_to 'VenShop Apps', root_path, class: 'navbar-brand' %>
</div>
<div id='navbar' class='navbar-collapse collapse'>
<ul class='nav navbar-nav navbar-right'>
<li><%= link_to 'Home', root_path %></li>
<li><%= link_to 'Log in', '#' %></li>
</ul>
<form class='navbar-form navbar-right'>
<input type='text' class='form-control' placeholder='Search...'>
</form>
</div>
</div>
</nav>
\ No newline at end of file
app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Venshop</title>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
</head>
<body>
<%= render 'layouts/header' %>
<%= yield %>
<div class='container-fluid'>
<div class='row'>
<div class='col-sm-3 col-md-2 sidebar'>
<ul class='nav nav-sidebar'>
<li class='active'><a href='#'>Categories</a></li>
<li><a href='#'>Books</a></li>
<li><a href='#'>Toys</a></li>
<li><a href='#'>Clothing</a></li>
<li><a href='#'>DVD</a></li>
<li><a href='#'>Magazine</a></li>
</ul>
</div>
<div class='col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main'>
<%= yield %>
</div>
</div>
</div>
</body>
</body>
<%= render 'layouts/footer' %>
</html>
app/views/products/_form.html.erb
<%= form_for @product do |f| %>
<%= form_for @product, html: {multipart: true} do |f| %>
<%= render 'shared/error_messages', object: f.object %>
<%= image_tag @product.photo.url %> <br>
<div class="form-group">
<%= image_tag @product.photo.url, width: '140', height: '140', class: 'img-rounded' %>
</div>
<div class="form-group">
<%= f.label :name %>
<%= f.text_field :name, class: 'form-control' %>
<%= f.text_field :name, class: 'form-control', placeholder: 'Name of Item' %>
</div>
<div class="form-group">
<%= f.label :price %>
<%= f.text_field :price, class: 'form-control' %>
<%= f.text_field :price, class: 'form-control', placeholder: 'Price of Item' %>
</div>
<div class="form-group">
<%= f.label :description %>
<%= f.text_area :description, class: 'form-control' %>
<%= f.text_area :description, class: 'form-control', placeholder: 'Description' %>
</div>
<div class="form-group">
<%= f.label :category %>
<%= f.select :category_id, Category.all.collect { |category| [category.name, category.id] } %>
</div>
<div class="form-group">
<%= f.label :photo %>
<%= f.file_field :photo, accept: 'image/jpeg,image/gif,image/png' %>
</div>
<%= f.submit class: "btn btn-primary" %>
<%= link_to 'Cancel', products_path, class: "btn btn-primary" %>
<% end %>
\ No newline at end of file
app/views/products/_product.html.erb
......@@ -3,7 +3,7 @@
<td><%= product.price %></td>
<td><%= product.description %></td>
<td><%= product.category.name %></td>
<td><%= image_tag product.photo_url.to_s %></td>
<td><%= image_tag product.photo_url.to_s, width: '140', height: '140', class: 'img-rounded' %></td>
<td><%= link_to 'Show', product_path(product) %></td>
<td><%= link_to 'Edit', edit_product_path(product) %></td>
<td><%= link_to 'Destroy', product_path(product), method: :delete, data: { confirm: 'Are you sure?' } %></td>
......
app/views/products/edit.html.erb
<h1>Edit Product</h1>
<% provide(:title, "Edit Product") %>
<h1 class='page-header'>Edit Product</h1>
<%= render 'form' %>
\ No newline at end of file
app/views/products/index.html.erb
<h1>Welcome to Venshop</h1>
<table class='table'>
<% provide(:title, 'Product Lists') %>
<h1 class='page-header'>Item Management</h1>
<div class='table-responsive'>
<table class='table table-striped'>
<tr>
<th>Name</th>
<th>Price</th>
......@@ -9,5 +11,6 @@
<th colspan='3'></th>
</tr>
<%= render @products %>
</table>
<%= link_to 'New Product', new_product_path %>
</table>
</div>
<%= link_to 'New Product', new_product_path, class: "btn btn-primary" %>
app/views/products/new.html.erb
<h1>Add New Product</h1>
<%= render partial: 'products/form', locals: { product: @product } %>
\ No newline at end of file
<% provide(:title, 'New Product') %>
<h1 class='page-header'>Add New Product</h1>
<%= render 'form' %>
\ No newline at end of file
app/views/products/show.html.erb
<h1>Show Product</h1>
<% provide(:title, @product.name) %>
<h1 class='page-header'>Show Product</h1>
<p>Name: <b><%= @product.name%></b></p>
<p>Price: <b><%= @product.price%></b></p>
<p>Description: <b><%= @product.description%></b></p>
<p>Category: <b><%= @product.category.name%></b></p>
<%= image_tag @product.photo.url %> <br/>
<%= link_to 'Back', products_path %>
| <%= link_to 'Edit', edit_product_path(@product) %>
\ No newline at end of file
<%= image_tag @product.photo.url, width: '140', height: '140', class: 'img-rounded' %> <br/><br>
<%= link_to 'Back', products_path, class: 'btn btn-primary' %>
<%= link_to 'Edit', edit_product_path(@product), class: 'btn btn-primary' %>
\ No newline at end of file
db/migrate/20141111033549_change_scale_price_in_products.rb 0 → 100644
class ChangeScalePriceInProducts < ActiveRecord::Migration
def change
change_column :products, :price, :decimal, precision: 10, scale: 2
end
end
db/schema.rb
......@@ -11,7 +11,7 @@
#
# It's strongly recommended that you check this file into your version control system.
ActiveRecord::Schema.define(version: 20141110093259) do
ActiveRecord::Schema.define(version: 20141111033549) do
create_table "categories", force: true do |t|
t.string "name", limit: 255
......@@ -21,7 +21,7 @@ ActiveRecord::Schema.define(version: 20141110093259) do
create_table "products", force: true do |t|
t.string "name", limit: 255
t.decimal "price", precision: 10
t.decimal "price", precision: 10, scale: 2
t.text "description", limit: 65535
t.integer "category_id", limit: 4
t.datetime "created_at"
......
test/controllers/product_controller_test.rb deleted 100644 → 0
require 'test_helper'
class ProductControllerTest < ActionController::TestCase
# test "the truth" do
# assert true
# end
end
test/helpers/product_helper_test.rb deleted 100644 → 0
require 'test_helper'
class ProductHelperTest < ActionView::TestCase
end
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment