comable_frontend 0.2.3 → 0.3.0

data/app/views/comable/orders/shipment.slim

@@ -1,11 +1,13 @@
-h1 発送方法
+#comable-order
+  .comable-shipment
+    h1
+      = @order.class.human_state_name(:shipment)
 
-.order.shipment
-  = form_for @order, as: :order, url: comable.shipment_order_path, method: :put do |f|
-    ul
-      - Comable::ShipmentMethod.activated.each.with_index do |shipment_method, index|
-        li
-          - checked_flag = @order.shipment_method ? (@order.shipment_method.id == shipment_method.id) : index.zero?
-          = f.radio_button :shipment_method_id, shipment_method.id, checked: checked_flag
-          = f.label :shipment_method_id, shipment_method.name, value: shipment_method.id
-    = f.submit
+    = form_for @order, as: :order, url: update_order_path, method: :put do |f|
+      ul
+        - Comable::ShipmentMethod.activated.each.with_index do |shipment_method, index|
+          li
+            - checked_flag = @order.shipment_method ? (@order.shipment_method.id == shipment_method.id) : index.zero?
+            = f.radio_button :shipment_method_id, shipment_method.id, checked: checked_flag
+            = f.label :shipment_method_id, shipment_method.name, value: shipment_method.id
+      = f.submit Comable.t('next_step')

data/app/views/comable/orders/signin.slim

@@ -0,0 +1,22 @@
+#comable-order
+  .comable-signin
+    / TODO: Standardize
+    - if @order.errors.any?
+      .error_messages
+        ul
+          - @order.errors.full_messages.each do |full_message|
+            li = full_message
+
+    section.col-sm-6
+      = render file: 'devise/sessions/new'
+
+    section.col-sm-6
+      h2
+        = Comable.t('guest')
+      = form_for @order, as: :order, url: comable.guest_order_path, method: :put do |f|
+        .form-group
+          .col-sm-2.control-label
+            = f.label :email
+          .col-sm-10
+            = f.email_field :email, placeholder: @order.class.human_attribute_name(:email)
+        = f.submit Comable.t('guest_order'), class: 'btn btn-default'

data/app/views/comable/products/index.slim

@@ -1,11 +1,31 @@
-h1 商品一覧
+#comable-product
+  - if @category
+    .row
+      = listed_categories @category.path, tag: :ol, class: 'breadcrumb'
 
-ul.products
-  - @products.each do |product|
-    li.product
-      h2.name
-        = link_to product.name, comable.product_path(product)
-      .caption
-        = product.caption
-      .price
-        = number_to_currency product.price
+  .row
+    .category.col-sm-2
+      h2
+        = Comable.t('category')
+      - if @category
+        = listed_categories @category.path, class: 'category-path'
+        = listed_categories @category.children
+      - else
+        = listed_categories Comable::Category.roots
+
+    .products.col-sm-10
+      - @products.each_slice(3) do |products|
+        ul.row
+          - products.each do |product|
+            li.product.col-sm-4
+              = 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)
+              .caption
+                = product.caption
+              .price
+                = number_to_currency product.price
+
+      .text-center
+        = paginate @products, theme: :comable_frontend

data/app/views/comable/products/show.slim

