mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-01-24 20:36:49 +00:00
WIP groups page styling and markup updates
This commit is contained in:
summerscope
@@ -1,159 +1,182 @@
|
||||
%div{style: "padding: 1.5em;"}
|
||||
%img{"src" => @group.promo_image, style: "display: block"}
|
||||
%div{style: "margin-bottom: 1em"}
|
||||
%img{"src" => @group.logo}
|
||||
%div{style: "display: inline-block; vertical-align: middle"}
|
||||
%h2{style: "margin-bottom: 0em"}= @group.name
|
||||
%div= @group.description
|
||||
.row.pad-top
|
||||
.small-12.columns.pad-top
|
||||
%header
|
||||
.row
|
||||
.small-12.columns
|
||||
%img{"src" => @group.promo_image}
|
||||
.row.pad-top
|
||||
.small-3.medium-2.columns
|
||||
%img{"src" => @group.logo}
|
||||
.small-9.medium-10.columns
|
||||
%h2= @group.name
|
||||
%p= @group.description
|
||||
|
||||
#div{"ng-controller" => "TabsCtrl", style: "clear: both"}
|
||||
%tabset
|
||||
|
||||
%tab{heading: 'Map',
|
||||
active: "active(\'\')",
|
||||
select: "select(\'\')"}
|
||||
= inject_json_ams "enterprises", @group.enterprises, Api::EnterpriseSerializer
|
||||
.map-container
|
||||
%map{"ng-controller" => "MapCtrl", "ng-if" => "(active(\'\') && (mapShowed = true)) || mapShowed"}
|
||||
%google-map{options: "map.additional_options", center: "map.center", zoom: "map.zoom", styles: "map.styles", draggable: "true"}
|
||||
%markers{models: "OfnMap.enterprises", fit: "true",
|
||||
coords: "'self'", icon: "'icon'", click: "'reveal'"}
|
||||
|
||||
%tab{heading: 'About us',
|
||||
active: "active(\'about\')",
|
||||
select: "select(\'about\')"}
|
||||
%h3 About us
|
||||
%p= @group.long_description
|
||||
|
||||
%tab{heading: 'Our producers',
|
||||
active: "active(\'producers\')",
|
||||
select: "select(\'producers\')"}
|
||||
.producers.pad-top{"ng-controller" => "GroupEnterprisesCtrl"}
|
||||
.row
|
||||
.small-12.columns.pad-top
|
||||
%h1 Our Producers
|
||||
= render partial: "shared/components/enterprise_search"
|
||||
-# TODO: find out why this is not working
|
||||
-#= render partial: "producers/filters"
|
||||
|
||||
.row{bindonce: true}
|
||||
.small-12.columns
|
||||
.active_table
|
||||
%producer.active_table_node.row.animate-repeat{id: "{{producer.path}}",
|
||||
"ng-repeat" => "producer in filteredEnterprises = (Enterprises.producers | visible | searchEnterprises:query | taxons:activeTaxons)",
|
||||
"ng-controller" => "GroupEnterpriseNodeCtrl",
|
||||
"ng-class" => "{'closed' : !open(), 'open' : open(), 'inactive' : !producer.active}",
|
||||
id: "{{producer.hash}}"}
|
||||
|
||||
.small-12.columns
|
||||
= render partial: 'producers/skinny'
|
||||
= render partial: 'producers/fat'
|
||||
|
||||
= render partial: 'shared/components/enterprise_no_results'
|
||||
|
||||
%tab{heading: 'Our hubs',
|
||||
active: "active(\'hubs\')",
|
||||
select: "select(\'hubs\')"}
|
||||
#hubs.hubs{"ng-controller" => "GroupEnterprisesCtrl"}
|
||||
.row
|
||||
.small-12.columns
|
||||
%h1 Our Hubs
|
||||
|
||||
= render partial: "shared/components/enterprise_search"
|
||||
-# TODO: find out why this is not working
|
||||
-#= render partial: "home/filters"
|
||||
|
||||
.row{bindonce: true}
|
||||
.small-12.columns
|
||||
.active_table
|
||||
%hub.active_table_node.row.animate-repeat{id: "{{hub.hash}}",
|
||||
"ng-repeat" => "hub in filteredEnterprises = (Enterprises.hubs | visible | searchEnterprises:query | taxons:activeTaxons | shipping:shippingTypes | showHubProfiles:show_profiles | orderBy:['-active', '+orders_close_at'])",
|
||||
"ng-class" => "{'is_profile' : hub.category == 'hub_profile', 'closed' : !open(), 'open' : open(), 'inactive' : !hub.active, 'current' : current()}",
|
||||
"ng-controller" => "GroupEnterpriseNodeCtrl"}
|
||||
.small-12.columns
|
||||
= render partial: 'home/skinny'
|
||||
= render partial: 'home/fat'
|
||||
|
||||
= render partial: 'shared/components/enterprise_no_results'
|
||||
|
||||
%tab{heading: 'Contact us',
|
||||
active: "active(\'contact\')",
|
||||
select: "select(\'contact\')"}
|
||||
.row
|
||||
.small-6.columns
|
||||
%h3 Contact us
|
||||
- if @group.phone
|
||||
.row
|
||||
.small-2.columns
|
||||
Call
|
||||
.small-10.columns
|
||||
= @group.phone
|
||||
- if @group.email
|
||||
.row
|
||||
.small-2.columns
|
||||
Email
|
||||
.small-10.columns
|
||||
= @group.email
|
||||
- if @group.website
|
||||
.row
|
||||
.small-2.columns
|
||||
Website
|
||||
.small-10.columns
|
||||
= @group.website
|
||||
.small-6.columns
|
||||
%h3 Follow us
|
||||
- if @group.facebook
|
||||
.row
|
||||
.small-2.columns
|
||||
Facebook
|
||||
.small-10.columns
|
||||
= @group.facebook
|
||||
- if @group.instagram
|
||||
.row
|
||||
.small-2.columns
|
||||
Instagram
|
||||
.small-10.columns
|
||||
= @group.instagram
|
||||
- if @group.linkedin
|
||||
.row
|
||||
.small-2.columns
|
||||
LinkedIn
|
||||
.small-10.columns
|
||||
= @group.linkedin
|
||||
- if @group.twitter
|
||||
.row
|
||||
.small-2.columns
|
||||
Twitter
|
||||
.small-10.columns
|
||||
= @group.twitter
|
||||
.row
|
||||
.small-6.columns
|
||||
%h3 Address
|
||||
%p
|
||||
= @group.address.address1
|
||||
- if @group.address.address2
|
||||
%br
|
||||
= @group.address.address2
|
||||
%br
|
||||
= @group.address.city
|
||||
,
|
||||
= @group.address.state
|
||||
= @group.address.zipcode
|
||||
%br
|
||||
= @group.address.country
|
||||
|
||||
.text-center
|
||||
.row.pad-top
|
||||
.small-12.columns.pad-top
|
||||
%p
|
||||
= @group.name
|
||||
123
|
||||
%p
|
||||
-if @group.facebook
|
||||
%a{title:'Follow us on Facebook', href: 'https://www.facebook.com/' + @group.facebook, target: '_blank'}
|
||||
%i.ofn-i_044-facebook
|
||||
-if @group.email
|
||||
%a{title:'Email us', href: @group.email.reverse, mailto: true}
|
||||
%i.ofn-i_050-mail-circle
|
||||
-if @group.website
|
||||
%a{title:'Visit our website', href: 'http://' + @group.website, target: '_blank'}
|
||||
%i.ofn-i_049-web
|
||||
456
|
||||
%p
|
||||
789
|
||||
|
||||
/ %div{style: "padding: 1.5em;"}
|
||||
/ %img{"src" => @group.promo_image, style: "display: block"}
|
||||
/ %div{style: "margin-bottom: 1em"}
|
||||
/ %img{"src" => @group.logo}
|
||||
/ %div{style: "display: inline-block; vertical-align: middle"}
|
||||
/ %h2{style: "margin-bottom: 0em"}= @group.name
|
||||
/ %div= @group.description
|
||||
|
||||
/ #div{"ng-controller" => "TabsCtrl", style: "clear: both"}
|
||||
/ %tabset
|
||||
|
||||
/ %tab{heading: 'Map',
|
||||
/ active: "active(\'\')",
|
||||
/ select: "select(\'\')"}
|
||||
/ = inject_json_ams "enterprises", @group.enterprises, Api::EnterpriseSerializer
|
||||
/ .map-container
|
||||
/ %map{"ng-controller" => "MapCtrl", "ng-if" => "(active(\'\') && (mapShowed = true)) || mapShowed"}
|
||||
/ %google-map{options: "map.additional_options", center: "map.center", zoom: "map.zoom", styles: "map.styles", draggable: "true"}
|
||||
/ %markers{models: "OfnMap.enterprises", fit: "true",
|
||||
/ coords: "'self'", icon: "'icon'", click: "'reveal'"}
|
||||
|
||||
/ %tab{heading: 'About us',
|
||||
/ active: "active(\'about\')",
|
||||
/ select: "select(\'about\')"}
|
||||
/ %h3 About us
|
||||
/ %p= @group.long_description
|
||||
|
||||
/ %tab{heading: 'Our producers',
|
||||
/ active: "active(\'producers\')",
|
||||
/ select: "select(\'producers\')"}
|
||||
/ .producers.pad-top{"ng-controller" => "GroupEnterprisesCtrl"}
|
||||
/ .row
|
||||
/ .small-12.columns.pad-top
|
||||
/ %h1 Our Producers
|
||||
/ = render partial: "shared/components/enterprise_search"
|
||||
/ -# TODO: find out why this is not working
|
||||
/ -#= render partial: "producers/filters"
|
||||
|
||||
/ .row{bindonce: true}
|
||||
/ .small-12.columns
|
||||
/ .active_table
|
||||
/ %producer.active_table_node.row.animate-repeat{id: "{{producer.path}}",
|
||||
/ "ng-repeat" => "producer in filteredEnterprises = (Enterprises.producers | visible | searchEnterprises:query | taxons:activeTaxons)",
|
||||
/ "ng-controller" => "GroupEnterpriseNodeCtrl",
|
||||
/ "ng-class" => "{'closed' : !open(), 'open' : open(), 'inactive' : !producer.active}",
|
||||
/ id: "{{producer.hash}}"}
|
||||
|
||||
/ .small-12.columns
|
||||
/ = render partial: 'producers/skinny'
|
||||
/ = render partial: 'producers/fat'
|
||||
|
||||
/ = render partial: 'shared/components/enterprise_no_results'
|
||||
|
||||
/ %tab{heading: 'Our hubs',
|
||||
/ active: "active(\'hubs\')",
|
||||
/ select: "select(\'hubs\')"}
|
||||
/ #hubs.hubs{"ng-controller" => "GroupEnterprisesCtrl"}
|
||||
/ .row
|
||||
/ .small-12.columns
|
||||
/ %h1 Our Hubs
|
||||
|
||||
/ = render partial: "shared/components/enterprise_search"
|
||||
/ -# TODO: find out why this is not working
|
||||
/ -#= render partial: "home/filters"
|
||||
|
||||
/ .row{bindonce: true}
|
||||
/ .small-12.columns
|
||||
/ .active_table
|
||||
/ %hub.active_table_node.row.animate-repeat{id: "{{hub.hash}}",
|
||||
/ "ng-repeat" => "hub in filteredEnterprises = (Enterprises.hubs | visible | searchEnterprises:query | taxons:activeTaxons | shipping:shippingTypes | showHubProfiles:show_profiles | orderBy:['-active', '+orders_close_at'])",
|
||||
/ "ng-class" => "{'is_profile' : hub.category == 'hub_profile', 'closed' : !open(), 'open' : open(), 'inactive' : !hub.active, 'current' : current()}",
|
||||
/ "ng-controller" => "GroupEnterpriseNodeCtrl"}
|
||||
/ .small-12.columns
|
||||
/ = render partial: 'home/skinny'
|
||||
/ = render partial: 'home/fat'
|
||||
|
||||
/ = render partial: 'shared/components/enterprise_no_results'
|
||||
|
||||
/ %tab{heading: 'Contact us',
|
||||
/ active: "active(\'contact\')",
|
||||
/ select: "select(\'contact\')"}
|
||||
/ .row
|
||||
/ .small-6.columns
|
||||
/ %h3 Contact us
|
||||
/ - if @group.phone
|
||||
/ .row
|
||||
/ .small-2.columns
|
||||
/ Call
|
||||
/ .small-10.columns
|
||||
/ = @group.phone
|
||||
/ - if @group.email
|
||||
/ .row
|
||||
/ .small-2.columns
|
||||
/ Email
|
||||
/ .small-10.columns
|
||||
/ = @group.email
|
||||
/ - if @group.website
|
||||
/ .row
|
||||
/ .small-2.columns
|
||||
/ Website
|
||||
/ .small-10.columns
|
||||
/ = @group.website
|
||||
/ .small-6.columns
|
||||
/ %h3 Follow us
|
||||
/ - if @group.facebook
|
||||
/ .row
|
||||
/ .small-2.columns
|
||||
/ Facebook
|
||||
/ .small-10.columns
|
||||
/ = @group.facebook
|
||||
/ - if @group.instagram
|
||||
/ .row
|
||||
/ .small-2.columns
|
||||
/ Instagram
|
||||
/ .small-10.columns
|
||||
/ = @group.instagram
|
||||
/ - if @group.linkedin
|
||||
/ .row
|
||||
/ .small-2.columns
|
||||
/ LinkedIn
|
||||
/ .small-10.columns
|
||||
/ = @group.linkedin
|
||||
/ - if @group.twitter
|
||||
/ .row
|
||||
/ .small-2.columns
|
||||
/ Twitter
|
||||
/ .small-10.columns
|
||||
/ = @group.twitter
|
||||
/ .row
|
||||
/ .small-6.columns
|
||||
/ %h3 Address
|
||||
/ %p
|
||||
/ = @group.address.address1
|
||||
/ - if @group.address.address2
|
||||
/ %br
|
||||
/ = @group.address.address2
|
||||
/ %br
|
||||
/ = @group.address.city
|
||||
/ ,
|
||||
/ = @group.address.state
|
||||
/ = @group.address.zipcode
|
||||
/ %br
|
||||
/ = @group.address.country
|
||||
|
||||
/ .text-center
|
||||
/ %p
|
||||
/ = @group.name
|
||||
/ %p
|
||||
/ -if @group.facebook
|
||||
/ %a{title:'Follow us on Facebook', href: 'https://www.facebook.com/' + @group.facebook, target: '_blank'}
|
||||
/ %i.ofn-i_044-facebook
|
||||
/ -if @group.email
|
||||
/ %a{title:'Email us', href: @group.email.reverse, mailto: true}
|
||||
/ %i.ofn-i_050-mail-circle
|
||||
/ -if @group.website
|
||||
/ %a{title:'Visit our website', href: 'http://' + @group.website, target: '_blank'}
|
||||
/ %i.ofn-i_049-web
|
||||
|
||||
= render partial: "shared/footer"
|
||||
|
||||
Reference in New Issue
Block a user