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

Revert "Styling for shop page product modal"

Browse Source 
This reverts commit 84b6f99321.

Conflicts:

	app/assets/stylesheets/darkswarm/images.css.sass
	app/views/modals/_producer.html.haml
This commit is contained in:
Rohan Mitchell
2014-05-24 09:12:24 +10:00
parent bb1b7cfa90
commit 69e0e71eb6
7 changed files with 24 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/assets/stylesheets/darkswarm/all.scss
View File

@@ -9,3 +9,6 @@
*/
@import 'foundation-icons';
ofn-modal {
display: block;
}

46
app/assets/stylesheets/darkswarm/images.css.sass
View File

@@ -1,46 +0,0 @@
@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))
.producer-hero
position: relative
padding: 0
.producer-hero-img
background-color: #999
width: 100%
height: inherit
max-height: 260px
overflow: hidden
margin-top: 2em
margin-bottom: 1em
h3.producer-name
background-color: rgba(255,255,255,0.65)
height: 2.5em
width: 100%
position: absolute
bottom: 0
padding: 0.5em
.producer-logo
max-width: 220px
@media only screen and (max-width: 1024px)
.product-img
margin-top: 2em
margin-bottom: 1em

3
app/assets/stylesheets/darkswarm/overrides.css.sass
View File

@@ -1,2 +1,5 @@
.row
max-width: 74em
.reveal-modal
position: fixed

3
app/assets/stylesheets/darkswarm/shop.css.sass
View File

@@ -81,7 +81,8 @@
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)

52
app/views/modals/_producer.html.haml
View File

@@ -1,40 +1,12 @@
%ofn-modal{title: "{{producer.name}}"}
.row
.columns.small-12.producer-hero
%img.producer-hero-img{"ng-src" => "{{producer.promo_image}}"}
/ Will - scale large images down to 1200px wide, crop in to img aspect ratio 60W:13H
%h3.producer-name {{ producer.name }}
.row
.columns.small-12.large-6{"inject-html" => "producer.long_description"}
.columns.small-12.large-6
/ Will needs logic to add in following only if data is available for each type:
/ Will needs better formatting of URLs printed on-screen (minus http://www.)
/ Will needs formatting of URLs driving %a regardless of user input (plus http://www.)
%img.producer-logo{"ng-src" => "{{producer.logo}}"}
%h4 Stay in touch with {{ producer.name }}
%ul.small-block-grid-1{bindonce: true}
%li{"bo-if" => "producer.website"}
%a{"bo-href" => "{{producer.website}}", target: "_blank" }
%i.fi-web
{{ producer.website }}
{{ producer.twitterific }}
%li{"ng-show" => "producer.twitterific"}
%a{"ng-href" => "http://twitter.com/{{producer.twitter}}", target: "_blank"}
%i.fi-social-twitter
{{ producer.twitter }}
%li{"bo-if" => "producer.facebook"}
%a{"bo-href" => "{{producer.facebook}}", target: "_blank"}
%i.fi-social-facebook
{{ producer.facebook }}
%li{"bo-if" => "producer.linkedin"}
%a{"bo-href" => "{{producer.linkedin}}", target: "_blank"}
%i.fi-social-linkedin
{{ producer.linkedin }}
%li{"bo-if" => "producer.instagram"}
%a{"bo-href" => "http://instagram.com/{{producer.instagram}}", target: "_blank"}
/ Will needs logic to allow user to input @instagramhandle to drive a logical URL
%i.fi-social-instagram
{{ producer.instagram }}
%a.close-reveal-modal{"ng-click" => "$close()"} ×
%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 }}

3
app/views/modals/_producers.html.haml
View File

@@ -1,3 +1,4 @@
%h2 Producers
%p Our producers make all the delicious food you can shop for on the Open Food Network.
%h5 Our producers make the food! All the delicious!
%p More text goes here.
%a.close-reveal-modal{"ng-click" => "cancel()"} ×

14
app/views/modals/_product.html.haml
View File

@@ -1,14 +1,4 @@
%ofn-modal{title: "{{product.name}}"}
.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()"} ×
{{ product | json }}
{{ product.description }}