comable-frontend-fashionable 0.6.0

data/app/assets/stylesheets/comable/top.scss

@@ -0,0 +1,262 @@
+@charset "UTF-8";
+/* CSS top */
+
+/* -------------------------------- */
+/* 検索 */
+#MainSearch {
+	clear: both;
+	background: #d7d7d7;
+	margin: 0 0 20px 0;
+}
+#MainSearch .inner {
+	width: 747px;
+	margin: 0 auto;
+	padding: 20px 0;
+}
+	#MainSearch .inner input.textBox {
+		width: 654px;
+		height: 30px;
+		border: #616161 1px solid;
+		border-radius: 5px;
+		margin: 0; 
+		padding: 0;
+	}
+	input.btn {
+		width: 82px;
+		height: 32px;
+		border-style: none;
+		border-radius: 5px;
+		background: image-url("search.png") #616161 no-repeat;
+		background-position: 10px 7px;
+		text-indent: 14px;
+		font-size: 15px;
+		color: #fff;
+		letter-spacing: 2px;
+		padding: 0;
+	}
+
+/* -------------------------------- */
+/* News & TOPICS */
+.information {
+	width: 778px;
+	border: #747272 1px solid;
+	background: #fff;
+}
+	.information p.title {
+		background: #747272;
+		font-size: 16px;
+		font-family: "メイリオ", Meiryo;
+		font-weight: bold;
+		color: #fff;
+		letter-spacing: 1px;
+		padding: 2px 15px;
+		margin: 0 0 5px 0;
+	}
+	/* 更新内容 */
+	.information .box {
+		overflow: scroll;
+		height: 110px;
+	}
+	.information .box  p.date {
+		padding: 0 15px;
+		line-height: 16px;
+	}
+		.information .box  p.date span {
+			display: block;
+		}
+		.information .box  p.date span.red {
+			color: #e70505;
+		}
+	p.date a {
+		color: #979797;
+		font-weight: bold;
+	}
+	p.date a:hover {
+		text-decoration: underline;
+	}
+	
+	hr.info {
+		width: 748px;
+		border: none;
+		border-top: #b9b9b9 1px dotted;
+		margin: 0 auto:;
+	}
+
+/* 特集バナー */
+.special {
+	margin: 15px 0;
+	overflow: hidden;
+}
+.special img {
+	float: left;
+	border: #dfdfdf 1px solid;
+	margin: 0 5px;
+}
+	.special img:hover {
+		opacity: 0.8;
+		filter: alpha(opacity=80);
+		-ms-filter: "alpha( opacity=80 )";
+		background: #fff;
+	}
+	
+/* product */
+/* -------------------------------- */
+#product {
+	width: 565px;
+	float: left;
+}
+	
+.line-bg {
+        clear: both;
+	display: block;
+	border: none;
+	height: 11px;
+	background: image-url("line_bg.gif") repeat;
+	text-indent: -9999px;
+	margin: 18px 0;
+}
+/* 入荷アイテム */
+.item-box {
+	border-left: #dfdfdf 1px solid;
+	overflow: hidden;
+}
+	/* タイトル */
+	.item-box p.title {
+		border-right: #dfdfdf 1px solid;
+		font-family: "メイリオ", Meiryo;
+		font-weight: bold;
+		font-size: 22px;
+		padding: 5px 0 2px 15px;
+	}
+	.item-box p.title span {
+		font-size: 14px;
+		margin: 0 0 0 12px;
+	}
+	/* 商品 */
+	.item-box .item {
+		width: 130px;
+		height: 314px;
+		float: left;
+		border-top: #dfdfdf 1px solid;
+		border-right: #dfdfdf 1px solid;
+		border-bottom: #dfdfdf 1px solid;
+		padding: 0 0 0 10px;
+	}
+		.item-box .item img {
+			width: 120px;
+			height: 174px;
+		}
+		/* 商品名 */
+		.item-box .item h2 a {
+			width: 120px;
+			color: #000;
+			font-size: 12px;
+			font-weight: normal;
+			line-height: 14px;
+		}
+		
+		/* 価格 */
+		.item-box .item p.price {
+			width: 120px;
+			font-size: 10px;
+			margin: 25px 0 0 0;
+		}
+			.item p.price span {
+				color: #e70505;
+			}
+		/* 新着 */
+		.item-box .item p.new {
+			width: 75px;
+			background: #f2546a;
+			text-align: center;
+			font-weight: bold;
+			color: #fff;
+			border-radius: 3px;
+			margin: 7px 0 5px 0;
+		}
+		/* 再入荷 */
+		.item-box .item p.repeat {
+			width: 75px;
+			background: #54b1f2;
+			text-align: center;
+			font-weight: bold;
+			color: #fff;
+			border-radius: 3px;
+			margin: 7px 0 5px 0;
+		}
+		.item-box .item p a {
+			color: #000;
+		}
+	/* もっと見る */
+	p.more {
+		text-align: right;
+		margin: 5px 0 30px 0;
+	}
+		p.more a {
+			color: #000;
+		}
+		p.more a:hover {
+			text-decoration: underline;
+		}
+
+/* ランキング */
+p.ranking {
+	text-align: center;
+	font-family: "メイリオ", Meiryo;
+	font-weight: bold;
+	font-size: 22px;
+	border-bottom: #dfdfdf 1px solid;
+	padding: 10px 0;
+}
+	.rank-box {
+		float: left;
+		width: 178px;
+		height: 395px;
+		padding: 0 0 0 10px;
+	}
+		/* icon */
+		.rank {
+			width: 34px;
+			margin : 20px auto 10px;
+		}
+	.rank-box img.product {
+		width: 168px;
+		height: 243px;
+	}
+
+	/* 商品名 */
+	.rank-box h2 a {
+		width: 168px;
+		color: #000;
+		font-size: 12px;
+		font-weight: normal;
+	}
+	/* 価格 */
+	.rank-box .price {
+		width: 168px;
+		font-size: 10px;
+		margin: 20px 0 0 0;
+	}
+		.rank-box .price span {
+			display: block;
+			color: #e70505;
+		}
+	.rank-box p a {
+			color: #000;
+	}
+	
+/* side-banner */
+/* -------------------------------- */
+#side-banner {
+	width: 200px;
+	float: right;
+}
+	#side-banner img {
+		margin: 0 0 10px 0;
+	}
+	#side-banner img:hover {
+		opacity: 0.8;
+		filter: alpha(opacity=80);
+		-ms-filter: "alpha( opacity=80 )";
+		background: #fff;
+	}

