From 69e0e71eb617e75182e58ccacabbf12db427e71f Mon Sep 17 00:00:00 2001 From: Rohan Mitchell Date: Sat, 24 May 2014 09:12:24 +1000 Subject: [PATCH] Revert "Styling for shop page product modal" This reverts commit 84b6f99321a328a14bfe2044dbebde702860bced. Conflicts: app/assets/stylesheets/darkswarm/images.css.sass app/views/modals/_producer.html.haml --- app/assets/stylesheets/darkswarm/all.scss | 3 ++ .../stylesheets/darkswarm/images.css.sass | 46 ---------------- .../stylesheets/darkswarm/overrides.css.sass | 3 ++ .../stylesheets/darkswarm/shop.css.sass | 3 +- app/views/modals/_producer.html.haml | 52 +++++-------------- app/views/modals/_producers.html.haml | 3 +- app/views/modals/_product.html.haml | 14 +---- 7 files changed, 24 insertions(+), 100 deletions(-) delete mode 100644 app/assets/stylesheets/darkswarm/images.css.sass diff --git a/app/assets/stylesheets/darkswarm/all.scss b/app/assets/stylesheets/darkswarm/all.scss index a8ac8af078..80e43cdc8b 100644 --- a/app/assets/stylesheets/darkswarm/all.scss +++ b/app/assets/stylesheets/darkswarm/all.scss @@ -9,3 +9,6 @@ */ @import 'foundation-icons'; +ofn-modal { + display: block; +} \ No newline at end of file diff --git a/app/assets/stylesheets/darkswarm/images.css.sass b/app/assets/stylesheets/darkswarm/images.css.sass deleted file mode 100644 index 927e906842..0000000000 --- a/app/assets/stylesheets/darkswarm/images.css.sass +++ /dev/null @@ -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 - - - - - diff --git a/app/assets/stylesheets/darkswarm/overrides.css.sass b/app/assets/stylesheets/darkswarm/overrides.css.sass index fcec6b455d..917d6dd2e3 100644 --- a/app/assets/stylesheets/darkswarm/overrides.css.sass +++ b/app/assets/stylesheets/darkswarm/overrides.css.sass @@ -1,2 +1,5 @@ .row max-width: 74em + +.reveal-modal + position: fixed diff --git a/app/assets/stylesheets/darkswarm/shop.css.sass b/app/assets/stylesheets/darkswarm/shop.css.sass index e0030a7d7a..0c2972367a 100644 --- a/app/assets/stylesheets/darkswarm/shop.css.sass +++ b/app/assets/stylesheets/darkswarm/shop.css.sass @@ -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) diff --git a/app/views/modals/_producer.html.haml b/app/views/modals/_producer.html.haml index be34e3c20a..056f9e488f 100644 --- a/app/views/modals/_producer.html.haml +++ b/app/views/modals/_producer.html.haml @@ -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 }} diff --git a/app/views/modals/_producers.html.haml b/app/views/modals/_producers.html.haml index 89d8ccabae..153e4dcae3 100644 --- a/app/views/modals/_producers.html.haml +++ b/app/views/modals/_producers.html.haml @@ -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()"} × \ No newline at end of file diff --git a/app/views/modals/_product.html.haml b/app/views/modals/_product.html.haml index 70137ba987..acca8f919b 100644 --- a/app/views/modals/_product.html.haml +++ b/app/views/modals/_product.html.haml @@ -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()"} × - \ No newline at end of file + {{ product | json }} + {{ product.description }}