@@ -1,21 +1,89 @@
-.product
-  h1.name
-    = @product.name
-  .caption
-    = @product.caption
-  .price
-    = number_to_currency @product.price
-
-= form_tag comable.add_cart_path do
-  - if @product.sku?
-    .sku
-      = sku_table @product, border: 1
-
-  - if @product.unsold?
-    .add_cart
-        = hidden_field_tag :product_id, @product.id
-        = select_tag :quantity, options_for_select(1.upto(10).to_a)
-        = submit_tag 'カートに入れる'
-  - else
-    .sold_out
-      | 品切れ中
+#comable-product
+  .row
+    ol.breadcrumb
+      - if @product.categories.any?
+        - @product.categories.first.path.each do |category|
+          li = link_to category.name, comable.products_path(category_id: category.id)
+      li.active
+        = @product.name
+
+  .row
+    .images.col-sm-6
+      - if @product.images.any?
+        .image
+          = link_to @product.image_url, class: 'thumbnail' do
+            = image_tag @product.image_url, width: '100%'
+        .row
+          - (@product.images - [@product.images.first]).each do |image|
+              .image.col-sm-4
+                = link_to image.url, class: 'thumbnail' do
+                  = image_tag image.url, width: '100%'
+      - else
+        .thumbnail
+          .image = image_tag @product.image_url, width: '100%'
+
+    .text.col-sm-6
+      h1.name
+        = @product.name
+        small< = @product.code
+      .caption
+        = @product.caption
+      .price
+        = number_to_currency @product.price
+
+      = form_tag comable.add_cart_path do
+        - if @product.sku?
+          .sku
+            = sku_table @product
+
+        - if @product.unsold?
+          .add_cart.form-inline.form-group
+            = hidden_field_tag :product_id, @product.id
+            = select_tag :quantity, options_for_select(1.upto(10).to_a)
+            = submit_tag Comable.t('add_to_cart')
+        - else
+          .sold_out
+            = Comable.t('soldout')
+
+  - if @product.categories.any?
+    .row
+      h2
+        = Comable.t('browse_related_products')
+      ul
+        - @product.categories.each do |category|
+          li = listed_categories category.path, class: 'category-breadcrumb'
+
+  #comable-image-dialog
+  coffee:
+    jQuery( ->
+      $('#comable-product .images .image a').click((event) ->
+        # Disable this event on smartphone
+        return if $(window).width() <= 768
+
+        event.preventDefault()
+
+        image = $(this).find('img')[0]
+        return if image.length == 0
+
+        $('body').addClass('stop-scrolling')
+
+        image_clone = $(image).clone().css(width: 'auto', height: 'auto')
+
+        $('#comable-image-dialog').html(image_clone).dialog(
+          modal: true,
+          resizable: false,
+          width: $(window).width(),
+          height: $(window).height(),
+          dialogClass: 'without-titlebar',
+          close: -> $('body').removeClass('stop-scrolling')
+        )
+      )
+
+      $('#comable-image-dialog').click( ->
+        $(this).dialog('close')
+      );
+
+      $(document).on('click', '.ui-widget-overlay', ->
+        $('#comable-image-dialog').dialog('close')
+      );
+    )

data/app/views/comable/shared/_address.slim

@@ -1,20 +1,13 @@
-dl
-  .name
-    dt = address.class.human_attribute_name(:family_name)
-    dd = address.family_name
-    dt = address.class.human_attribute_name(:first_name)
-    dd = address.first_name
-  .address
-    .state
-      dt = address.class.human_attribute_name(:state_name)
-      dd = address.state_name
-    .zip_code
-      dt = address.class.human_attribute_name(:zip_code)
-      dd = address.zip_code
-    .city
-      dt = address.class.human_attribute_name(:city)
-      dd = address.city
-  .other
-    .phone_number
-      dt = address.class.human_attribute_name(:phone_number)
-      dd = address.phone_number
+.comable-full_name
+  strong
+    = address.full_name
+.comable-zip_code
+  = address.zip_code
+.comable-address1
+  = address.state_name
+  = address.city
+.comable-address2
+  = address.detail
+.comable-phone_number
+  = "#{address.class.human_attribute_name(:phone_number)}: "
+  = address.phone_number

data/app/views/comable/shared/_address_form.slim

@@ -1,21 +1,39 @@
-.name
-  = address.label :family_name
-  = address.text_field :family_name
-  = address.label :first_name
-  = address.text_field :first_name
+.form-group.comable-name
+  .col-sm-2.control-label
+    = address.label :full_name
+  .col-sm-10
+    .row
+      .col-sm-6
+        = address.text_field :family_name, placeholder: address.object.class.human_attribute_name(:family_name)
+      .col-sm-6
+        = address.text_field :first_name, placeholder: address.object.class.human_attribute_name(:first_name)
 
-.address
-  .state
+.form-group.comable-state_name
+  .col-sm-2.control-label
     = address.label :state_name
-    = address.text_field :state_name
-  .zip_code
+  .col-sm-10
+    = address.text_field :state_name, placeholder: address.object.class.human_attribute_name(:state_name)
+
+.form-group.comable-zip_code
+  .col-sm-2.control-label
     = address.label :zip_code
-    = address.text_field :zip_code, max_length: 8
-  .city
+  .col-sm-10
+    = address.text_field :zip_code, max_length: 8, placeholder: address.object.class.human_attribute_name(:zip_code)
+
+.form-group.comable-city
+  .col-sm-2.control-label
     = address.label :city
