From e5fc3c19e309025264be8b75569d022b6966c023 Mon Sep 17 00:00:00 2001 From: summerscope Date: Fri, 19 Sep 2014 14:41:17 +1000 Subject: [PATCH 1/7] Working on refining scroll on modals --- app/assets/stylesheets/darkswarm/mixins.sass | 14 ++++++++++++++ app/assets/stylesheets/darkswarm/modals.css.sass | 11 +++++++++-- 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/mixins.sass b/app/assets/stylesheets/darkswarm/mixins.sass index 6eef888a17..6f4cb65440 100644 --- a/app/assets/stylesheets/darkswarm/mixins.sass +++ b/app/assets/stylesheets/darkswarm/mixins.sass @@ -16,6 +16,20 @@ -webkit-box-shadow: $box-shadow box-shadow: $box-shadow +@mixin elipse-shadow($elipse-shadow) + content: "" + position: absolute + z-index: -1 + -webkit-box-shadow: $elipse-shadow + box-shadow: $elipse-shadow + bottom: -12% + left: 10% + right: 10% + width: 80% + height: 10% + -moz-border-radius: 100% + border-radius: 100% + @mixin border-radius($border-radius) -webkit-border-radius: $border-radius border-radius: $border-radius diff --git a/app/assets/stylesheets/darkswarm/modals.css.sass b/app/assets/stylesheets/darkswarm/modals.css.sass index e6303a4cd7..c2815549a3 100644 --- a/app/assets/stylesheets/darkswarm/modals.css.sass +++ b/app/assets/stylesheets/darkswarm/modals.css.sass @@ -4,8 +4,15 @@ dialog, .reveal-modal border: none outline: none - padding: 1rem - overflow-y: scroll + padding: 1.25rem + padding-bottom: 0 !important + border-bottom: 20px solid white + overflow-y: auto + overflow-x: hidden + // Not working yet - want a nice gradient shadow when there is overflow - needs JS too + // &:after + // @include elipse-shadow(0 0 40px rgba(0, 0, 0, 0.8)) + // Reveal.js break point: // @media only screen and (max-width: 40.063em) From 4c7fa4eb9f7a65caa442288c6bc48ec3c346bcd3 Mon Sep 17 00:00:00 2001 From: summerscope Date: Fri, 19 Sep 2014 15:19:47 +1000 Subject: [PATCH 2/7] Fix markup so that text is not nested inside icon markup --- .../javascripts/templates/partials/enterprise_header.html.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/javascripts/templates/partials/enterprise_header.html.haml b/app/assets/javascripts/templates/partials/enterprise_header.html.haml index a3089a45af..55b1cec02a 100644 --- a/app/assets/javascripts/templates/partials/enterprise_header.html.haml +++ b/app/assets/javascripts/templates/partials/enterprise_header.html.haml @@ -5,5 +5,5 @@ %h3 %a{"bo-href" => "enterprise.path", "ofn-empties-cart" => "enterprise", bindonce: true} %i{"ng-class" => "enterprise.icon_font"} - %span {{ enterprise.name }} + %span {{ enterprise.name }} %img.hero-img{"ng-src" => "{{enterprise.promo_image}}"} From 1c0196cf5d41d56e94a372074241fd11a34aee27 Mon Sep 17 00:00:00 2001 From: summerscope Date: Fri, 19 Sep 2014 16:25:34 +1000 Subject: [PATCH 3/7] Change language for Kirsten --- app/views/home/_hubs.html.haml | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/app/views/home/_hubs.html.haml b/app/views/home/_hubs.html.haml index ff90a45d48..d7fadc1246 100644 --- a/app/views/home/_hubs.html.haml +++ b/app/views/home/_hubs.html.haml @@ -2,16 +2,10 @@ #hubs.hubs{"ng-controller" => "HubsCtrl"} .row .small-12.columns - %h1 Shop your local area - / %div - / Shop a - / %ofn-modal{title: "food hub"} - / = render partial: "modals/food_hub" - / from the list below: + %h1 Shop in your local area #active-table-search.row.pad-top .small-12.columns - / %i.ofn-i_020-search %input{type: :text, "ng-model" => "query", placeholder: "Search by name or suburb...", From 5a7175e75dcfaebcd57321fdc6140d9a03180d64 Mon Sep 17 00:00:00 2001 From: summerscope Date: Fri, 19 Sep 2014 16:43:31 +1000 Subject: [PATCH 4/7] Tweak markup to make modals fit headers nicely across small sizes --- .../partials/enterprise_header.html.haml | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/app/assets/javascripts/templates/partials/enterprise_header.html.haml b/app/assets/javascripts/templates/partials/enterprise_header.html.haml index 55b1cec02a..b15c0fcb84 100644 --- a/app/assets/javascripts/templates/partials/enterprise_header.html.haml +++ b/app/assets/javascripts/templates/partials/enterprise_header.html.haml @@ -1,9 +1,13 @@ .highlight{"ng-class" => "{'has_shopfront' : enterprise.has_shopfront}"} - .highlight-top - %p.right - {{ [enterprise.address.city, enterprise.address.state_name] | printArray}} - %h3 - %a{"bo-href" => "enterprise.path", "ofn-empties-cart" => "enterprise", bindonce: true} - %i{"ng-class" => "enterprise.icon_font"} - %span {{ enterprise.name }} + + .highlight-top.row + .small-12.medium-7.large-8.columns + %h3 + %a{"bo-href" => "enterprise.path", "ofn-empties-cart" => "enterprise", bindonce: true} + %i{"ng-class" => "enterprise.icon_font"} + %span {{ enterprise.name }} + .small-12.medium-5.large-4.columns.text-right.small-only-text-left + %p {{ [enterprise.address.city, enterprise.address.state_name] | printArray}} + + // Hero image %img.hero-img{"ng-src" => "{{enterprise.promo_image}}"} From 09cc3c628581a664f6317b35f8ae919cd7c74e85 Mon Sep 17 00:00:00 2001 From: summerscope Date: Fri, 19 Sep 2014 16:44:16 +1000 Subject: [PATCH 5/7] Styling for hero image underlay used on enterprises- adjust min heights for different text use cases --- app/assets/stylesheets/darkswarm/images.css.sass | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/images.css.sass b/app/assets/stylesheets/darkswarm/images.css.sass index ce205f0dae..f94240b4af 100644 --- a/app/assets/stylesheets/darkswarm/images.css.sass +++ b/app/assets/stylesheets/darkswarm/images.css.sass @@ -11,12 +11,16 @@ @include box-shadow(0 1px 2px 1px rgba(0,0,0,0.25)) .hero-img - border-bottom: 1px solid $disabled-bright + outline: 1px solid $disabled-bright + border-color: transparent + @include box-shadow(none) width: 100% - min-height: 56px + min-height: 80px height: inherit max-height: 260px overflow: hidden + @media all and (max-width: 640px) + min-height: 68px .hero-img-small background-color: #333 From 408f7b7f10ccb9c284183df959c03982d0d48569 Mon Sep 17 00:00:00 2001 From: summerscope Date: Fri, 19 Sep 2014 16:44:43 +1000 Subject: [PATCH 6/7] Modals styling refine for small use cases --- .../darkswarm/modal-enterprises.css.sass | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/modal-enterprises.css.sass b/app/assets/stylesheets/darkswarm/modal-enterprises.css.sass index 9f08b38790..d89eab21e1 100644 --- a/app/assets/stylesheets/darkswarm/modal-enterprises.css.sass +++ b/app/assets/stylesheets/darkswarm/modal-enterprises.css.sass @@ -25,19 +25,27 @@ position: relative .highlight-top - padding: 0.75rem 0.9375rem - width: 100% - overflow: hidden + padding-top: 0.75rem + padding-bottom: 0.75rem background-color: rgba(255,255,255,0.65) position: absolute bottom: 0 + width: 100% + border: 0 + outline: 0 + @media only screen and (max-width: 640px) + padding-top: 0.5rem + padding-bottom: 0.35rem + h3, p margin-top: 0 margin-bottom: 0 padding-bottom: 0 line-height: 1 p - line-height: 2 + line-height: 2.4 + @media all and (max-width: 640px) + line-height: 1.4 h3 a:hover span border-bottom: 1px solid $clr-brick-bright From 919f87df58d1384480f746d9553db8ae81f8fe29 Mon Sep 17 00:00:00 2001 From: summerscope Date: Fri, 19 Sep 2014 16:46:19 +1000 Subject: [PATCH 7/7] change modal styling to improve look of Close button, overall layout for modals --- .../stylesheets/darkswarm/modals.css.sass | 21 +++++++++++-------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/modals.css.sass b/app/assets/stylesheets/darkswarm/modals.css.sass index c2815549a3..578a3ceccb 100644 --- a/app/assets/stylesheets/darkswarm/modals.css.sass +++ b/app/assets/stylesheets/darkswarm/modals.css.sass @@ -4,10 +4,9 @@ dialog, .reveal-modal border: none outline: none - padding: 1.25rem - padding-bottom: 0 !important - border-bottom: 20px solid white - overflow-y: auto + padding: 30px 20px 0 20px + border-bottom: 30px solid white + overflow-y: scroll overflow-x: hidden // Not working yet - want a nice gradient shadow when there is overflow - needs JS too // &:after @@ -32,14 +31,18 @@ dialog, .reveal-modal max-height: 80% .reveal-modal-bg - background-color: rgba(0,0,0,0.65) + background-color: rgba(0,0,0,0.85) dialog .close-reveal-modal, .reveal-modal .close-reveal-modal - right: 0.4rem - background-color: rgba(235,235,235,0.85) + right: 0.25rem + top: 0.25rem + background-color: rgba(205,205,205,0.65) text-shadow: none - padding: 0.3rem + font-size: 2rem + padding: 0.45rem + color: #666 + z-index: 9999999 @include border-radius(999999rem) &:hover, &:active, &:focus - background-color: rgba(235,235,235,1) + background-color: rgba(205,205,205,1) color: #333