raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-01-24 20:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

embedded groups layout changes

Browse Source
This commit is contained in:
Keir Osborn
2018-02-13 10:44:03 +00:00
committed by Maikel Linke
parent f626a21c5e
commit bd7e072938
12 changed files with 123 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/javascripts/darkswarm/controllers/group_page_controller.js.coffee
View File

@@ -19,3 +19,4 @@ Darkswarm.controller "GroupPageCtrl", ($scope, group_enterprises, Enterprises, M
$scope.map = angular.copy MapConfiguration.options
$scope.mapMarkers = OfnMap.enterprise_markers visible_enterprises
$scope.embedded_layout = window.location.search.indexOf("embedded_shopfront=true") != -1

6
app/assets/javascripts/darkswarm/directives/target_blank.js.coffee Normal file
View File

@@ -0,0 +1,6 @@
Darkswarm.directive "embeddedTargetBlank", ->
restrict: 'A'
compile: (element) ->
elems = (element.children().find("a"))
if window.location.search.indexOf("embedded_shopfront=true") != -1
elems.attr("target", "_blank")

1
app/assets/javascripts/darkswarm/services/enterprise_modal.js.coffee
View File

@@ -3,6 +3,7 @@ Darkswarm.factory "EnterpriseModal", ($modal, $rootScope)->
new class EnterpriseModal
open: (enterprise)->
scope = $rootScope.$new(true) # Spawn an isolate to contain the enterprise
scope.embedded_layout = window.location.search.indexOf("embedded_shopfront=true") != -1
scope.enterprise = enterprise
$modal.open(templateUrl: "enterprise_modal.html", scope: scope)

2
app/assets/javascripts/templates/partials/enterprise_header.html.haml
View File

@@ -2,7 +2,7 @@
.highlight-top.row
.small-12.medium-7.large-8.columns
%h3{"ng-if" => "::enterprise.is_distributor"}
%a{"ng-href" => "{{::enterprise.path}}", "ofn-change-hub" => "enterprise"}
%a{"ng-href" => "{{::enterprise.path}}", "ofn-change-hub" => "enterprise", "ng-attr-target" => "{{ embedded_layout ? '_blank' : undefined}}"}
%i{"ng-class" => "::enterprise.icon_font"}
%span{"ng-bind" => "::enterprise.name"}
%h3{"ng-if" => "::!enterprise.is_distributor", "ng-class" => "::{'is_producer' : enterprise.is_primary_producer}"}

2
app/assets/javascripts/templates/partials/hub_details.html.haml
View File

@@ -14,7 +14,7 @@
{{'hubs_delivery' | t}}
.row
.columns.small-12
%a.cta-hub{"ng-href" => "{{::enterprise.path}}",
%a.cta-hub{"ng-href" => "{{::enterprise.path}}", "ng-attr-target" => "{{ embedded_layout ? '_blank' : undefined}}",
"ng-class" => "{primary: enterprise.active, secondary: !enterprise.active}",
"ofn-change-hub" => "enterprise"}
.hub-name{"ng-bind" => "::enterprise.name"}

29
app/assets/stylesheets/darkswarm/embedded_shopfront.css.scss
View File

@@ -1,3 +1,5 @@
@import "typography";
body.embedded {
nav.top-bar {
ul.left, ul.center, ul.right li.current_hub {
@@ -28,6 +30,22 @@ body.embedded {
footer {
display: none;
}
.powered-by-embedded {
display: block;
}
.contact {
display: none;
}
.embedded-fullwidth {
width: 100%;
}
#group-page header {
display: none;
}
}
nav.top-bar ul.right li.powered-by {
@@ -51,6 +69,17 @@ nav.top-bar ul.right li.powered-by {
}
}
.powered-by-embedded {
opacity: 0.6;
@include headingFont;
font-size: 1rem;
font-weight: 300;
color: #555;
padding: 0 !important;
display: none;
margin-top: 6px;
}
.blocked-cookies {
text-align: center;
margin-bottom: 0 !important;

21
app/views/groups/show.html.haml
View File

@@ -31,7 +31,7 @@
.small-12.columns.pad-top
.row
.small-12.medium-12.large-9.columns
.small-12.medium-12.large-9.embedded-fullwidth.columns
%div{"ng-controller" => "GroupTabsCtrl"}
%tabset
%tab{heading: t(:label_map),
@@ -48,9 +48,10 @@
%tab{heading: t(:groups_about),
active: "tabs.about.active",
select: "select(\'about\')"}
%h1
= t :groups_about
%p!= @group.long_description
.about{ "embedded_target_blank" => true }
%h1
= t :groups_about
%p!= @group.long_description
%tab{heading: t(:groups_producers),
active: "tabs.producers.active",
@@ -103,7 +104,7 @@
= render 'shared/components/enterprise_no_results'
.small-12.medium-12.large-3.columns
.small-12.medium-12.large-3.columns.contact
= render 'contact'
.small-12.columns.pad-top
@@ -119,7 +120,11 @@
%i.ofn-i_050-mail-circle
=link_to_service "http://", @group.website, title: t(:groups_contact_website) do
%i.ofn-i_049-web
%p
 
.powered-by-embedded
%img{src: '/favicon.ico'}
%span
= t 'powered_by'
%span
= t 'title'
= render "shared/footer"
= render "shared/footer"

2
app/views/producers/_fat.html.haml
View File

@@ -76,7 +76,7 @@
.row.cta-container
.columns.small-12
%a.cta-hub{"ng-repeat" => "hub in producer.hubs | visible | orderBy:'-active'",
"ng-href" => "{{::hub.path}}", "ofn-change-hub" => "hub",
"ng-href" => "{{::hub.path}}", "ng-attr-target" => "{{ embedded_layout ? '_blank' : undefined }}", "ofn-change-hub" => "hub",
"ng-class" => "::{primary: hub.active, secondary: !hub.active}"}
%i.ofn-i_068-shop-reversed{"ng-if" => "::hub.active"}
%i.ofn-i_068-shop-reversed{"ng-if" => "::!hub.active"}

2
app/views/producers/_skinny.html.haml
View File

@@ -1,7 +1,7 @@
.row.active_table_row{"ng-click" => "toggle($event)", "ng-class" => "{'closed' : !open(), 'is_distributor' : producer.is_distributor}"}
.columns.small-12.medium-8.large-8.skinny-head
%span{"ng-if" => "::producer.is_distributor" }
%a.is_distributor{"ng-href" => "{{::producer.path}}"}
%a.is_distributor{"ng-href" => "{{::producer.path}}", "ng-attr-target" => "{{ embedded_layout ? '_blank' : undefined}}"}
.row.vertical-align-middle
.columns.small-2.medium-2.large-2
%i{ng: {class: "::producer.producer_icon_font"}}

6
app/views/shops/_skinny.html.haml
View File

@@ -1,6 +1,6 @@
.row.active_table_row{"ng-if" => "hub.is_distributor", "ng-click" => "toggle($event)", "ng-class" => "{'closed' : !open(), 'is_distributor' : producer.is_distributor}"}
.columns.small-12.medium-5.large-5.skinny-head
%a.hub{"ng-href" => "{{::hub.path}}", "ng-class" => "{primary: hub.active, secondary: !hub.active}", "ofn-change-hub" => "hub", "data-is-link" => "true"}
%a.hub{"ng-href" => "{{::hub.path}}", "ng-attr-target" => "{{ embedded_layout ? '_blank' : undefined}}", "ng-class" => "{primary: hub.active, secondary: !hub.active}", "ofn-change-hub" => "hub", "data-is-link" => "true"}
%i{ng: {class: "::hub.icon_font"}}
%span.margin-top.hub-name-listing{"ng-bind" => "::hub.name | truncate:40"}
@@ -11,7 +11,7 @@
%span.margin-top{"ng-if" => "hub.distance != null && hub.distance > 0"} ({{ hub.distance / 1000 | number:0 }} km)
.columns.small-4.medium-3.large-3.text-right{"ng-if" => "::hub.active"}
%a.hub.open_closed{"ng-href" => "{{::hub.path}}", "ng-class" => "{primary: hub.active, secondary: !hub.active}", "ofn-change-hub" => "hub"}
%a.hub.open_closed{"ng-href" => "{{::hub.path}}", "ng-attr-target" => "{{ embedded_layout ? '_blank' : undefined}}", "ng-class" => "{primary: hub.active, secondary: !hub.active}", "ofn-change-hub" => "hub"}
%i.ofn-i_068-shop-reversed
%span.margin-top{ ng: { if: "::current()" } }
%em= t :hubs_shopping_here
@@ -19,7 +19,7 @@
%span{"ng-bind" => "::hub.orders_close_at | sensible_timeframe"}
.columns.small-4.medium-3.large-3.text-right{"ng-if" => "::!hub.active"}
%a.hub.open_closed{"ng-href" => "{{::hub.path}}", "ng-class" => "{primary: hub.active, secondary: !hub.active}", "ofn-change-hub" => "hub"}
%a.hub.open_closed{"ng-href" => "{{::hub.path}}", "ng-attr-target" => "{{ embedded_layout ? '_blank' : undefined}}", "ng-class" => "{primary: hub.active, secondary: !hub.active}", "ofn-change-hub" => "hub"}
%span.margin-top{ ng: { if: "::current()" } }
%em= t :hubs_shopping_here
%span.margin-top{ ng: { if: "::!current()" } }

85
spec/features/consumer/shopping/embedded_groups_spec.rb
View File

@@ -5,29 +5,74 @@ feature "Using embedded shopfront functionality", js: true do
Capybara.server_port = 9999
describe 'embedded groups' do
let(:enterprise) { create(:distributor_enterprise) }
let!(:group) { create(:enterprise_group, enterprises: [enterprise], permalink: 'group1', on_front_page: true) }
before do
Spree::Config[:enable_embedded_shopfronts] = true
Spree::Config[:embedded_shopfronts_whitelist] = 'localhost'
let(:enterprise) { create(:distributor_enterprise) }
let!(:group) { create(:enterprise_group, enterprises: [enterprise], permalink: 'group1', on_front_page: true) }
before do
Spree::Config[:enable_embedded_shopfronts] = true
Spree::Config[:embedded_shopfronts_whitelist] = 'test.com'
page.driver.browser.js_errors = false
Capybara.current_session.driver.visit('spec/support/views/group_iframe_test.html')
allow_any_instance_of(ActionDispatch::Request).to receive(:referer).and_return('https://www.test.com')
Capybara.current_session.driver.visit('spec/support/views/group_iframe_test.html')
end
end
it "displays in an iframe" do
expect(page).to have_selector 'iframe#group_test_iframe'
it "displays in an iframe" do
expect(page).to have_selector 'iframe#group_test_iframe'
within_frame 'group_test_iframe' do
within 'div#group-page' do
expect(page).to have_content 'About Us'
end
end
end
within_frame 'group_test_iframe' do
within 'div#group-page' do
expect(page).to have_content 'About Us'
end
end
end
it "displays powered by OFN text at bottom of page" do
expect(page).to have_selector 'iframe#group_test_iframe'
within_frame 'group_test_iframe' do
within 'div#group-page' do
expect(page).to have_selector 'div.powered-by-embedded'
expect(page).to have_css "img[src*='favicon.ico']"
expect(page).to have_content 'Powered by'
expect(page).to have_content 'Open Food Network'
end
end
end
it "doesn't display contact details when embedded" do
expect(page).to have_selector 'iframe#group_test_iframe'
within_frame 'group_test_iframe' do
within 'div#group-page' do
expect(page).to have_no_selector 'div.contact-container'
expect(page).to have_no_content '#{group.address.address1}'
end
end
end
it "does not display the header when embedded" do
expect(page).to have_selector 'iframe#group_test_iframe'
within_frame 'group_test_iframe' do
within 'div#group-page' do
expect(page).to have_no_selector 'header'
expect(page).to have_no_selector 'img.group-logo'
expect(page).to have_no_selector 'h2.group-name'
end
end
end
it 'opens links to shops in a new window' do
expect(page).to have_selector 'iframe#group_test_iframe'
within_frame 'group_test_iframe' do
within 'div#group-page' do
enterprise_links = page.all(:xpath, "//*[contains(@href, 'enterprise-5/shop')]", :visible => :false).count
enterprise_links_with_target_blank = page.all(:xpath, "//*[contains(@href, 'enterprise-5/shop') and @target = '_blank']", :visible => :false).count
expect(enterprise_links).to equal(enterprise_links_with_target_blank)
end
end
end
end
end
end

2
spec/support/views/group_iframe_test.html
View File

@@ -2,7 +2,7 @@
<head></head>
<body>
<iframe src="http://localhost:9999/groups/group1?embedded_shopfront=true" name="group_test_iframe" class="group_test_iframe" id="group_test_iframe" style="width:100%;min-height:35em"></iframe>
<iframe src="http://localhost:9999/groups/group1?embedded_shopfront=true" class="group_test_iframe" id="group_test_iframe" style="width:100%;min-height:35em"></iframe>
</body>
</html>