-    = address.text_field :city
+  .col-sm-10
+    = address.text_field :city, placeholder: address.object.class.human_attribute_name(:city)
+
+.form-group.comable-detail
+  .col-sm-2.control-label
+    = address.label :detail
+  .col-sm-10
+    = address.text_field :detail, placeholder: address.object.class.human_attribute_name(:detail)
 
-.other
-  .phone_number
+.form-group.phone_number
+  .col-sm-2.control-label
     = address.label :phone_number
-    = address.text_field :phone_number, max_length: 18
+  .col-sm-10
+    = address.text_field :phone_number, max_length: 18, placeholder: address.object.class.human_attribute_name(:phone_number)

data/app/views/comable/shared/_footer.slim

@@ -0,0 +1,2 @@
+footer
+  | Powered by #{link_to 'Comable', 'https://github.com/hyoshida/comable'}

data/app/views/comable/shared/_header.slim

@@ -0,0 +1,74 @@
+header
+  nav.navbar.navbar-default role="navigation"
+    .comable-navbar-top
+      .container
+        /! Collect the nav links, forms, and other content for toggling
+        #bs-example-navbar-collapse-1.collapse.navbar-collapse
+          ul.nav.navbar-nav
+            li
+              p.navbar-text
+                | descriptions
+          ul.nav.navbar-nav.navbar-right
+            li
+              = link_to Comable.t('my_account'), comable.customer_path
+            li
+              - if current_customer.signed_in?
+                = link_to comable.destroy_customer_session_path, method: :delete do
+                  i.glyphicon.glyphicon-log-out>
+                  = Comable.t('sign_out')
+              - else
+                = link_to comable.new_customer_session_path do
+                  i.glyphicon.glyphicon-log-in>
+                  = Comable.t('sign_in')
+    .container
+      /! Brand and toggle get grouped for better mobile display
+      .navbar-header
+        button.navbar-toggle.collapsed data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" type="button"
+          span.sr-only Toggle navigation
+          span.icon-bar
+          span.icon-bar
+          span.icon-bar
+        = link_to current_store.name, comable.root_path, class: 'navbar-brand'
+      /! Collect the nav links, forms, and other content for toggling
+      #bs-example-navbar-collapse-1.collapse.navbar-collapse
+        ul.nav.navbar-nav
+          li.dropdown.menu-large
+            = link_to comable.products_path, class: 'dropdown-toggle', role: 'button', 'aria-expanded' => 'false' do
+              = Comable.t('category')
+              span.caret<
+            ul.dropdown-menu.megamenu.row
+              - Comable::Category.roots.each do |category|
+                li.col-sm-3
+                  ul
+                    li.dropdown-header
+                      = category.name
+                    - category.children.each do |child|
+                      li = link_to_category child, force_link: true
+        ul.nav.navbar-nav.navbar-right
+          li.dropdown
+            = link_to comable.cart_path, class: 'dropdown-toggle', role: 'button', 'aria-expanded' => 'false' do
+              i.glyphicon.glyphicon-shopping-cart>
+              span
+                = Comable.t('cart')
+              span<
+                | (#{current_customer.cart.size})
+              span.caret<
+            ul.dropdown-menu.comable-mini-cart role="menu"
+              - current_customer.cart.take(5).each do |cart_item|
+                li
+                  = link_to comable.product_path(cart_item.product) do
+                    .comable-image
+                      = image_tag cart_item.product.image_url, width: '100%'
+                    .comable-name
+                      = cart_item.name_with_sku
+                    .comable-quantity
+                      = "#{cart_item.class.human_attribute_name(:quantity)}: "
+                      = cart_item.quantity
+              li.comable-show-cart
+                = link_to Comable.t('show_cart'), comable.cart_path
+        = form_tag comable.products_path, method: :get, class: 'navbar-form' do
+          .form-group
+            .input-group
+              = text_field_tag :q, params[:q], class: 'form-control'
+              span.input-group-btn
+                = button_tag Comable.t('search'), class: 'btn btn-default', type: 'button'

data/app/views/comable/shared/_header_for_checkout.slim

@@ -0,0 +1,18 @@
+header
+  nav.navbar.navbar-default role="navigation"
+    .container
+      /! Brand and toggle get grouped for better mobile display
+      .navbar-header
+        = link_to current_store.name, comable.root_path, class: 'navbar-brand'
+      - unless devise_controller?
+        /! Collect the nav links, forms, and other content for toggling
+        .navbar-collapse
+          ol.nav.navbar-nav.navbar-right.comable-checkout-flow
+            li.signin class="#{'active' if action_name == 'signin'}"
+              = Comable.t('checkout_flow.sign_in')
+            li.addresses class="#{'active' if params[:state].in? %w( orderer delivery payment shipment )}"
+              = Comable.t('checkout_flow.address_and_payment')
+            li.confirm class="#{'active' if params[:state] == 'confirm'}"
+              = Comable.t('checkout_flow.confirm')
+            li.complete class="#{'active' if action_name == 'create'}"
+              = Comable.t('checkout_flow.complete')

data/app/views/kaminari/comable_frontend/_gap.html.slim

@@ -0,0 +1,2 @@
+li.disabled
+  = link_to raw(t 'views.pagination.truncate'), '#'

data/app/views/kaminari/comable_frontend/_next_page.html.slim

@@ -0,0 +1,7 @@
+- if current_page.last?
+  li.disabled
+    span
+      = raw(t 'views.pagination.next')
+- else
+  li
+    = link_to raw(t 'views.pagination.next'), url, rel: 'next', remote: remote

data/app/views/kaminari/comable_frontend/_page.html.slim

@@ -0,0 +1,3 @@
+li class="#{'active' if page.current?}"
+  = link_to page, page.current? ? '#' : url,
+    remote: remote, rel: page.next? ? 'next' : page.prev? ? 'prev' : nil

data/app/views/kaminari/comable_frontend/_paginator.html.slim

@@ -0,0 +1,11 @@
+= paginator.render do
+  ul.pagination
+    == prev_page_tag
+
+    - each_page do |page|
+      - if page.left_outer? || page.right_outer? || page.inside_window?
+        == page_tag page
+      - elsif !page.was_truncated?
+        == gap_tag
+
+    == next_page_tag

data/app/views/kaminari/comable_frontend/_prev_page.html.slim

@@ -0,0 +1,7 @@
+- if current_page.first?
+  li.disabled
+    span
+      = raw(t 'views.pagination.previous')
+- else
+  li
+    = link_to raw(t 'views.pagination.previous'), url, rel: 'prev', remote: remote

data/app/views/layouts/comable/application.slim

@@ -3,28 +3,37 @@ html
   head
     title = current_store.name
 
-    - if current_store.meta_keyword.present?
-      meta name="keywords" content="#{current_store.meta_keyword}"
+    - if current_store.meta_keywords.present?
+      meta name="keywords" content="#{current_store.meta_keywords}"
 
     - if current_store.meta_description.present?
       meta name="description" content="#{current_store.meta_description}"
 
-    = stylesheet_link_tag "comable/application", media: "all"
-    = javascript_include_tag "comable/application"
+    = stylesheet_link_tag "comable/frontend/application", media: "all"
+    = javascript_include_tag "comable/frontend/application"
     = csrf_meta_tags
 
     css:
       .hidden { display: none; }
 
-  body
-    - flash.each do |name, msg|
-      = content_tag(:div, msg, id: "flash_#{name}")
+    javascript:
+      jQuery(document).ready(function() {
+        $(".dropdown").hover(
+          function() { $('.dropdown-menu', this).stop().delay(500).queue(function() { $(this).show().parent().addClass('open').dequeue(); }) },
+          function() { $('.dropdown-menu', this).stop().hide().parent().removeClass('open'); });
+      });
 
-    nav
-      ul
-        - if current_customer.signed_in?
-          li = link_to 'Logout', comable.destroy_customer_session_path, method: :delete
-        - else
-          li = link_to 'Login', comable.new_customer_session_path
+  - mini_header_flag = controller_name == 'orders' || devise_controller?
+  body class="#{'comable-checkout-layout' if mini_header_flag}"
+    - if mini_header_flag
+      = render 'comable/shared/header_for_checkout'
+    - else
+      = render 'comable/shared/header'
 
-    == yield
+    main.container
+      - flash.each do |name, msg|
+        = content_tag(:div, msg, id: "flash_#{name}")
+
+      == yield
+
+    = render 'comable/shared/footer'