data/app/assets/stylesheets/comable/users.scss

@@ -0,0 +1,255 @@
+@charset "UTF-8";
+/* CSS mypage */
+
+
+/* -------------------------------- */
+/* ログイン画面 */
+/* -------------------------------- */
+section {
+	width: 850px;
+	margin: 10px auto;
+}
+
+p.title {
+	font-size: 15px;
+	font-weight: bold;
+	background: image-url("icon.png") top left no-repeat;
+	background-position: 0px 3px;
+	text-indent: 23px;
+}
+
+p.left {
+	text-align: left;
+	margin: 5px 0 20px 0;
+	}
+
+/* table */
+.login {
+	width: 850px;
+	margin: 5px auto 20px;
+}
+	.login th {
+		width: 150px;
+		background: #f1f1f1;
+		border: #ccc 1px solid;
+		padding: 10px 20px;
+	}
+	.login td {
+		font-size: 11px;
+		border: #ccc 1px solid;
+		padding: 10px 20px;
+	}
+		.login td span a {
+			color: #000;
+			text-decoration: underline;
+			margin: 0 0 0 60px;
+		}
+		.login td span a:hover {
+			color: #747474;
+			text-decoration: none;
+		}
+
+/* -------------------------------- */
+/* my page */
+/* -------------------------------- */
+.my-menu {
+	float: left;
+	width: 260px;
+	padding: 0 0 0 20px;
+}
+	.my-menu p {
+		margin: 0 0 5px 0;
+	}
+	.my-menu p a {
+		color: #000;
+	}
+	.my-menu p a:hover {
+		text-decoration: underline;
+	}
+
+/* 内容 */
+.my-contents {
+	float: left;
+	width: 680px;
+}
+
+	/* 注文履歴 */
+	.history {
+		width: 680px;
+	}
+	.history th {
+		text-align: center;
+		border: #ccc 1px solid;
+		background: #f1f1f1;
+		padding: 5px 20px;
+	}
+	.history td {
+		text-align: center;
+		border: #ccc 1px solid;
+		padding: 10px 20px;
+	}
+
+	/* メールアドレス・パスワード変更 */
+	.account {
+		width: 680px;
+		margin: 0 0 15px 0;
+	}
+	.account th {
+		vertical-align: top;
+		border: #ccc 1px solid;
+		background: #f1f1f1;
+		padding: 10px;
+	}
+	.account td {
+		border: #ccc 1px solid;
+		padding: 10px;
+	}
+		.account span {
+			display: block;
+			font-size: 11px;
+		}
+	/* 住所変更 */
+	.address {
+		width: 680px;
+		margin: 0 0 15px 0;
+	}
+	.address th {
+		width: 160px;
+		border: #ccc 1px solid;
+		background: #f1f1f1;
+		padding: 5px 0 5px 20px;
+	}
+		.address th span {
+			color: #e71f19;
+		}
+	.address td {
+		border: #ccc 1px solid;
+		padding: 5px 0 5px 20px;
+	}
+
+/* 変更後 */
+p.center {
+	text-align: center;
+}
+	p.center a {
+		color: #000;
+		text-decoration: underline;
+	}
+	p.center a:hover {
+		color: #000;
+		text-decoration: none;
+	}
+	p.center span {
+		display: block;
+		font-size: 14px;
+		padding: 0 0 30px 0;
+	}
+	p.center span.strong {
+		display: block;
+		font-weight: bold;
+		padding: 30px 0;
+	}
+
+/* -------------------------------- */
+/* パスワード再発行 */
+/* -------------------------------- */
+.forget {
+		width: 980px;
+		margin: 10px 0 15px 0;
+	}
+	.forget th {
+		width: 160px;
+		border: #ccc 1px solid;
+		background: #f1f1f1;
+		padding: 5px 0 5px 20px;
+	}
+		.forget th span {
+			color: #e71f19;
+		}
+	.forget td {
+		border: #ccc 1px solid;
+		padding: 5px 0 5px 20px;
+	}
+
+
+
+
+/* ボタン */
+.bt-box {
+	overflow:hidden;
+	background: #ccc;
+	text-align: center;
+	padding: 20px;
+	margin: 5px 0 40px 0;
+}
+
+/* ログインボタン */
+.btn {
+	float:left;
+	font-size:14px;
+	font-family:Arial;
+	font-weight:normal;
+	-moz-border-radius:3px;
+	-webkit-border-radius:3px;
+	border-radius:5px;
+	padding:6px 18px 5px 0;
+	text-indent: 40px;
+	background: image-url("bt_icon.png") no-repeat #000;
+	background-position: 18px 49%;
+	color:#ffffff;
+	display:inline-block;
+	margin:0 10px 10px 0;
+}
+.btn:hover {
+	opacity: 0.8;
+	filter: alpha(opacity=80);
+	-ms-filter: "alpha( opacity=80 )";
+}
+/* 2015/06/16追加 */
+.btn-center {
+	font-size: 14px;
+	font-family: Arial;
+	font-weight: normal;
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	border-radius: 5px;
+	padding: 6px 18px 5px 0;
+  	text-indent: 40px;
+  	background: image-url("bt_icon.png") no-repeat #000;
+  	background-position: 18px 49%;
+  	color: #ffffff;
+  	display: inline-block;
+}
+
+/* ページナビ */
+ul.pageNav {
+        margin: 0 0 10px;
+        padding: 10px 10px 5px;
+        text-align: right;
+}
+
+        ul.pageNav li {
+                display: inline;
+                margin: 0 2px;
+                padding: 0;
+        }
+
+        ul.pageNav li span,
+        ul.pageNav li a {
+                color: #000;
+                display: inline-block;
+                margin-bottom: 5px;
+                padding: 4px 10px;
+                text-decoration: none;
+                vertical-align: middle;
+        }
+        ul.pageNav li span {
+                background: #aaaaaa;
+                color: #fff;
+        }
+
+        ul.pageNav li a:hover {
+                color: #000;
+                background: #e6e6e6;
+                border-color: #00f;
+        }

