Skip to content

dhp-venshop
dhp-venshop
Commit b0e7cd69 by Hoang Phuc Do
Options

Create layout for single product detail

parent d79c5987
Showing with 568 additions and 90 deletions
app/admin/dashboard.rb
ActiveAdmin.register_page "Dashboard" do
ActiveAdmin.register_page 'Dashboard' do
menu priority: 1, label: proc{ I18n.t("active_admin.dashboard") }
menu priority: 1, label: proc{ I18n.t('active_admin.dashboard') }
content title: proc{ I18n.t("active_admin.dashboard") } do
div class: "blank_slate_container", id: "dashboard_default_message" do
span class: "blank_slate" do
span I18n.t("active_admin.dashboard_welcome.welcome")
small I18n.t("active_admin.dashboard_welcome.call_to_action")
content title: proc{ I18n.t('active_admin.dashboard') } do
div class: 'blank_slate_container', id: 'dashboard_default_message' do
span class: 'blank_slate' do
span I18n.t('active_admin.dashboard_welcome.welcome')
small I18n.t('active_admin.dashboard_welcome.call_to_action')
end
end
......
app/admin/products.rb
......@@ -4,14 +4,15 @@ ActiveAdmin.register Product do
index do
selectable_column
column("ID", sortable: :id) { |product| link_to "##{product.id}", admin_product_path(product) }
column("Product title", sortable: :title) { |product| link_to "#{product.title}", admin_product_path(product) }
column("Price", sortable: :price) { |product| number_to_currency(product.price) }
column("Category", sortable: :category_id) { |product| auto_link product.category }
column('ID', sortable: :id) { |product| link_to "##{product.id}", admin_product_path(product) }
column('Product title', sortable: :title) { |product| link_to "#{product.title}", admin_product_path(product) }
column('Price', sortable: :price) { |product| number_to_currency(product.price) }
column('Category', sortable: :category_id) { |product| auto_link product.category }
end
filter :title
filter :user, collection: User.pluck(:email, :id), label: 'User email'
# @url: https://github.com/activeadmin/activeadmin/issues/1360#issuecomment-5949803
filter :user, label: 'User email', collection: proc { User.pluck(:email, :id) }
show theme: 'hi' do
attributes_table do
......@@ -26,7 +27,7 @@ ActiveAdmin.register Product do
end
end
sidebar "Product thumbnail", only: :show, if: proc{ product.image_url.present? } do
sidebar 'Product thumbnail', only: :show, if: proc { product.image_url.present? } do
image_tag(get_product_thumbnail(product, 170, 204), style: 'width: 100%;')
end
......
app/admin/user.rb
......@@ -27,7 +27,7 @@ ActiveAdmin.register User do
filter :created_at
form do |f|
f.inputs "Admin Details" do
f.inputs 'Admin Details' do
f.input :email
f.input :password
f.input :password_confirmation
......
app/assets/stylesheets/skin_14.css deleted 100644 → 0
a {
color: #000000;
}
a:hover {
color: #0d0d0d;
}
a:focus {
color: #0d0d0d;
}
a:active {
color: #000000;
}
.pagination > li > a,
.pagination > li > span,
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
color: #000000;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
background-color: #000000 !important;
border-color: #000000;
}
html .btn-primary {
color: #ffffff;
background-color: #000000;
border-color: #000000 #000000 #000000;
}
html .btn-primary:hover {
border-color: #0d0d0d #0d0d0d #000000;
background-color: #0d0d0d;
}
html .btn-primary:active,
html .btn-primary:focus,
html .btn-primary:active:hover,
html .btn-primary:active:focus {
border-color: #000000 #000000 #000000;
background-color: #000000;
}
html .btn-primary.dropdown-toggle {
border-left-color: #000000;
}
html .btn-primary[disabled],
html .btn-primary[disabled]:hover,
html .btn-primary[disabled]:active,
html .btn-primary[disabled]:focus {
border-color: #333333;
background-color: #333333;
}
html .btn-primary:hover,
html .btn-primary:focus,
html .btn-primary:active:hover,
html .btn-primary:active:focus {
color: #ffffff;
}
.btn {
border-radius: 0;
}
.featured-box .box-content {
border-radius: 0;
}
\ No newline at end of file
app/assets/stylesheets/skin_14.scss 0 → 100644
body {
font-size: 13px;
line-height: 1.5;
background: image-url('shop-14-bg.png') top center repeat-x;
}
a {
color: #000000;
}
a:hover {
color: #0d0d0d;
}
a:focus {
color: #0d0d0d;
}
a:active {
color: #000000;
}
.pagination > li > a,
.pagination > li > span,
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
color: #000000;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
background-color: #000000 !important;
border-color: #000000;
}
html .btn-primary {
color: #ffffff;
background-color: #000000;
border-color: #000000 #000000 #000000;
}
html .btn-primary:hover {
border-color: #0d0d0d #0d0d0d #000000;
background-color: #0d0d0d;
}
html .btn-primary:active,
html .btn-primary:focus,
html .btn-primary:active:hover,
html .btn-primary:active:focus {
border-color: #000000 #000000 #000000;
background-color: #000000;
}
html .btn-primary.dropdown-toggle {
border-left-color: #000000;
}
html .btn-primary[disabled],
html .btn-primary[disabled]:hover,
html .btn-primary[disabled]:active,
html .btn-primary[disabled]:focus {
border-color: #333333;
background-color: #333333;
}
html .btn-primary:hover,
html .btn-primary:focus,
html .btn-primary:active:hover,
html .btn-primary:active:focus {
color: #ffffff;
}
.btn {
border-radius: 0;
}
.featured-box .box-content {
border-radius: 0;
}
.product-essential {
margin-bottom: 50px;
}
@media (max-width: 767px) {
.product-img-box {
margin-bottom: 25px;
}
}
.product-img-box img {
display: block;
width: 100%;
height: auto;
}
.product-img-box .product-img-wrapper {
padding: 3px;
border: 1px solid #ddd;
border-radius: 0;
}
.product-img-box-wrapper {
position: relative;
margin-bottom: 10px;
}
.product-details-box .product-name {
margin: 15px 0;
font-size: 28px;
font-weight: 600;
line-height: 1;
color: #555;
}
.product-details-box .product-short-desc {
padding: 0 0 10px;
border-bottom: 1px solid #ebebeb;
}
.product-details-box .product-short-desc p {
font-size: 14px;
line-height: 1.65;
margin: 0 0 20px;
}
.product-details-box .product-detail-info {
padding-bottom: 20px;
margin-top: 20px;
border-bottom: 1px solid #ebebeb;
}
.product-details-box .product-detail-info .product-price-box {
margin: 0 0 20px;
}
.product-details-box .product-detail-info .product-price-box .product-price {
font-size: 33px;
line-height: 1;
color: #000;
}
#header .header-body {
border-top: none;
background-color: transparent;
border-bottom: none;
padding: 0;
}
@media (min-width: 992px) {
#header .header-body {
padding-bottom: 15px;
}
}
#header .header-logo img {
margin: 0 24px 0 0;
}
#header .header-container {
padding-top: 28px;
padding-bottom: 28px;
}
#header .header-container.header-nav {
padding: 0;
}
#header .cart-area {
float: right;
vertical-align: middle;
}
@media (max-width: 991px) {
#header .cart-area {
margin-top: 5.5px;
}
}
header .header-search {
position: relative;
float: right;
margin: 0;
font-size: 0;
line-height: 1;
padding: 0;
border: none;
}
@media (min-width: 992px) {
#header .header-search {
float: left;
}
}
@media (max-width: 991px) {
#header .header-search {
margin-top: 5.5px;
margin-left: 5px;
margin-right: 5px;
}
}
@media (max-width: 360px) {
#header .header-search {
margin-left: 0;
margin-right: 0;
}
}
#header .header-search .search-toggle {
display: inline-block;
font-size: 14px;
line-height: 40px;
min-width: 25px;
text-align: center;
}
@media (min-width: 992px) {
#header .header-search .search-toggle {
display: none;
}
}
#header .header-search form {
display: inline-block;
width: 0;
}
@media (min-width: 992px) {
#header .header-search form {
width: 400px;
}
}
@media (min-width: 992px) {
#header .header-search form {
width: 450px;
}
}
#header .header-search .header-search-wrapper {
display: none;
overflow: visible;
border: 1px solid #ccc;
border-radius: 0;
position: relative;
width: 100%;
min-width: 250px;
padding-right: 170px;
background-color: #fff;
}
#header .header-search .header-search-wrapper.open {
display: block;
}
#header .header-search .header-search-wrapper:after {
content: '';
display: table;
clear: both;
}
@media (min-width: 992px) {
#header .header-search .header-search-wrapper {
display: block;
}
}
@media (max-width: 991px) {
#header .header-search .header-search-wrapper {
position: absolute;
right: -50px;
top: 100%;
border-width: 5px;
width: 450px;
border-radius: 0;
}
#header .header-search .header-search-wrapper:before {
content: "";
display: block;
position: absolute;
right: 45px;
top: -25px;
width: 20px;
height: 20px;
border: 10px solid transparent;
border-bottom-color: #ccc;
}
}
@media (max-width: 480px) {
#header .header-search .header-search-wrapper {
width: 300px;
}
}
@media (max-width: 350px) {
#header .header-search .header-search-wrapper {
width: 240px;
}
}
#header .header-search .header-search-wrapper .form-control,
#header .header-search .header-search-wrapper select {
float: left;
height: 38px;
font-family: Arial;
font-size: 13px;
background-color: #fff;
margin: 0;
}
#header .header-search .header-search-wrapper .form-control {
padding: 9px 15px;
color: #999;
width: 100%;
margin: 0;
line-height: 20px;
border-radius: 0 0 0 0;
box-shadow: none;
border: none;
}
#header .header-search .header-search-wrapper select {
position: absolute;
right: 40px;
width: 130px;
border: 1px solid #ccc;
border-top: 0;
border-bottom: 0;
line-height: 36px;
color: #777;
padding: 2px 0;
padding-left: 10px;
border-radius: 0;
-moz-appearance: none;
-webkit-appearance: none;
}
@media (max-width: 350px) {
#header .header-search .header-search-wrapper select {
width: 110px;
}
}
#header .header-search .header-search-wrapper .btn.btn-default {
position: absolute;
left: auto;
right: 0;
top: 0;
width: 40px;
height: 38px;
color: #777;
background-color: transparent;
font-size: 14px;
border: 0;
padding: 0;
margin: 0;
background: transparent;
cursor: pointer;
border-radius: 0 0 0 0;
}
#header .header-search .header-search-wrapper .btn.btn-default:hover, #header .header-search .header-search-wrapper .btn.btn-default:focus {
color: #000;
background-color: transparent;
}
.panel-default>.panel-heading {
color: #333;
background-color: #f5f5f5;
border-color: #ddd;
}
.sidebar.shop-sidebar .panel-group {
margin-bottom: 40px;
}
.sidebar.shop-sidebar .panel-group .panel + .panel {
margin-top: 14px;
}
.sidebar.shop-sidebar .panel.panel-default {
border-radius: 0;
border: none;
overflow: hidden;
}
.sidebar.shop-sidebar .panel.panel-default .panel-heading {
border-radius: 0;
}
.sidebar.shop-sidebar .panel.panel-default .panel-heading .panel-title {
margin: 0;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
color: #777;
}
.sidebar.shop-sidebar .panel.panel-default .panel-heading a {
position: relative;
border-radius: 0 0 0 0;
padding-top: 11.5px;
padding-bottom: 11.5px;
padding-right: 45px;
color: #777;
border: 1px solid #ddd;
}
.sidebar.shop-sidebar .panel.panel-default .panel-heading a:before {
font-family: 'FontAwesome';
content: "\f0d8";
width: 26px;
height: 26px;
display: block;
border: 1px solid #ddd;
position: absolute;
right: 15px;
top: 50%;
margin-top: -13px;
border-radius: 0;
color: #ccc;
text-align: center;
line-height: 24px;
background-color: #fff;
font-size: 10px;
}
.sidebar.shop-sidebar .panel.panel-default .panel-heading a:hover:before {
background-color: #000;
border-color: #000;
color: #fff;
}
.sidebar.shop-sidebar .panel.panel-default .panel-heading a.collapsed {
border-radius: 0;
}
.sidebar.shop-sidebar .panel.panel-default .panel-heading a.collapsed:before {
content: "\f0d7";
}
.sidebar.shop-sidebar .panel.panel-default .panel-body {
padding: 15px 15px 7px;
background-color: #fbfbfb;
}
#footer {
border-top: none;
background-color: #54555e;
color: #bbbbbb;
font-size: 13px;
padding-top: 0;
}
#footer .footer-copyright {
color: #bbb;
background-color: #45464e;
border-top: none;
padding: 29.5px 0;
margin-top: 0;
}
@media (min-width: 992px) {
#footer .footer-copyright .logo,
#footer .footer-copyright .social-icons,
#footer .footer-copyright .footer-payment {
float: left;
margin-bottom: 0;
}
#footer .footer-copyright .logo {
margin-right: 45px;
}
#footer .footer-copyright .social-icons {
margin-right: 60px;
}
#footer .footer-copyright .social-icons li {
margin-bottom: 0;
}
#footer .footer-copyright .footer-payment {
margin-top: 1px;
}
#footer .footer-copyright .copyright-text {
float: right;
margin-bottom: 0;
margin-top: 6px;
}
}
@media (max-width: 991px) {
#footer .footer-copyright {
text-align: center;
}
#footer .footer-copyright .logo {
margin-bottom: 8px;
}
#footer .footer-copyright .social-icons {
margin-bottom: 5px;
}
#footer .footer-copyright .logo img,
#footer .footer-copyright .footer-payment {
margin-left: auto;
margin-right: auto;
}
#footer .footer-copyright .footer-payment {
margin-bottom: 10px;
}
}
\ No newline at end of file
app/controllers/products_controller.rb
......@@ -19,6 +19,10 @@ class ProductsController < ApplicationController
@product = Product.find(params[:id])
end
def show
@product = Product.find(params[:id])
end
def update
@product = Product.find(params[:id])
if @product.update(product_params)
......
app/views/layouts/_footer.html.erb
<footer id="footer">
<div class="footer-copyright">
<div class="container">
<a href="" class="logo">
<%= image_tag('logo-footer.png', class: 'img-responsive') %>
</a>
<p class="copyright-text">
© Copyright 2017. All Rights Reserved.
</p>
</div>
</div>
</footer>
\ No newline at end of file
app/views/layouts/_header.html.erb
<header>
<div class="header-container">
<header id="header">
<div class="header-body">
<div class="header-top">
<div class="container">
</div>
</div>
<div class="header-container container">
<div class="header-row">
<div class="header-column">
<div class="header-logo">
<a href="<%= root_url %>">
<%= image_tag 'logo-header.png' %>
</a>
</div>
</div>
<div class="header-column">
<div class="header-row">
<div class="cart-area">
</div>
<div class="header-search">
</div>
</div>
</div>
</div>
</div>
<div class="header-container header-nav">
</div>
</div>
</header>
\ No newline at end of file
app/views/layouts/application.html.erb
......@@ -9,8 +9,10 @@
</head>
<body>
<%= render 'layouts/header' %>
<div role="main" class="main">
<%= yield %>
</div>
<%= render 'layouts/footer' %>
</body>
</html>
app/views/products/_product.html.erb
<li class="product-<%= product.id %>">
<div class="product product-list">
<figure class="product-image-area">
<a href="#">
<a href="<%= product_url(product) %>">
<%= image_tag(get_product_thumbnail(product, 170, 204)) %>
</a>
</figure>
<div class="product-details-area">
<h2 class="product-name">
<%= link_to product.title, '#' %>
<%= link_to product.title, product_url(product) %>
</h2>
<div class="product-short-desc">
<%= product.description %>
......
app/views/products/_recommended.html.erb
......@@ -3,13 +3,13 @@
<li class="product-<%= product.id %>">
<div class="product">
<figure class="product-image-area">
<a href="#">
<a href="<%= product_url(product) %>">
<%= image_tag(get_product_thumbnail(product, 170, 204)) %>
</a>
</figure>
<div class="product-details-area">
<h2 class="product-name">
<%= link_to product.title, '#' %>
<%= link_to product.title, product_url(product) %>
</h2>
<div class="product-price-box">
<span class="product-price"><%= number_to_currency(product.price) %></span>
......
app/views/products/show.html.erb 0 → 100644
<div class="container">
<div class="product-view">
<div class="product-essential">
<div class="row">
<div class="product-img-box col-sm-5">
<div class="product-img-box-wrapper">
<div class="product-img-wrapper">
<%= image_tag(get_product_thumbnail(@product, 715, 952)) %>
</div>
</div>
</div>
<div class="product-details-box col-sm-7">
<h1 class="product-name">
<%= @product.title %>
</h1>
<div class="product-short-desc">
<%= @product.description %>
</div>
<div class="product-detail-info">
<div class="product-price-box">
<span class="product-price"><%= number_to_currency(@product.price) %></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
app/views/shared/_sidebar.html.erb
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
Categories
</h4>
</div>
<div id="panel-filter-category">
<div class="panel-body">
<ul>
</ul>
</div>
</div>
</div>
</div>
\ No newline at end of file
app/views/static_pages/index.html.erb
......@@ -3,7 +3,6 @@
<div class="col-md-9 col-md-push-3">
<h2 class="h2 heading-primary mt-lg clearfix">
<span>Recommended Items</span>
<%= link_to 'Log out', destroy_user_session_path, method: :delete %>
</h2>
<div class="products-grid columns3">
<%= render 'products/recommended' %>
......@@ -24,5 +23,8 @@
</div>
</div>
</div>
<div class="col-md-3 col-md-pull-9 sidebar shop-sidebar">
<%= render 'shared/sidebar' %>
</div>
</div>
</div>
config/database.yml
......@@ -13,7 +13,7 @@ default: &default
adapter: mysql2
encoding: utf8
username: root
password: 123123
password:
development:
<<: *default
......
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