diff --git a/app/assets/javascripts/templates/authentication.html.haml b/app/assets/javascripts/templates/authentication.html.haml index ab388a691e..3f219240e6 100644 --- a/app/assets/javascripts/templates/authentication.html.haml +++ b/app/assets/javascripts/templates/authentication.html.haml @@ -3,4 +3,5 @@ %ng-include{src: "'login.html'"} %ng-include{src: "'signup.html'"} %ng-include{src: "'forgot.html'"} -%a.close-reveal-modal{"ng-click" => "$close()"} × +%a.close-reveal-modal{"ng-click" => "$close()"} + %i.ofn-i_009-close \ No newline at end of file diff --git a/app/assets/stylesheets/darkswarm/active_table_search.css.sass b/app/assets/stylesheets/darkswarm/active_table_search.css.sass index 5b70800bab..e558c41511 100644 --- a/app/assets/stylesheets/darkswarm/active_table_search.css.sass +++ b/app/assets/stylesheets/darkswarm/active_table_search.css.sass @@ -1,6 +1,19 @@ @import mixins #active-table-search - input - font-size: 2em - @include big-input \ No newline at end of file + position: relative + + i.ofn-i_020-search + position: absolute + left: 26px + top: 12px + font-size: 1.6em + z-index: 999 + color: #b2b2b2 + + input[type="text"] + font-size: 2em + @include csstrans + @include big-input + padding-left: 44px + \ No newline at end of file diff --git a/app/assets/stylesheets/darkswarm/checkout.css.sass b/app/assets/stylesheets/darkswarm/checkout.css.sass index 64a7e2bd00..9caf28ae43 100644 --- a/app/assets/stylesheets/darkswarm/checkout.css.sass +++ b/app/assets/stylesheets/darkswarm/checkout.css.sass @@ -20,6 +20,10 @@ checkout padding: 0.65em background: #f7f7f7 + .label + font-size: 1em + padding: 0.3rem 0.35rem 0.275rem + // Logic to turn on & off the alerts for success against each fieldset label, label.alert, label.success, &.valid label.alert, &.dirty label.success diff --git a/app/assets/stylesheets/darkswarm/hub_node.css.sass b/app/assets/stylesheets/darkswarm/hub_node.css.sass index eb30630ad6..d74eb35774 100644 --- a/app/assets/stylesheets/darkswarm/hub_node.css.sass +++ b/app/assets/stylesheets/darkswarm/hub_node.css.sass @@ -35,6 +35,8 @@ //Open row &.open + .fat-taxons + margin-right: 0.5rem .active_table_row:first-child border-top: 1px solid $clr-brick border-left: 1px solid $clr-brick diff --git a/app/assets/stylesheets/darkswarm/images.css.sass b/app/assets/stylesheets/darkswarm/images.css.sass index 927e906842..90207a2239 100644 --- a/app/assets/stylesheets/darkswarm/images.css.sass +++ b/app/assets/stylesheets/darkswarm/images.css.sass @@ -17,6 +17,7 @@ .producer-hero-img background-color: #999 width: 100% + min-height: 160px height: inherit max-height: 260px overflow: hidden diff --git a/app/assets/stylesheets/darkswarm/menu.css.sass b/app/assets/stylesheets/darkswarm/menu.css.sass index 735a19e97b..54807e3977 100644 --- a/app/assets/stylesheets/darkswarm/menu.css.sass +++ b/app/assets/stylesheets/darkswarm/menu.css.sass @@ -1,11 +1,25 @@ @import branding @import mixins -.top-bar + +.fixed .top-bar @include box-shadow(0 2px 3px 0 rgba(0,0,0,0.25)) nav @include textpress + + // Default overrides - big menu + + .top-bar-section .has-dropdown > a + padding-right: 15px !important + + i.ofn-i_022-cog + font-size: 24px + line-height: 45px + + .top-bar-section .has-dropdown > a:after + display: none + .top-bar-section ul li > a font-size: 0.75rem height: 45px @@ -13,16 +27,40 @@ nav opacity: 0.8 &:hover, &:focus, &:active opacity: 1 + .nav-branded color: $clr-brick-light-bright + span + font-size: 13px .nav-primary @include avenir font-size: 0.875rem -nav.top-bar a.icon i - font-size: 22px + +// Mobile Menu + +.off-canvas-wrap.move-right .tab-bar .menu-icon + @include box-shadow(inset 0 0 6px 2px rgba(0,0,0,0.5)) + +.off-canvas-wrap .tab-bar .menu-icon + @include csstrans + @include box-shadow(none) + +.off-canvas-wrap.move-right .tab-bar .menu-icon span + -moz-box-shadow: 0 0px 0 1px #666, 0 7px 0 1px #666, 0 14px 0 1px #666 + -webkit-box-shadow: 0 0px 0 1px #666, 0 7px 0 1px #666, 0 14px 0 1px #666 + box-shadow: 0 0px 0 1px #666, 0 7px 0 1px #666, 0 14px 0 1px #666 + +.off-canvas-wrap.move-right ul.off-canvas-list + font-size: 0.875rem + +.off-canvas-wrap.move-right ul.off-canvas-list i + font-size: 1.5rem + margin-right: 0.25rem + // Responsive + @media screen and (min-width: 1025px) body.off-canvas // padding required to placehold for fixed menu bar diff --git a/app/assets/stylesheets/darkswarm/mixins.sass b/app/assets/stylesheets/darkswarm/mixins.sass index fd26cfcae9..a9894a5b10 100644 --- a/app/assets/stylesheets/darkswarm/mixins.sass +++ b/app/assets/stylesheets/darkswarm/mixins.sass @@ -12,9 +12,14 @@ border: 1px solid #999 font-size: 18px @extend .avenir + box-shadow: 0 padding: 0.75em 1em height: auto margin-bottom: 1em + background: rgba(255,255,255,0.65) + &:active, &:hover, &:focus + background: rgba(255,255,255,1) + border-color: #888 @mixin disabled color: $disabled-bright @@ -49,13 +54,12 @@ // Assign content: "string" @mixin icon-font - font-family: "foundation-icons" + font-family: "OFN" display: inline-block font-weight: normal font-style: normal font-variant: normal text-transform: none - font-size: 80% // Background options \\ diff --git a/app/assets/stylesheets/darkswarm/producers.css.sass b/app/assets/stylesheets/darkswarm/producers.css.sass index 96a42a3a6b..3ad4e7de3a 100644 --- a/app/assets/stylesheets/darkswarm/producers.css.sass +++ b/app/assets/stylesheets/darkswarm/producers.css.sass @@ -4,4 +4,4 @@ .producers @include fullwidthbg background-image: url("/assets/producers/producers-pg-bg.jpg") - background-repeat: no-repeat + background-repeat: no-repeat \ No newline at end of file diff --git a/app/assets/stylesheets/darkswarm/shopping-cart.css.sass b/app/assets/stylesheets/darkswarm/shopping-cart.css.sass index a5314c3ef2..4bbd6a9a01 100644 --- a/app/assets/stylesheets/darkswarm/shopping-cart.css.sass +++ b/app/assets/stylesheets/darkswarm/shopping-cart.css.sass @@ -1,6 +1,11 @@ @import mixins @import branding +#cart-detail + .cart-item-delete + a.delete + font-size: 1.125em + #edit-cart button, .button margin: 0 diff --git a/app/assets/stylesheets/darkswarm/style.css b/app/assets/stylesheets/darkswarm/style.css new file mode 100755 index 0000000000..94980106af --- /dev/null +++ b/app/assets/stylesheets/darkswarm/style.css @@ -0,0 +1,190 @@ +@font-face { + font-family: 'OFN'; + src:url('/OFN.eot?-zgemuq'); + src:url('/OFN.eot?#iefix-zgemuq') format('embedded-opentype'), + url('/OFN.woff?-zgemuq') format('woff'), + url('/OFN.ttf?-zgemuq') format('truetype'), + url('/OFN.svg?-zgemuq#OFN') format('svg'); + font-weight: normal; + font-style: normal; +} + +[class^="ofn-"], [class*=" ofn-"] { + font-family: 'OFN'; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.ofn-i_055-point-left:before { + content: "\e600"; +} +.ofn-i_054-point-right:before { + content: "\e601"; +} +.ofn-i_053-point-up:before { + content: "\e602"; +} +.ofn-i_052-point-down:before { + content: "\e603"; +} +.ofn-i_051-check-big:before { + content: "\e604"; +} +.ofn-i_050-mail-circle:before { + content: "\e605"; +} +.ofn-i_049-web:before { + content: "\e606"; +} +.ofn-i_048-play-video:before { + content: "\e607"; +} +.ofn-i_047-youtube:before { + content: "\e608"; +} +.ofn-i_046-g:before { + content: "\e609"; +} +.ofn-i_045-pintrest:before { + content: "\e60a"; +} +.ofn-i_044-facebook:before { + content: "\e60b"; +} +.ofn-i_043-instagram:before { + content: "\e60c"; +} +.ofn-i_042-linkedin:before { + content: "\e60d"; +} +.ofn-i_041-twitter:before { + content: "\e60e"; +} +.ofn-i_040-hub:before { + content: "\e60f"; +} +.ofn-i_039-delivery:before { + content: "\e610"; +} +.ofn-i_038-takeaway:before { + content: "\e611"; +} +.ofn-i_037-map:before { + content: "\e612"; +} +.ofn-i_036-producers:before { + content: "\e613"; +} +.ofn-i_035-groups:before { + content: "\e614"; +} +.ofn-i_034-timer:before { + content: "\e615"; +} +.ofn-i_033-open-sign:before { + content: "\e616"; +} +.ofn-i_032-closed-sign:before { + content: "\e617"; +} +.ofn-i_031-alarm-clock:before { + content: "\e618"; +} +.ofn-i_030-money:before { + content: "\e619"; +} +.ofn-i_029-shopping-basket:before { + content: "\e61a"; +} +.ofn-i_028-barcode:before { + content: "\e61b"; +} +.ofn-i_027-shopping-cart:before { + content: "\e61c"; +} +.ofn-i_026-trash:before { + content: "\e61d"; +} +.ofn-i_025-notepad:before { + content: "\e61e"; +} +.ofn-i_024-mail:before { + content: "\e61f"; +} +.ofn-i_023-refresh:before { + content: "\e620"; +} +.ofn-i_022-cog:before { + content: "\e621"; +} +.ofn-i_021-tools:before { + content: "\e622"; +} +.ofn-i_020-search:before { + content: "\e623"; +} +.ofn-i_019-map-pin:before { + content: "\e624"; +} +.ofn-i_018-unlocked:before { + content: "\e625"; +} +.ofn-i_017-locked:before { + content: "\e626"; +} +.ofn-i_016-group:before { + content: "\e627"; +} +.ofn-i_015-user:before { + content: "\e628"; +} +.ofn-i_014-menu:before { + content: "\e629"; +} +.ofn-i_013-help:before { + content: "\e62a"; +} +.ofn-i_012-warning:before { + content: "\e62b"; +} +.ofn-i_011-spinner:before { + content: "\e62c"; +} +.ofn-i_010-bullet:before { + content: "\e62d"; +} +.ofn-i_009-close:before { + content: "\e62e"; +} +.ofn-i_008-caret-left:before { + content: "\e62f"; +} +.ofn-i_007-caret-right:before { + content: "\e630"; +} +.ofn-i_006-caret-up:before { + content: "\e631"; +} +.ofn-i_005-caret-down:before { + content: "\e632"; +} +.ofn-i_004-x:before { + content: "\e633"; +} +.ofn-i_003-check:before { + content: "\e634"; +} +.ofn-i_002-arrow-right:before { + content: "\e635"; +} +.ofn-i_001-arrow-left:before { + content: "\e636"; +} diff --git a/app/assets/stylesheets/darkswarm/tabs.css.sass b/app/assets/stylesheets/darkswarm/tabs.css.sass index 303e8515ff..4bfd2935f4 100644 --- a/app/assets/stylesheets/darkswarm/tabs.css.sass +++ b/app/assets/stylesheets/darkswarm/tabs.css.sass @@ -33,9 +33,12 @@ border-top: 4px solid transparent a:after padding-left: 8px - content: "\f109" + content: "\e632" visibility: hidden @include icon-font + dd:hover + a:after + visibility: visible // active nav link @@ -45,7 +48,7 @@ a color: $clr-brick-bright a:after - content: "\f10c" + content: "\e631" visibility: visible @include icon-font diff --git a/app/assets/stylesheets/darkswarm/typography.css.sass b/app/assets/stylesheets/darkswarm/typography.css.sass index 69d16aef9e..cedd6a1130 100644 --- a/app/assets/stylesheets/darkswarm/typography.css.sass +++ b/app/assets/stylesheets/darkswarm/typography.css.sass @@ -37,18 +37,20 @@ h1, h2, h3, h4, h5, h6, .avenir padding: 0px ul.ofn-list - margin-left: 0.5em + margin: 0 li list-style: none + line-height: 1.5 + height: inherit li:before - content: "\f112" - font-family: "foundation-icons" + content: "\e62d" + font-family: "OFN" display: inline-block font-weight: normal font-style: normal font-variant: normal text-transform: none - font-size: 80% + .light-grey color: #666666 @@ -70,7 +72,6 @@ table tr th, table tr td table thead tr th, table thead tr td, table tfoot tr th, table tfoot tr td color: #333333 - span.email direction: rtl unicode-bidi: bidi-override diff --git a/app/views/checkout/_billing.html.haml b/app/views/checkout/_billing.html.haml index f8129d32c9..27fc2b202f 100644 --- a/app/views/checkout/_billing.html.haml +++ b/app/views/checkout/_billing.html.haml @@ -3,10 +3,10 @@ %h5{"ng-class" => "{valid: billing.$valid, dirty: billing.$dirty}"} %span.right - %label.label.round.alert - %i.fi-x - %label.label.round.success - %i.fi-check + %label.label.round.alert.right + %i.ofn-i_009-close + %label.label.round.success.right + %i.ofn-i_051-check-big Billing info %accordion-group{"is-open" => "accordion.billing", @@ -19,9 +19,9 @@ {{ summary() | printArray }} .small-1.columns.right %span.accordion-up.right - %i.fi-arrow-up + %i.ofn-i_006-caret-up %span.accordion-down.right - %i.fi-arrow-down + %i.ofn-i_005-caret-down = f.fields_for :bill_address, @order.bill_address do |ba| .row diff --git a/app/views/checkout/_details.html.haml b/app/views/checkout/_details.html.haml index 76c5c32398..5be6b84043 100644 --- a/app/views/checkout/_details.html.haml +++ b/app/views/checkout/_details.html.haml @@ -3,10 +3,10 @@ %h5{"ng-class" => "{valid: details.$valid, dirty: details.$dirty}"} %span.right - %label.label.round.alert - %i.fi-x - %label.label.round.success - %i.fi-check + %label.label.round.alert.right + %i.ofn-i_009-close + %label.label.round.success.right + %i.ofn-i_051-check-big Your details %accordion-group{"is-open" => "accordion.details", @@ -19,9 +19,9 @@ {{ summary() | printArray }} .small-1.columns.right %span.accordion-up.right - %i.fi-arrow-up + %i.ofn-i_006-caret-up %span.accordion-down.right - %i.fi-arrow-down + %i.ofn-i_005-caret-down .row .small-6.columns diff --git a/app/views/checkout/_payment.html.haml b/app/views/checkout/_payment.html.haml index e972ebfcf1..045882ade3 100644 --- a/app/views/checkout/_payment.html.haml +++ b/app/views/checkout/_payment.html.haml @@ -3,10 +3,10 @@ %h5{"ng-class" => "{valid: payment.$valid, dirty: payment.$dirty}"} %span.right - %label.label.round.alert - %i.fi-x - %label.label.round.success - %i.fi-check + %label.label.round.alert.right + %i.ofn-i_009-close + %label.label.round.success.right + %i.ofn-i_051-check-big Payment %accordion-group{"is-open" => "accordion.payment", @@ -19,9 +19,9 @@ {{ Order.paymentMethod().name }} .small-1.columns.right %span.accordion-up.right - %i.fi-arrow-up + %i.ofn-i_006-caret-up %span.accordion-down.right - %i.fi-arrow-down + %i.ofn-i_005-caret-down - current_order.available_payment_methods.each do |method| .row diff --git a/app/views/checkout/_shipping.html.haml b/app/views/checkout/_shipping.html.haml index 67172ce392..8c88acf02a 100644 --- a/app/views/checkout/_shipping.html.haml +++ b/app/views/checkout/_shipping.html.haml @@ -3,10 +3,10 @@ %h5{"ng-class" => "{valid: shipping.$valid, dirty: shipping.$dirty}"} %span.right - %label.label.round.alert - %i.fi-x - %label.label.round.success - %i.fi-check + %label.label.round.alert.right + %i.ofn-i_009-close + %label.label.round.success.right + %i.ofn-i_051-check-big Shipping info %accordion-group{"is-open" => "accordion.shipping", @@ -19,9 +19,9 @@ {{ Order.shippingMethod().name }} .small-1.columns.right %span.accordion-up.right - %i.fi-arrow-up + %i.ofn-i_006-caret-up %span.accordion-down.right - %i.fi-arrow-down + %i.ofn-i_005-caret-down - for ship_method, i in current_distributor.shipping_methods.uniq .row diff --git a/app/views/checkout/_summary.html.haml b/app/views/checkout/_summary.html.haml index 06edeac8b5..c943964a9f 100644 --- a/app/views/checkout/_summary.html.haml +++ b/app/views/checkout/_summary.html.haml @@ -25,6 +25,6 @@ //= f.submit "Purchase", class: "button", "ng-disabled" => "checkout.$invalid", "ofn-focus" => "accordion['payment']" %a.button.secondary{href: cart_url} - %i.fi-arrow-left + %i.ofn-i_008-caret-left Back to Cart diff --git a/app/views/groups/index.html.haml b/app/views/groups/index.html.haml index c1fd5ccf8e..56dfeacaad 100644 --- a/app/views/groups/index.html.haml +++ b/app/views/groups/index.html.haml @@ -25,7 +25,9 @@ .group-hero %img.group-hero-img{"bo-src" => "group.promo_image"} %img.group-logo{"bo-src" => "group.logo", "bo-if" => "group.logo"} - %h3.group-name {{ group.name }} + %h3.group-name + %i.ofn-i_035-groups + {{ group.name }} %h5.group-description {{ group.description }} .row.pad-top{bindonce: true} diff --git a/app/views/home/_fat.html.haml b/app/views/home/_fat.html.haml index 9382844265..30a9dd719a 100644 --- a/app/views/home/_fat.html.haml +++ b/app/views/home/_fat.html.haml @@ -1,17 +1,27 @@ .row.active_table_row{"ng-show" => "open()"} .columns.small-4 - %strong Shop for + %h5 + %i.ofn-i_029-shopping-basket + Shop for %p.trans-sentence - %img{"ng-repeat" => "taxon in hub.taxons", "bo-src" => "taxon.icon", - name: "{{taxon.name}}", alt: "{{taxon.name}}"} + %span.fat-taxons{"ng-repeat" => "taxon in hub.taxons"} + %img{"bo-src" => "taxon.icon", + name: "{{taxon.name}}", alt: "{{taxon.name}}"} + {{taxon.name}} .columns.small-4 - %strong Delivery options + %h5 Delivery options %ol - %li.pickup{"bo-if" => "hub.pickup"} Pickup - %li.delivery{"bo-if" => "hub.delivery"} Delivery + %li.pickup{"bo-if" => "hub.pickup"} + %i.ofn-i_038-takeaway + Pickup + %li.delivery{"bo-if" => "hub.delivery"} + %i.ofn-i_039-delivery + Delivery .columns.small-4 - %strong Our producers - %ul + %h5 + %i.ofn-i_036-producers + Our producers + %ul.ofn-list %li{"ng-repeat" => "producer in hub.producers"} = render partial: "modals/producer" @@ -22,4 +32,4 @@ .columns.small-1.text-right %a{"bo-href" => "hub.path"} - %i.fi-arrow-right + %i.ofn-i_007-caret-right diff --git a/app/views/home/_groups.html.haml b/app/views/home/_groups.html.haml index dd55a9bcd1..5d76dd1e2d 100644 --- a/app/views/home/_groups.html.haml +++ b/app/views/home/_groups.html.haml @@ -6,5 +6,5 @@ %h5 See all the groups & regions on the Open Food Network %p %a.neutral-btn.light{href: "/groups"} - %i.fi-torsos-all + %i.ofn-i_035-groups View groups & regions \ No newline at end of file diff --git a/app/views/home/_hubs.html.haml b/app/views/home/_hubs.html.haml index cc893f5997..7d28d28508 100644 --- a/app/views/home/_hubs.html.haml +++ b/app/views/home/_hubs.html.haml @@ -10,10 +10,10 @@ %ofn-modal{title: "food hub"} = render partial: "modals/food_hub" from the list below: - %p - #active-table-search.row + #active-table-search.row.pad-top .small-12.columns + %i.ofn-i_020-search %input{type: :text, "ng-model" => "query", placeholder: "Search postcode, suburb or hub name...", diff --git a/app/views/home/_map.html.haml b/app/views/home/_map.html.haml index 29224493e2..8d83e58c40 100644 --- a/app/views/home/_map.html.haml +++ b/app/views/home/_map.html.haml @@ -6,5 +6,5 @@ %h5 of all our food hubs and producers %p %button.neutral-btn.light - %i.fi-map + %i.ofn-i_037-map View map \ No newline at end of file diff --git a/app/views/home/_producers.html.haml b/app/views/home/_producers.html.haml index 31a573d610..3d4fcfbd68 100644 --- a/app/views/home/_producers.html.haml +++ b/app/views/home/_producers.html.haml @@ -6,5 +6,5 @@ %h5 Looking for a specific producer or farmer? %p %a.neutral-btn.turquoise{href: "/producers"} - %i.fi-trees + %i.ofn-i_036-producers View all producers \ No newline at end of file diff --git a/app/views/home/_skinny.html.haml b/app/views/home/_skinny.html.haml index fcf860575e..768d16f2b6 100644 --- a/app/views/home/_skinny.html.haml +++ b/app/views/home/_skinny.html.haml @@ -1,13 +1,18 @@ .row.active_table_row{"ng-click" => "toggle()", "ng-class" => "{'closed' : !open()}"} .columns.small-4 + %i.ofn-i_040-hub %strong {{ hub.name }} .columns.small-3 {{ hub.address.city }} .columns.small-1 {{ hub.address.state | uppercase }} + .columns.small-3{"bo-if" => "hub.active"} {{ hub.orders_close_at | sensible_timeframe }} + .columns.small-3{"bo-if" => "!hub.active"} + %i.ofn-i_032-closed-sign Orders closed + .columns.small-1.text-right - %i{"ng-class" => "{'fi-arrow-down' : !open(), 'fi-arrow-up' : open()}"} + %i{"ng-class" => "{'ofn-i_005-caret-down' : !open(), 'ofn-i_006-caret-up' : open()}"} diff --git a/app/views/layouts/_become_distributor.html.haml b/app/views/layouts/_become_distributor.html.haml index 79d3b4a0db..6d67ee9306 100644 --- a/app/views/layouts/_become_distributor.html.haml +++ b/app/views/layouts/_become_distributor.html.haml @@ -14,4 +14,4 @@ = text_area_tag :email_body, "", :input_html => { :rows => 10 } = submit_tag "Submit", class: "button" - = link_to "×".html_safe, "#", class: "close-reveal-modal" + = link_to "×".html_safe, "#", class: "close-reveal-modal" \ No newline at end of file diff --git a/app/views/modals/_food_hub.html.haml b/app/views/modals/_food_hub.html.haml index d8bd061446..ba0864b284 100644 --- a/app/views/modals/_food_hub.html.haml +++ b/app/views/modals/_food_hub.html.haml @@ -1,5 +1,8 @@ -%h2 Food Hubs +%h2 + %i.ofn-i_040-hub> + Food Hubs %h5 Our food hubs are the point of contact between you and the people who make your food! %p You can search for a convenient hub by location or name. Some hubs have multiple points where you can pick-up your purchases, and some will also provide delivery options. Each food hub is a sales point with independent business operations and logistics - so variations between hubs are to be expected. %p You can only shop at one food hub at a time. -%a.close-reveal-modal{"ng-click" => "$close()"} × +%a.close-reveal-modal{"ng-click" => "$close()"} + %i.ofn-i_009-close diff --git a/app/views/modals/_groups.html.haml b/app/views/modals/_groups.html.haml index 80e210c98a..43be03bcc9 100644 --- a/app/views/modals/_groups.html.haml +++ b/app/views/modals/_groups.html.haml @@ -1,4 +1,7 @@ -%h2 Groups / Regions +%h2 + %i.ofn-i_035-groups + Groups / Regions %p These are the organisations and relationships between hubs which make up the Open Food Network. %p Some groups are clustered by location or council, others by non-geographic similarities. -%a.close-reveal-modal{"ng-click" => "cancel()"} × \ No newline at end of file +%a.close-reveal-modal{"ng-click" => "$close()"} + %i.ofn-i_009-close \ No newline at end of file diff --git a/app/views/modals/_learn_more.html.haml b/app/views/modals/_learn_more.html.haml index 4cb0534c6e..58a1bf260d 100644 --- a/app/views/modals/_learn_more.html.haml +++ b/app/views/modals/_learn_more.html.haml @@ -6,4 +6,5 @@ %h5 Learn more %p If you want to learn more about the Open Food Network, how it works, and get involved, check out: %a.button.neutral-btn.dark{:href => "http://www.openfoodnetwork.org" , :target => "_blank" } Open Food Network -%a.close-reveal-modal{"ng-click" => "$close()"} × +%a.close-reveal-modal{"ng-click" => "$close()"} + %i.ofn-i_009-close diff --git a/app/views/modals/_producer.html.haml b/app/views/modals/_producer.html.haml index 13f8026195..e9808b09d7 100644 --- a/app/views/modals/_producer.html.haml +++ b/app/views/modals/_producer.html.haml @@ -1,39 +1,49 @@ %ofn-modal{title: "{{producer.name}}"} .row - .columns.small-12.producer-hero + .small-12.columns.producer-hero + %h3.producer-name + %i.ofn-i_036-producers + {{ producer.name }} %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{"ng-bind-html" => "producer.long_description"} - .columns.small-12.large-6 + .small-12.large-6.columns + %p{"ng-bind-html" => "producer.long_description"} + .small-12.large-6.columns %img.producer-logo{"ng-src" => "{{producer.logo}}", "ng-if" => "producer.logo"} - %h4 Stay in touch with {{ producer.name }} + %h5 Stay in touch with {{ producer.name }} + %ul.small-block-grid-1{bindonce: true} + %li{"ng-if" => "producer.website"} %a{"ng-href" => "http://{{producer.website | stripUrl}}", target: "_blank" } - %i.fi-web + %i.ofn-i_049-web {{ producer.website | stripUrl }} - + + %li{"ng-if" => "producer.email"} + %a{"ng-href" => "mailto:{{producer.email | stripUrl}}", target: "_blank" } + %i.ofn-i_050-mail-circle + {{ producer.email | stripUrl }} + %li{"ng-if" => "producer.twitter"} %a{"ng-href" => "http://twitter.com/{{producer.twitter}}", target: "_blank"} - %i.fi-social-twitter + %i.ofn-i_041-twitter {{ producer.twitter }} - + %li{"ng-if" => "producer.facebook"} %a{"ng-href" => "http://{{producer.facebook | stripUrl}}", target: "_blank"} - %i.fi-social-facebook + %i.ofn-i_044-facebook {{ producer.facebook | stripUrl }} - + %li{"ng-if" => "producer.linkedin"} %a{"ng-href" => "http://{{producer.linkedin | stripUrl}}", target: "_blank"} - %i.fi-social-linkedin + %i.ofn-i_042-linkedin {{ producer.linkedin | stripUrl }} - + %li{"ng-if" => "producer.instagram"} %a{"ng-href" => "http://instagram.com/{{producer.instagram}}", target: "_blank"} - %i.fi-social-instagram + %i.ofn-i_043-instagram {{ producer.instagram }} - - - %a.close-reveal-modal{"ng-click" => "$close()"} × + + %a.close-reveal-modal{"ng-click" => "$close()"} + %i.ofn-i_009-close diff --git a/app/views/modals/_producers.html.haml b/app/views/modals/_producers.html.haml index 153e4dcae3..069ec9e3b6 100644 --- a/app/views/modals/_producers.html.haml +++ b/app/views/modals/_producers.html.haml @@ -1,4 +1,6 @@ -%h2 Producers -%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 +%h2 + %i.ofn-i_036-producers + Producers +%p Our producers make all the delicious food you can shop for on the Open Food Network. +%a.close-reveal-modal{"ng-click" => "$close()"} + %i.ofn-i_009-close \ No newline at end of file diff --git a/app/views/modals/_product.html.haml b/app/views/modals/_product.html.haml index 9c071b51eb..b2281d64ca 100644 --- a/app/views/modals/_product.html.haml +++ b/app/views/modals/_product.html.haml @@ -7,4 +7,5 @@ %img{"ng-src" => "{{product.primary_taxon.icon}}"} {{product.name}} %p {{product.description}} - %a.close-reveal-modal{"ng-click" => "$close()"} × + %a.close-reveal-modal{"ng-click" => "$close()"} + %i.ofn-i_009-close diff --git a/app/views/producers/_fat.html.haml b/app/views/producers/_fat.html.haml index 3313db6552..128795a9ba 100644 --- a/app/views/producers/_fat.html.haml +++ b/app/views/producers/_fat.html.haml @@ -15,4 +15,4 @@ .columns.small-1.text-right %a{"bo-href" => "hub.path"} - %i.fi-arrow-right + %i.ofn-i_007-caret-right diff --git a/app/views/producers/_skinny.html.haml b/app/views/producers/_skinny.html.haml index c87c2295ed..a5608b8b3d 100644 --- a/app/views/producers/_skinny.html.haml +++ b/app/views/producers/_skinny.html.haml @@ -1,9 +1,10 @@ .row.active_table_row{"ng-click" => "toggle()", "ng-class" => "{'closed' : !open()}"} .columns.small-4 + %i.ofn-i_036-producers %strong {{ producer.name }} .columns.small-3 {{ producer.address.city }} .columns.small-4 {{ producer.address.state | uppercase }} .columns.small-1.text-right - %i{"ng-class" => "{'fi-arrow-down' : !open(), 'fi-arrow-up' : open()}"} + %i{"ng-class" => "{'ofn-i_005-caret-down' : !open(), 'ofn-i_006-caret-up' : open()}"} \ No newline at end of file diff --git a/app/views/producers/index.haml b/app/views/producers/index.haml index 41ef76680b..a5b1601ce3 100644 --- a/app/views/producers/index.haml +++ b/app/views/producers/index.haml @@ -4,17 +4,18 @@ -#%pre -#{{ Producers.producers | json }} - #active-table-search.row - .small-12.columns.text-center - %p + .row + .small-12.columns.text-center.pad-top %h1 Producers %div Select a %ofn-modal{title: "producer"} = render partial: "modals/producers" from the list below: - %p + #active-table-search.row.pad-top + .small-12.columns + %i.ofn-i_020-search %input{type: :text, "ng-model" => "query", placeholder: "Search postcode, suburb or hub name...", diff --git a/app/views/shared/_footer.html.haml b/app/views/shared/_footer.html.haml index bb33312652..713c95c769 100644 --- a/app/views/shared/_footer.html.haml +++ b/app/views/shared/_footer.html.haml @@ -9,25 +9,27 @@ %h4 Follow us %p %a{title:'Follow us on Facebook', href: 'https://www.facebook.com/OpenFoodNet', target: '_blank'} - %i.fi-social-facebook + %i.ofn-i_044-facebook Facebook    %a{title:'Follow us on Twitter', href: 'https://twitter.com/OpenFoodNet', target: '_blank'} - %i.fi-social-twitter + %i.ofn-i_041-twitter Twitter    %a{title:'Join our group on LinkedIn', href: 'http://www.linkedin.com/groups/Open-Food-Foundation-4743336', target: '_blank'} - %i.fi-social-linkedin + %i.ofn-i_042-linkedin LinkedIn .small-12.medium-4.columns.text-left %h4 Getting around %ul.ofn-list %li - %a{href: ""} Shop + %a{href: "/shop"} + %i.ofn-i_044-facebook + Shop %li - %a{href: ""} Map + %a{href: "/map"} Map %li - %a{href: ""} Producers + %a{href: "/producers"} Producers %li - %a{href: ""} Groups + %a{href: "/groups"} Groups .small-12.medium-4.columns.text-left %h4 About us %p OFN is a network of independent online food stores that connect farmers and food hubs with individuals and local businesses. It gives farmers and food hubs an easier and fairer way to distribute their food. diff --git a/app/views/shared/_signed_in.html.haml b/app/views/shared/_signed_in.html.haml index 1ac376879b..967986f4f1 100644 --- a/app/views/shared/_signed_in.html.haml +++ b/app/views/shared/_signed_in.html.haml @@ -1,6 +1,27 @@ -%li#login-name - %a{"ng-click" => "toggle('/account')"} - = spree_current_user.email -%li.divider - %li#sign-out-link - = link_to "Sign Out", "/logout" \ No newline at end of file +/ %li#login-name +/ %a{"ng-click" => "toggle('/account')"} +/ = spree_current_user.email +/ %li#sign-out-link +/ %a{title: 'Log Out', href:'/logout' } +/ %i.ofn-i_018-unlocked +/ LOG OUT +/ = link_to "Sign Out", "/logout" +/ %li.divider +%li.has-dropdown.not-click + %a{href: "#"} + %i.ofn-i_022-cog + %ul.dropdown + %li + %a{href: spree.account_path} + %i.ofn-i_015-user + = spree_current_user.email + %li + %a{title: 'Log Out', href:'/logout' } + %i.ofn-i_018-unlocked + LOG OUT + + - if admin_user? or enterprise_user? + %li + %a{href: spree.admin_path} + %i.ofn-i_021-tools + Admin \ No newline at end of file diff --git a/app/views/shared/_signed_in_offcanvas.html.haml b/app/views/shared/_signed_in_offcanvas.html.haml new file mode 100644 index 0000000000..e500646e62 --- /dev/null +++ b/app/views/shared/_signed_in_offcanvas.html.haml @@ -0,0 +1,14 @@ +%li + %a{href: spree.account_path} + %i.ofn-i_015-user + = spree_current_user.email +%li + %a{title: 'Log Out', href:'/logout' } + %i.ofn-i_018-unlocked + LOG OUT + +- if admin_user? or enterprise_user? + %li + %a{href: spree.admin_path} + %i.ofn-i_021-tools + Admin \ No newline at end of file diff --git a/app/views/shared/_signed_out.html.haml b/app/views/shared/_signed_out.html.haml index f7442b13ff..a004344038 100644 --- a/app/views/shared/_signed_out.html.haml +++ b/app/views/shared/_signed_out.html.haml @@ -1,5 +1,5 @@ %li#login-link{"ng-controller" => "AuthenticationCtrl"} %a{"ng-click" => "open()"} - %i.fi-lock - LOG IN + %i.ofn-i_017-locked + %span LOG IN diff --git a/app/views/shared/menu/_cart.html.haml b/app/views/shared/menu/_cart.html.haml index d2854affb5..a7320554c6 100644 --- a/app/views/shared/menu/_cart.html.haml +++ b/app/views/shared/menu/_cart.html.haml @@ -1,5 +1,6 @@ %a.icon{href: cart_url, "ng-controller" => "CartCtrl"} - %i.fi-shopping-cart.nav-branded + %span.nav-branded + %i.ofn-i_027-shopping-cart %span {{ CurrentOrder.cart_count }} items diff --git a/app/views/shared/menu/_large_menu.html.haml b/app/views/shared/menu/_large_menu.html.haml index 0d24d9f1ba..c2891c46d9 100644 --- a/app/views/shared/menu/_large_menu.html.haml +++ b/app/views/shared/menu/_large_menu.html.haml @@ -1,7 +1,7 @@ -%nav.top-bar.show-for-large-up{'data' => 'topbar'} +%nav.top-bar.show-for-large-up{'data-topbar' => true} %section.top-bar-section %ul.left{} - %li= link_to image_tag("ofn_logo_small.png"), root_path + %li.ofn-logo= link_to image_tag("ofn_logo_small.png"), root_path %li.divider - if current_page? root_path %li @@ -27,7 +27,9 @@ - if admin_user? or enterprise_user? %li %a{href: spree.admin_path} - %span.nav-primary Admin + %span.nav-primary + %i.ofn-i_021-tools + Admin %li.divider %section.top-bar-section %ul.right diff --git a/app/views/shared/menu/_mobile_menu.html.haml b/app/views/shared/menu/_mobile_menu.html.haml index b01671e6c4..e038c19eaf 100644 --- a/app/views/shared/menu/_mobile_menu.html.haml +++ b/app/views/shared/menu/_mobile_menu.html.haml @@ -1,7 +1,7 @@ %nav.tab-bar.show-for-medium-down %section.left %a.left-off-canvas-toggle.menu-icon - %span + %span %section.right = render partial: "shared/menu/cart" %a{href: main_app.shop_path} @@ -14,32 +14,41 @@ - if admin_user? or enterprise_user? %li %a{href: spree.admin_path} - %span.nav-primary Admin + %span.nav-primary + %i.ofn-i_021-tools + Admin %li - if spree_current_user.nil? = render 'shared/signed_out' - else - = render 'shared/signed_in' - - %li - %a{href: main_app.producers_path} Producers + = render 'shared/signed_in_offcanvas' - if current_page? root_path %li %a{"ofn-scroll-to" => "hubs"} - %span.nav-primary Hubs + %span.nav-primary + %i.ofn-i_040-hub + Hubs - else %li %a{href: root_path + "#/#hubs"} - %span.nav-primary Hubs + %span.nav-primary + %i.ofn-i_040-hub + Hubs %li %a{href: ""} - %span.nav-primary Map + %span.nav-primary + %i.ofn-i_037-map + Map %li %a{href: main_app.producers_path} - %span.nav-primary Producers + %span.nav-primary + %i.ofn-i_036-producers + Producers %li %a{href: main_app.groups_path} - %span.nav-primary Groups + %span.nav-primary + %i.ofn-i_035-groups + Groups diff --git a/app/views/shop/products/_summary.html.haml b/app/views/shop/products/_summary.html.haml index 22ce416336..ca9557d42a 100644 --- a/app/views/shop/products/_summary.html.haml +++ b/app/views/shop/products/_summary.html.haml @@ -8,7 +8,8 @@ name: "{{product.primary_taxon.name}}"} = render partial: "modals/product" - .small-5.columns.summary-header + .small-5.columns + %i.ofn-i_036-producers = render partial: "modals/producer" .small-2.columns.summary-price.text-right.price diff --git a/app/views/shopping_shared/_contact.html.haml b/app/views/shopping_shared/_contact.html.haml index 7bf85ea432..249f0092c8 100644 --- a/app/views/shopping_shared/_contact.html.haml +++ b/app/views/shopping_shared/_contact.html.haml @@ -7,7 +7,7 @@ %h4=current_distributor.name %p = current_distributor.address.address1 - - if current_distributor.address.address2 + - unless current_distributor.address.address2.blank? %br = current_distributor.address.address2 %br @@ -20,36 +20,36 @@ - unless current_distributor.website.blank? %li %a{href: "http://#{current_distributor.website}", target: "_blank" } - %i.fi-web + %i.ofn-i_049-web = current_distributor.website - unless current_distributor.email.blank? %li %a{href: current_distributor.email.reverse, mailto: true } - %i.fi-mail + %i.ofn-i_050-mail-circle %span.email = current_distributor.email.reverse - unless current_distributor.twitter.blank? %li %a{href: "http://twitter.com/#{current_distributor.twitter}", target: "_blank" } - %i.fi-social-twitter + %i.ofn-i_041-twitter = current_distributor.twitter - unless current_distributor.facebook.blank? %li %a{href: "http://#{current_distributor.facebook}", target: "_blank" } - %i.fi-social-facebook + %i.ofn-i_044-facebook = current_distributor.facebook - unless current_distributor.linkedin.blank? %li %a{href: "http://#{current_distributor.linkedin}", target: "_blank" } - %i.fi-social-linkedin + %i.ofn-i_042-linkedin = current_distributor.linkedin - unless current_distributor.instagram.blank? %li %a{href: "http://instagram.com.#{current_distributor.instagram}", target: "_blank" } - %i.fi-social-instagram + %i.ofn-i_043-instagram = current_distributor.instagram diff --git a/app/views/spree/orders/_form.html.haml b/app/views/spree/orders/_form.html.haml index bec495a458..214823d4cf 100644 --- a/app/views/spree/orders/_form.html.haml +++ b/app/views/spree/orders/_form.html.haml @@ -31,8 +31,8 @@ %span.order-total.distribution-total= order_distribution_subtotal(@order) %td %td - = button_tag :class => 'neutral-btn dark expand small', :id => 'update-button' do - %i.fi-refresh + = button_tag :class => 'secondary radius expand small', :id => 'update-button' do + %i.ofn-i_023-refresh = t(:update) %td %h5.order-total.grand-total= @order.display_total diff --git a/app/views/spree/orders/_line_item.html.haml b/app/views/spree/orders/_line_item.html.haml index 6986caf100..42649c8bee 100644 --- a/app/views/spree/orders/_line_item.html.haml +++ b/app/views/spree/orders/_line_item.html.haml @@ -23,5 +23,5 @@ %td.cart-item-delete.text-center{"data-hook" => "cart_item_delete"} {{ quantity }} - = link_to image_tag('icons/delete.png'), '#', :class => 'delete', - :id => "delete_#{dom_id(line_item)}" + %a.delete{href: "#", id: "delete_#{dom_id(line_item)}"} + %i.delete.ofn-i_026-trash diff --git a/app/views/spree/orders/edit.html.haml b/app/views/spree/orders/edit.html.haml index f0c6b95a78..76b22aeb36 100644 --- a/app/views/spree/orders/edit.html.haml +++ b/app/views/spree/orders/edit.html.haml @@ -30,12 +30,12 @@ .columns.large-8{"data-hook" => ""} %a.button.large.secondary{href: main_app.shop_path} - %i.fi-arrow-left + %i.ofn-i_008-caret-left Continue shopping .columns.large-4.text-right %a#checkout-link.button.large.primary{href: main_app.checkout_path} Checkout - %i.fi-arrow-right + %i.ofn-i_007-caret-right = render partial: "shared/footer" diff --git a/public/OFN.eot b/public/OFN.eot new file mode 100755 index 0000000000..d748b3b44b Binary files /dev/null and b/public/OFN.eot differ diff --git a/public/OFN.svg b/public/OFN.svg new file mode 100755 index 0000000000..8190e20cbf --- /dev/null +++ b/public/OFN.svg @@ -0,0 +1,65 @@ + + + +Generated by IcoMoon + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/OFN.ttf b/public/OFN.ttf new file mode 100755 index 0000000000..a40786bc41 Binary files /dev/null and b/public/OFN.ttf differ diff --git a/public/OFN.woff b/public/OFN.woff new file mode 100755 index 0000000000..1b1d24bd45 Binary files /dev/null and b/public/OFN.woff differ diff --git a/spec/features/consumer/shopping/shopping_spec.rb b/spec/features/consumer/shopping/shopping_spec.rb index ecc988f7ea..78937ecb47 100644 --- a/spec/features/consumer/shopping/shopping_spec.rb +++ b/spec/features/consumer/shopping/shopping_spec.rb @@ -20,6 +20,11 @@ feature "As a consumer I want to shop with a distributor", js: true do end it "shows a distributor with images" do + # Given the distributor has a logo + distributor.logo = File.new(Rails.root + 'app/assets/images/logo.jpg') + distributor.save! + + # Then we should see the distributor and its logo visit shop_path page.should have_text distributor.name find("#tab_about a").click