data/app/controllers/comable/application_controller.rb

@@ -0,0 +1,23 @@
+module Comable
+  class ApplicationController < ActionController::Base
+    include Comable::ApplicationHelper
+    #protect_from_forgery with: :exception
+    rescue_from StandardError, with: :render_500
+    rescue_from ActiveRecord::RecordNotFound, with: :render_404
+    rescue_from ActionController::RoutingError, with: :render_404
+    def render_404(exception = nil)
+      if exception
+        logger.info "Rendering 404 with exception: #{exception.message}"
+      end
+      render template: "errors/error_404", status: 404, layout: 'comable/error'
+    end
+
+    def render_500(exception = nil)
+      if exception
+        logger.info "Rendering 500 with exception: #{exception.message}"
+      end
+      render template: "errors/error_500", status: 500, layout: 'comable/application'
+    def show; raise env["action_dispatch.exception"]; end
+    end
+  end
+end

data/app/decorators/comable/product_decorator.rb

@@ -0,0 +1,26 @@
+Comable::Product.class_eval do
+  extend Enumerize
+
+  attr_accessor :per_page
+  attr_accessor :order_by
+  attr_accessor :filter_by_stocks
+
+  enumerize :per_page, in: %w(
+    20
+    40
+    60
+    100
+  ), default: 20
+
+  enumerize :order_by, in: {
+    newly: { id: :desc },
+    high_price: { price: :desc },
+    low_price: :price
+  }, default: :newly
+
+  enumerize :filter_by_stocks, in: {
+    all: -> { Comable::Stock.all },
+    in_stock: -> { Comable::Stock.stocked },
+    out_of_stock: -> { Comable::Stock.unstocked }
+  }, default: :all
+end

