diff --git a/app/assets/javascripts/darkswarm/controllers/page_selection_ctrl.js.coffee b/app/assets/javascripts/darkswarm/controllers/page_selection_ctrl.js.coffee deleted file mode 100644 index 09f2cca98f..0000000000 --- a/app/assets/javascripts/darkswarm/controllers/page_selection_ctrl.js.coffee +++ /dev/null @@ -1,22 +0,0 @@ -angular.module('Darkswarm').controller "PageSelectionCtrl", ($scope, $rootScope, $location) -> - $scope.selectedPage = -> - # The path looks like `/contact` for the URL `https://ofn.org/shop#/contact`. - # We remove the slash at the beginning. - page = $location.path()[1..] - - return $scope.whitelist[0] unless page - - # If the path points to an unrelated path like `/login`, stay where we were. - return $scope.lastPage unless page in $scope.whitelist - - $scope.lastPage = page - page - - $scope.whitelistPages = (pages) -> - $scope.whitelist = pages - $scope.lastPage = pages[0] - - # when an order cycle is changed, ensure the shop tab is active to save a click - $rootScope.$on "orderCycleSelected", -> - if $scope.selectedPage() != "shop" - $location.path("shop") diff --git a/app/views/shopping_shared/_tabs.html.haml b/app/views/shopping_shared/_tabs.html.haml index e1c95af47d..4ddcbf99f6 100644 --- a/app/views/shopping_shared/_tabs.html.haml +++ b/app/views/shopping_shared/_tabs.html.haml @@ -1,15 +1,15 @@ - if (@order&.distributor || current_distributor) == current_distributor - - shop_tabs.each do |tab| - = render "shopping_shared/tabs/#{tab[:name]}" - - #shop-tabs{ ng: { controller: "PageSelectionCtrl", init: "whitelistPages(#{shop_tab_names.to_json})", cloak: true } } + #shop-tabs{"data-controller": "tabs-and-panels", "data-tabs-and-panels-class-name-value": "selected"} .tab-buttons .flex.row .columns.small-12.large-8 - shop_tabs.each do |tab| - .page{ "ng-class" => "{ selected: selectedPage() == '#{tab[:name]}' }" } - %a{ href: "##{tab[:name]}" }=tab[:title] + .page + %a{ id: tab[:name], href: "##{tab[:name]}", data: { action: "tabs-and-panels#changeActivePanel tabs-and-panels#changeActiveTab", "tabs-and-panels-target": "tab" }, class: ("selected" if tab[:name] == "shop") }=tab[:title] .columns.large-4.show-for-large-up = render partial: "shopping_shared/order_cycles" - .page-view{ ng: {include: "'shop/' + selectedPage() + '.html'" } } + - shop_tabs.each do |tab| + %div{id: "#{tab[:name]}_panel", "data-tabs-and-panels-target": "panel #{'default' if tab[:name] === "shop"}" } + .page-view + = render "shopping_shared/tabs/#{tab[:name]}" diff --git a/app/views/shopping_shared/tabs/_about.html.haml b/app/views/shopping_shared/tabs/_about.html.haml index 0ef06fb5be..b04078b4d0 100644 --- a/app/views/shopping_shared/tabs/_about.html.haml +++ b/app/views/shopping_shared/tabs/_about.html.haml @@ -1,10 +1,9 @@ -%script{ type: "text/ng-template", id: "shop/about.html" } - #about{"ng-controller" => "AboutUsCtrl"} - %img.hero-img-small{"ng-src" => "{{::shopfront.promo_image}}", "ng-if" => "::shopfront.promo_image"} +#about{"ng-controller" => "AboutUsCtrl"} + %img.hero-img-small{"ng-src" => "{{::shopfront.promo_image}}", "ng-if" => "::shopfront.promo_image"} - .content - .row - .small-12.columns - %p{"ng-bind-html" => "::shopfront.long_description"} - .small-12.large-4.columns -   + .content + .row + .small-12.columns + %p{"ng-bind-html" => "::shopfront.long_description"} + .small-12.large-4.columns +   diff --git a/app/views/shopping_shared/tabs/_contact.html.haml b/app/views/shopping_shared/tabs/_contact.html.haml index cbad4a1966..f2f5b7a70c 100644 --- a/app/views/shopping_shared/tabs/_contact.html.haml +++ b/app/views/shopping_shared/tabs/_contact.html.haml @@ -1,67 +1,66 @@ -%script{ type: "text/ng-template", id: "shop/contact.html" } - .content#contact - .row - .small-12.large-4.columns - - if current_distributor.address.address1 || current_distributor.address.address2 || current_distributor.address.city || current_distributor.address.state || current_distributor.address.zipcode - %div.center - .header - = t :shopping_contact_address - %span= current_distributor.name - %p - = current_distributor.address.address1 - - unless current_distributor.address.address2.blank? - %br - = current_distributor.address.address2 +.content#contact + .row + .small-12.large-4.columns + - if current_distributor.address.address1 || current_distributor.address.address2 || current_distributor.address.city || current_distributor.address.state || current_distributor.address.zipcode + %div.center + .header + = t :shopping_contact_address + %span= current_distributor.name + %p + = current_distributor.address.address1 + - unless current_distributor.address.address2.blank? %br - = current_distributor.address.city - = current_distributor.address.state - = current_distributor.address.zipcode + = current_distributor.address.address2 + %br + = current_distributor.address.city + = current_distributor.address.state + = current_distributor.address.zipcode - .small-12.large-4.columns - - if current_distributor.website || current_distributor.email_address || current_distributor.phone || current_distributor.whatsapp_phone - %div.center - .header - = t :shopping_contact_web - %p - - if current_distributor.phone.present? - = current_distributor.phone + .small-12.large-4.columns + - if current_distributor.website || current_distributor.email_address || current_distributor.phone || current_distributor.whatsapp_phone + %div.center + .header + = t :shopping_contact_web + %p + - if current_distributor.phone.present? + = current_distributor.phone + %br + - if current_distributor.whatsapp_phone.present? + %a{href: current_distributor.whatsapp_url, target: "_blank" } + %img{ src: image_pack_path("social-logos/whatsapp.svg") } + = current_distributor.whatsapp_phone %br - - if current_distributor.whatsapp_phone.present? - %a{href: current_distributor.whatsapp_url, target: "_blank" } - %img{ src: image_pack_path("social-logos/whatsapp.svg") } - = current_distributor.whatsapp_phone - %br - - if current_distributor.website.present? - %a{href: "http://#{current_distributor.website}", target: "_blank" } - = current_distributor.website - %br - - if current_distributor.email_address.present? - %a{href: current_distributor.email_address.reverse, mailto: true} - %span.obfuscatedEmail.email - = current_distributor.email_address.reverse + - if current_distributor.website.present? + %a{href: "http://#{current_distributor.website}", target: "_blank" } + = current_distributor.website + %br + - if current_distributor.email_address.present? + %a{href: current_distributor.email_address.reverse, mailto: true} + %span.obfuscatedEmail.email + = current_distributor.email_address.reverse - .small-12.large-4.columns - - if current_distributor.twitter.present? || current_distributor.facebook.present? || current_distributor.linkedin.present? || current_distributor.instagram.present? - %div.center - .header - = t :shopping_contact_social - %div.follow-icons - - if current_distributor.twitter.present? - %span - %a{href: "http://twitter.com/#{current_distributor.twitter}", target: "_blank" } - %i.twitter.ofn-i_041-twitter + .small-12.large-4.columns + - if current_distributor.twitter.present? || current_distributor.facebook.present? || current_distributor.linkedin.present? || current_distributor.instagram.present? + %div.center + .header + = t :shopping_contact_social + %div.follow-icons + - if current_distributor.twitter.present? + %span + %a{href: "http://twitter.com/#{current_distributor.twitter}", target: "_blank" } + %i.twitter.ofn-i_041-twitter - - if current_distributor.facebook.present? - %span - %a{href: "http://#{current_distributor.facebook}", target: "_blank" } - %i.facebook.ofn-i_044-facebook + - if current_distributor.facebook.present? + %span + %a{href: "http://#{current_distributor.facebook}", target: "_blank" } + %i.facebook.ofn-i_044-facebook - - if current_distributor.linkedin.present? - %span - %a{href: "http://#{current_distributor.linkedin}", target: "_blank" } - %i.linkedin.ofn-i_042-linkedin + - if current_distributor.linkedin.present? + %span + %a{href: "http://#{current_distributor.linkedin}", target: "_blank" } + %i.linkedin.ofn-i_042-linkedin - - if current_distributor.instagram.present? - %span - %a{href: "http://instagram.com/#{current_distributor.instagram}", target: "_blank" } - %i.instagram.ofn-i_043-instagram + - if current_distributor.instagram.present? + %span + %a{href: "http://instagram.com/#{current_distributor.instagram}", target: "_blank" } + %i.instagram.ofn-i_043-instagram diff --git a/app/views/shopping_shared/tabs/_groups.html.haml b/app/views/shopping_shared/tabs/_groups.html.haml index 59026e1718..2e901f5bf3 100644 --- a/app/views/shopping_shared/tabs/_groups.html.haml +++ b/app/views/shopping_shared/tabs/_groups.html.haml @@ -1,13 +1,12 @@ -%script{ type: "text/ng-template", id: "shop/groups.html" } - .content - .row - .small-12.columns - - if current_distributor.groups.length > 0 - %h5 - =current_distributor.name - = t :shopping_groups_part_of - %ul.bullet-list.small-block-grid-1.medium-block-grid-2.large-block-grid-3 - - for group in current_distributor.groups - %li - %a{href: main_app.groups_path + "/#{group.permalink}"} - = group.name +.content + .row + .small-12.columns + - if current_distributor.groups.length > 0 + %h5 + =current_distributor.name + = t :shopping_groups_part_of + %ul.bullet-list.small-block-grid-1.medium-block-grid-2.large-block-grid-3 + - for group in current_distributor.groups + %li + %a{href: main_app.groups_path + "/#{group.permalink}"} + = group.name diff --git a/app/views/shopping_shared/tabs/_home.html.haml b/app/views/shopping_shared/tabs/_home.html.haml index 8c2179b913..139e578033 100644 --- a/app/views/shopping_shared/tabs/_home.html.haml +++ b/app/views/shopping_shared/tabs/_home.html.haml @@ -1,13 +1,12 @@ -%script{ type: "text/ng-template", id: "shop/home.html" } - .order-cycle-bar.hide-for-large-up - = render partial: "shopping_shared/order_cycles" +.order-cycle-bar.hide-for-large-up + = render partial: "shopping_shared/order_cycles" - - if require_customer? - = render partial: "shop/messages/customer_required" +- if require_customer? + = render partial: "shop/messages/customer_required" + +- else + - if no_open_order_cycles? + = render partial: "shop/messages/closed_shop" - else - - if no_open_order_cycles? - = render partial: "shop/messages/closed_shop" - - - else - = render partial: "shop/messages/open_shop" + = render partial: "shop/messages/open_shop" diff --git a/app/views/shopping_shared/tabs/_producers.html.haml b/app/views/shopping_shared/tabs/_producers.html.haml index 1627896d1d..fec31e741d 100644 --- a/app/views/shopping_shared/tabs/_producers.html.haml +++ b/app/views/shopping_shared/tabs/_producers.html.haml @@ -1,14 +1,13 @@ -%script{ type: "text/ng-template", id: "shop/producers.html" } - .content#producers{"ng-controller" => "ProducersTabCtrl"} - .row - .small-12.columns - %h5 - = t :shopping_producers_of_hub, hub: '{{ shopfront.name }}' - %ul.small-block-grid-1.medium-block-grid-2.large-block-grid-3 - %li{"ng-repeat" => "enterprise in shopfront.producers"} - %enterprise-modal{"ng-if": "enterprise.visible != 'hidden'"} - %i.ofn-i_036-producers - {{ enterprise.name }} - %span{"ng-if": "enterprise.visible == 'hidden'"} - %i.ofn-i_036-producers - {{ enterprise.name }} +.content#producers{"ng-controller" => "ProducersTabCtrl"} + .row + .small-12.columns + %h5 + = t :shopping_producers_of_hub, hub: '{{ shopfront.name }}' + %ul.small-block-grid-1.medium-block-grid-2.large-block-grid-3 + %li{"ng-repeat" => "enterprise in shopfront.producers"} + %enterprise-modal{"ng-if": "enterprise.visible != 'hidden'"} + %i.ofn-i_036-producers + {{ enterprise.name }} + %span{"ng-if": "enterprise.visible == 'hidden'"} + %i.ofn-i_036-producers + {{ enterprise.name }} diff --git a/app/views/shopping_shared/tabs/_shop.html.haml b/app/views/shopping_shared/tabs/_shop.html.haml index f8a2747c94..4c54e8bdf7 100644 --- a/app/views/shopping_shared/tabs/_shop.html.haml +++ b/app/views/shopping_shared/tabs/_shop.html.haml @@ -1,12 +1,11 @@ -%script{ type: "text/ng-template", id: "shop/shop.html" } - .order-cycle-bar.hide-for-large-up - = render partial: "shopping_shared/order_cycles" +.order-cycle-bar.hide-for-large-up + = render partial: "shopping_shared/order_cycles" - %div{"ng-controller" => "ProductsCtrl"} - - if no_open_order_cycles? - = render partial: "shop/messages/closed_shop" - - else - = render partial: "shop/messages/select_oc" +%div{"ng-controller" => "ProductsCtrl"} + - if no_open_order_cycles? + = render partial: "shop/messages/closed_shop" + - else + = render partial: "shop/messages/select_oc" - -# Rendering the form, even if there are no open OCs, makes display only shops possible - = render partial: "shop/products/form" + -# Rendering the form, even if there are no open OCs, makes display only shops possible + = render partial: "shop/products/form" diff --git a/app/webpacker/css/darkswarm/shop_tabs.scss b/app/webpacker/css/darkswarm/shop_tabs.scss index e34faf44f7..f7355f5606 100644 --- a/app/webpacker/css/darkswarm/shop_tabs.scss +++ b/app/webpacker/css/darkswarm/shop_tabs.scss @@ -56,13 +56,13 @@ padding: 0.35em 0 0.65em 0; font-size: 0.875em; } - } - &.selected { - border-bottom: 4px solid $teal-500; + &.selected { + border-bottom: 4px solid $teal-500; - a { - color: $teal-500; + a { + color: $teal-500; + } } }