diff --git a/app/assets/javascripts/templates/product_modal.html.haml b/app/assets/javascripts/templates/product_modal.html.haml index e6f591a9ab..5ce84d622b 100644 --- a/app/assets/javascripts/templates/product_modal.html.haml +++ b/app/assets/javascripts/templates/product_modal.html.haml @@ -10,7 +10,7 @@ .filter-shopfront.property-selectors.inline-block %filter-selector{ 'selector-set' => "productPropertySelectors", objects: "[product] | propertiesWithValuesOf" } - %div{"ng-if" => "product.description_html"} + .product-description{"ng-if" => "product.description_html"} %p.text-small{"ng-bind-html" => "::product.description_html"} .columns.small-12.large-6 diff --git a/app/assets/stylesheets/darkswarm/_shop-modals.css.scss b/app/assets/stylesheets/darkswarm/_shop-modals.css.scss index 24df37c1b0..73a488dddd 100644 --- a/app/assets/stylesheets/darkswarm/_shop-modals.css.scss +++ b/app/assets/stylesheets/darkswarm/_shop-modals.css.scss @@ -1,15 +1,21 @@ .product-header { + padding-left: 1.5rem; + h1, h2, h3, h4, h5, h6 { - margin: 0; + margin: 0.2rem 0 0 0; } span { color: $grey-500; } + .product-description { + margin: 1rem 0.25rem 0.25rem 0; + } + .property-selectors li { margin: 0 0.25rem 0.25rem 0; - padding: 0.4rem 0 1.1rem 0; + padding: 0.4rem 0 0 0; a { border: 1px solid $grey-300; diff --git a/app/assets/stylesheets/darkswarm/images.css.scss b/app/assets/stylesheets/darkswarm/images.css.scss index 2e94bbab47..81d6804dfa 100644 --- a/app/assets/stylesheets/darkswarm/images.css.scss +++ b/app/assets/stylesheets/darkswarm/images.css.scss @@ -14,6 +14,12 @@ display: none; } } + + @media only screen and (max-width: 1024px) { + margin-top: 0; + margin-bottom: 1em; + padding: 5px; + } } .hero-img { @@ -46,10 +52,3 @@ .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/modals.css.scss b/app/assets/stylesheets/darkswarm/modals.css.scss index 9c80e13007..e903409d41 100644 --- a/app/assets/stylesheets/darkswarm/modals.css.scss +++ b/app/assets/stylesheets/darkswarm/modals.css.scss @@ -5,8 +5,6 @@ dialog , .reveal-modal { border: none; outline: none; - padding: 30px 20px 0 20px; - border-bottom: 30px solid white; overflow-y: scroll; overflow-x: hidden; min-height: 260px; @@ -23,12 +21,15 @@ dialog left: 4%; max-height: 92%; max-width: 92%; + padding: 15px 0 0 0; top: 4%; } // Medium and up - larger outside area @media only screen and (min-width: 641px) { + border-bottom: 30px solid white; max-height: 90%; + padding: 30px 20px 0 20px; top: 5%; } } @@ -78,6 +79,7 @@ dialog .mobile-close-reveal-modal .bottom-close-button { background-color: $orange-500; + margin: 0 0 1rem; @media only screen and (min-width: 640px) { display: none;