data/app/decorators/comable/products_controller_decorator.rb

@@ -0,0 +1,18 @@
+Comable::ProductsController.class_eval do
+  def index
+    @products = @products.reorder(order_by)
+    @products = @products.joins(:stocks).merge(filter_by_stocks)
+    @products = @products.page(params[:page]).per(params[:per_page])
+  end
+
+  private
+
+  def order_by
+    Comable::Product.order_by.find_value(params[:order_by]).try(:value)
+  end
+
+  def filter_by_stocks
+    value = Comable::Product.filter_by_stocks.find_value(params[:filter_by_stocks]).try(:value)
+    value.call if value
+  end
+end

data/app/views/comable/carts/show.html.slim

@@ -0,0 +1,53 @@
+#wrap
+  h2 ショッピングカート
+  hr.line-bg
+  - if current_comable_user.cart.errors.any?
+    .errors
+      ul
+        - current_comable_user.cart.errors.full_messages.each do |message|
+          li = message
+  - if current_comable_user.cart.empty?
+    = Comable.t('carts.empty')
+  - else
+    table.cart
+      tr
+        th 商品画像
+        th 品番・品名・詳細
+        th 数量
+        th 単価（税込）
+        th 小計
+        th 削除
+      - current_comable_user.cart.each do |cart_item|
+        - stock = cart_item.stock
+        - product = stock.product
+        tr
+          td.center
+            = link_to image_tag(product.image_url, width: '100'), comable.product_path(product)
+          td
+            .code
+              = product.code
+            .name
+              = stock.name_with_sku
+            .caption
+              = product.caption
+            - if cart_item.unstocked?
+              .error.soldout = Comable.t('carts.soldout')
+          td.center
+            = form_tag comable.cart_path, method: :put do
+              .form-inline.form-group
+                - selected = cart_item.quantity
+                = select_tag :quantity, options_for_select(1.upto([10, selected].max).to_a, selected)
+                = hidden_field_tag :stock_id, stock.id
+                = submit_tag Comable.t('actions.update'), class: 'btn-default'
+          td.right
+            = number_to_currency product.price
+          td.right
+            = number_to_currency product.price*cart_item.quantity
+          td.center
+            = link_to image_tag("bt_delete.png"), comable.cart_path(stock_id: stock.id), method: :delete
+    .btn-inner
+      = form_for current_order, as: :order, url: comable.checkout_cart_path, method: :put do |f|
+        = f.submit "ご注文画面へすすむ", class: 'btn btn-primary btn-lg btn-block'
+
+/! end#wrap
+

data/app/views/comable/home/show.html.slim

@@ -0,0 +1,50 @@
+#main
+  .information
+    p.title News & TOPICS
+    .box-info
+      p.date
+        | 2014/12/5
+        span.red 【重要なご連絡】エレコマデモサイト K&Bスタイルでは、 一日ごとにデータリセットを行っております。 登録された情報は一日で消去されますので、ご了承ください。
+      hr.info/
+      p.date
+        | 2014/12/5
+        span
+          | 一部アイテムスペシャルプライス！この機会をお見逃しなく！
+          a href="#"  プライスダウンセール会場はこちら☆
+      hr.info/
+      p.date
+        | 2014/12/5
+        span
+          | 大人気！
+          a href="#" > ダブルボタンガーリーコート（ベージュ）再入荷☆
+          | 数量限定ですので、早い者勝ちです！
+      hr.info/
+      p.date
+        | 2014/12/5
+        span ウィンターセール開催中！
+      hr.info/
+      p.date
+        | 2014/12/5
+        span 冬物一部プライスダウン！本日から期間限定ですので、この機会をお見逃しなく！
+  /! end.information
+  #product
+    /! New arrival　新着アイテム
+    hr.line-bg
+    .item-box
+      p.title
+        | New arrival
+        span 新着アイテム
+      - @products.order("id DESC").take(4).each_slice(4) do |products|
+        - products.each do |product|
+          .item
+            p.new New
+            = link_to comable.product_path(product), class: 'thumbnail' do
+              = image_tag product.image_url, width: '100'
+            .name
+              = link_to product.name, comable.product_path(product)
+            .price
+              = number_to_currency product.price
+    p.more
+      = link_to ' > もっと見る', comable.root_path
+  /! end#product
+/! end#main