mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-02-27 01:43:22 +00:00
Styling for shop page product modal
This commit is contained in:
@@ -9,6 +9,3 @@
|
||||
*/
|
||||
@import 'foundation-icons';
|
||||
|
||||
ofn-modal {
|
||||
display: block;
|
||||
}
|
||||
21
app/assets/stylesheets/darkswarm/images.css.sass
Normal file
21
app/assets/stylesheets/darkswarm/images.css.sass
Normal file
@@ -0,0 +1,21 @@
|
||||
@import mixins
|
||||
@import variables
|
||||
@import branding
|
||||
|
||||
.product-img
|
||||
border-bottom: 40px white solid
|
||||
border-top: 20px white solid
|
||||
border-left: 20px white solid
|
||||
border-right: 20px white solid
|
||||
outline: 1px solid #ccc
|
||||
@include box-shadow(0 1px 2px 1px rgba(0,0,0,0.25))
|
||||
|
||||
@media only screen and (max-width: 1024px)
|
||||
.product-img
|
||||
margin-top: 2em
|
||||
margin-bottom: 1em
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,5 +1,2 @@
|
||||
.row
|
||||
max-width: 74em
|
||||
|
||||
.reveal-modal
|
||||
position: fixed
|
||||
|
||||
@@ -81,8 +81,7 @@
|
||||
padding-top: 1em
|
||||
input.button.right
|
||||
float: left
|
||||
|
||||
|
||||
|
||||
product:hover, product:focus, product:active
|
||||
border-color: $clr-brick
|
||||
@include box-shadow(0 0 3px 0 $clr-brick-bright)
|
||||
|
||||
@@ -1,12 +1,28 @@
|
||||
%ofn-modal{title: "{{ producer.name }}"}
|
||||
#producer_modal
|
||||
.row
|
||||
.small-12.columns
|
||||
%img{"ng-src" => "producer.promo_image"}
|
||||
%h3 {{ producer.name }}
|
||||
.row
|
||||
.small-6.columns
|
||||
%p
|
||||
{{ producer.description }}
|
||||
.small-6.columns
|
||||
Stay in touch with {{ producer.name }}
|
||||
/ %ofn-modal{title: "{{ producer.name }}"}
|
||||
/ #producer_modal
|
||||
/ .row
|
||||
/ .small-12.columns
|
||||
/ %img{"ng-src" => "producer.promo_image"}
|
||||
/ %h3 {{ producer.name }}
|
||||
/ .row
|
||||
/ .small-6.columns
|
||||
/ %p
|
||||
/ {{ producer.description }}
|
||||
/ .small-6.columns
|
||||
/ Stay in touch with {{ producer.name }}
|
||||
/ %a.close-reveal-modal{"ng-click" => "$close()"} ×
|
||||
|
||||
|
||||
%ofn-modal{title: "{{producer.name}}"}
|
||||
.row
|
||||
.columns.small-12
|
||||
%img.product-img{"ng-src" => "{{producer.promo_image.images[0].large_url}}"}
|
||||
%h3 {{ producer.name }}
|
||||
.row
|
||||
.columns.small-12.large-6
|
||||
%p {{ producer.description }}
|
||||
.columns.small-12.large-6
|
||||
Stay in touch with {{ producer.name }}
|
||||
/ %pre
|
||||
/ {{ producer | json }}
|
||||
%a.close-reveal-modal{"ng-click" => "$close()"} ×
|
||||
@@ -1,4 +1,3 @@
|
||||
%h2 Producers
|
||||
%h5 Our producers make the food! All the delicious!
|
||||
%p More text goes here.
|
||||
%p Our producers make all the delicious food you can shop for on the Open Food Network.
|
||||
%a.close-reveal-modal{"ng-click" => "cancel()"} ×
|
||||
@@ -1,4 +1,14 @@
|
||||
%ofn-modal{title: "{{product.name}}"}
|
||||
|
||||
{{ product | json }}
|
||||
{{ product.description }}
|
||||
.row
|
||||
.columns.small-12.large-6
|
||||
%img.product-img{"ng-src" => "{{product.master.images[0].large_url}}"}
|
||||
.columns.small-12.large-6
|
||||
%h2
|
||||
%img{"ng-src" => "{{product.primary_taxon.icon}}"}
|
||||
{{product.name}}
|
||||
%p {{product.description}}
|
||||
/ %pre
|
||||
/ {{ product | json }}
|
||||
%a.close-reveal-modal{"ng-click" => "$close()"} ×
|
||||
|
||||
Reference in New Issue
Block a user