ui2 progress

include/views/default/seven/frontend/help.phtml

@@ -1,4 +1,4 @@
-
+<div class="top-pad"></div>
 <div class="faq-bubble-wrap">
 	<div class="bubble-tailless-green">
 		<div class="text">

include/views/default/seven/frontend/location.phtml

@@ -1,5 +1,5 @@
 <div class="home-top">
-
+	<div class="top-pad"></div>
 	<div class="pushabutton"></div>
 	<div class="home-inputs">
 		<table cellpadding="0" cellspacing="0" class="home-location">

include/views/default/seven/layout/html.body.phtml

@@ -183,4 +183,3 @@
 <div ng-include="'assets/view/connection.error.html'"></div>
 
 <div id="fb-root"></div>
-

include/views/default/seven/layout/html.phtml

@@ -5,6 +5,7 @@
 <script src="//js.balancedpayments.com/v1/balanced.js"></script>
 <script src="/assets/js/jquery.autosize-min.js?v=<?=Cana_Util::gitVersion()?>"></script>
 <script src="/assets/js/jquery.dropdown-min.js?v=<?=Cana_Util::gitVersion()?>"></script>
+<script src="/assets/js/jquery.scrollspy.js?v=<?=Cana_Util::gitVersion()?>"></script>
 
 <? if (c::config()->bundle) : ?>
 	<script src="/assets/js/bundle.js?v=<?=Cana_Util::gitVersion()?>&s=app"></script>
@@ -12,4 +13,23 @@
 	<?=$this->display('bundle/js', ['set' => ['scripts' => ['app']]])?>
 <? endif ; ?>
 
-<?=$this->display('layout/html.bottom')?>
+<?=$this->display('layout/html.bottom')?>
+
+
+
+<script>
+	$(document).ready(function() {
+		$('.home-top').scrollspy({
+                min: -100,
+                max: 50,
+                onEnter: function(element, position) {
+                	console.log('ENTER');
+                    $('.page-location .nav-top').addClass('at-top');
+                },
+                onLeave: function(element, position) {
+                	console.log('LEAVE');
+                    $('.page-location .nav-top').removeClass('at-top');
+                }
+            });
+	});
+</script>

www/assets/css/seven.css

@@ -114,14 +114,13 @@ html {
 
 
 .menu {
-	background: url(/assets/images/micro/menu.svg) no-repeat;
+	background: url(/assets/images/micro/menu.svg) center center no-repeat;
-	background-position: center center;
+	background-size: 100%;
 	width: 44px;
 	height: 28px;
-	background-size: 100%;
 	float: left;
 	margin: 8px 0 0 25px;
-	-webkit-transition: all 0.2s;
+	-webkit-transition: opacity 0.2s;
 	cursor: pointer;
 }
 
@@ -374,6 +373,9 @@ p {
 	.menu.side {
 		display: none;
 	}
+	.top-pad {
+		height: 90px;
+	}
 }
 @media(max-width:499px) {
 	.logo {
@@ -389,6 +391,9 @@ p {
 	.menu.side {
 		display: block;
 	}
+	.top-pad {
+		height: 65px;
+	}
 }
 .divider {
 	clear: both;
@@ -603,4 +608,25 @@ p {
 .nav-top {
 	background: #f78155;
 	padding-top: 15px;
+}
+
+.nav-cart {
+	display:none;
+}
+
+.page-location .nav-top {
+	-webkit-transition:background 0.2s ease;
+	-moz-transition:background 0.2s ease;
+	-ms-transition:background 0.2s ease;
+	-o-transition:background 0.2s ease;
+	transition:background 0.2s ease;
+}
+
+.page-location .nav-top.at-top {
+	background: none;
+}
+
+.page-location .nav-top.at-top .menu {
+	background: url(/assets/images/micro/menu-location.svg) center center no-repeat;
+	background-size: 100%;
 }

www/assets/images/micro/menu-location.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="87.3px" height="56px" viewBox="0 0 87.3 56" style="enable-background:new 0 0 87.3 56;" xml:space="preserve">
+<path style="opacity:0.14;" d="M87.3,46c0,5.5-4.5,10-10,10H10C4.5,56,0,51.5,0,46V10C0,4.5,4.5,0,10,0h67.3c5.5,0,10,4.5,10,10V46z
+	"/>
+<path style="fill:#FFFFFF;" d="M66,14.5c0,1.9-1.6,3.5-3.5,3.5H24.6c-1.9,0-3.5-1.6-3.5-3.5l0,0c0-1.9,1.6-3.5,3.5-3.5h37.9
+	C64.4,11,66,12.6,66,14.5L66,14.5z"/>
+<path style="fill:#FFFFFF;" d="M66,28.5c0,1.9-1.6,3.5-3.5,3.5H24.6c-1.9,0-3.5-1.6-3.5-3.5l0,0c0-1.9,1.6-3.5,3.5-3.5h37.9
+	C64.4,25,66,26.6,66,28.5L66,28.5z"/>
+<path style="fill:#FFFFFF;" d="M66,42.5c0,1.9-1.6,3.5-3.5,3.5H24.6c-1.9,0-3.5-1.6-3.5-3.5l0,0c0-1.9,1.6-3.5,3.5-3.5h37.9
+	C64.4,39,66,40.6,66,42.5L66,42.5z"/>
+<g id="vOC7jN_1_" style="display:none;">
+	
+		<image style="display:inline;overflow:visible;" width="101" height="74" id="vOC7jN_2_" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEASABIAAD/7AARRHVja3kAAQAEAAAAHgAA/+4AIUFkb2JlAGTAAAAAAQMA
+EAMCAwYAAAJOAAADKgAABI3/2wCEABALCwsMCxAMDBAXDw0PFxsUEBAUGx8XFxcXFx8eFxoaGhoX
+Hh4jJSclIx4vLzMzLy9AQEBAQEBAQEBAQEBAQEABEQ8PERMRFRISFRQRFBEUGhQWFhQaJhoaHBoa
+JjAjHh4eHiMwKy4nJycuKzU1MDA1NUBAP0BAQEBAQEBAQEBAQP/CABEIAEoAZQMBIgACEQEDEQH/
+xACbAAACAwEBAAAAAAAAAAAAAAAAAQIDBAUGAQEBAQEAAAAAAAAAAAAAAAABAAIDEAABAwMDBAMB
+AAAAAAAAAAAAARECAwQFEBIWICITBiFBFTARAAECAgcFCAIDAAAAAAAAAAEAAhEDECExkRLSNHGB
+MpIzQdGi4hOTowQwUUBCghIAAQQDAQAAAAAAAAAAAAAAACARITEQMFAy/9oADAMBAAIRAxEAAADc
+o0c+mpZRzpWaMallQajKFreTQ1gioUW0230+X2XKNCTOtAXO53W5GaV2e8dAiqqbadal6Hzmxz31
+xSO0uKFs4OrLhd1F43iJpqto2S9f44T3x4Er3x4AL1Xlk8LuqvzqwZapQ+nOJIKJIzRcgYuUjUbE
+7TGT/9oACAECAAEFAE6nEEY7TtFZ3HEEVB4m6JJUdx9EVjeh5EJSdR9FcVz5PnX/2gAIAQMAAQUA
+XrUXqUXoRBhdGGEQRBuj4EYRj4P/2gAIAQEAAQUAcfoccccccRRyUkii1Zqu+Rvmb5izmb5m+Rvm
+b5iVJoU57kcrL2OOW2Bvrmjxi/OL5A4vkDi2QL7B3tjRcct10rL2vpZ+yVLe35WcsOWnLjJ+w1L6
+20t9Ky9rjlj65bV7Ti+POLY84rjziuOMv6/b2VnpQPqsvaOW+YyNtS5BlzkGXOQ5c5DmC6yt/eQ0
+oH1WXtccxFjjKmP/ADsefnY8/Nxx+bjj2Kzx1GwEKGk03RHHH6UEKMVRNFjFTxwPHA8cDxwPHA8U
+DxQEpQEpwQT+iCaf/9oACAECAgY/ANE5hElFEJo8js2r/9oACAEDAgY/AOH/AP/aAAgBAQEGPwD8
+sT2K2GxcRvXEb1xG9cRvXEb1xG9cRvXEb1beo30DbS2c0sY14i0PJiR+6mldSTzOyLqSeZ2RdSTz
+OyLqSeZ2RevNLHywQHFhJhGyOICl26gbaWSHyBM9MBrXB2GoVCrCVpfk8i0nyeRaT5PItJ8nkR+s
+2SJTHEF5xYiYGIFje2l26gbaZU6dMfjmtD4MIAAcIgVtK6k7mbkXUnczci6k7mbkXUnczcid9mRM
+ecBGJr4GIccNUAP3S7dQNtIlSZxbLbY0hrocwK1HgZlWo8DMq1HgZlWo8DMqEv7M4vYDHDBrRH/I
+FJ3UDbTJeJMua5zQZjnNDzj/ALCuPatLJ9tvctLJ9tvctLJ9tvctLJ9tvci9kqXJnhzfSwANLq6x
+BttVJ3UQFv44ntprCsVisVisVisViqH8D//Z" transform="matrix(1 0 0 1 -5 -10)">
+	</image>
+</g>
+</svg>

www/assets/images/micro/menu.svg

@@ -3,8 +3,8 @@
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 width="87.3px" height="56px" viewBox="0 0 87.3 56" style="enable-background:new 0 0 87.3 56;" xml:space="preserve">
-<path style="opacity:0.14;" d="M87.3,46c0,5.5-4.5,10-10,10H10C4.5,56,0,51.5,0,46V10C0,4.5,4.5,0,10,0h67.3c5.5,0,10,4.5,10,10V46z
+<path style="fill:#F56B3B;enable-background:new    ;" d="M87.3,46c0,5.5-4.5,10-10,10H10C4.5,56,0,51.5,0,46V10C0,4.5,4.5,0,10,0
-	"/>
+	h67.3c5.5,0,10,4.5,10,10V46z"/>
 <path style="fill:#FFFFFF;" d="M66,14.5c0,1.9-1.6,3.5-3.5,3.5H24.6c-1.9,0-3.5-1.6-3.5-3.5l0,0c0-1.9,1.6-3.5,3.5-3.5h37.9
 	C64.4,11,66,12.6,66,14.5L66,14.5z"/>
 <path style="fill:#FFFFFF;" d="M66,28.5c0,1.9-1.6,3.5-3.5,3.5H24.6c-1.9,0-3.5-1.6-3.5-3.5l0,0c0-1.9,1.6-3.5,3.5-3.5h37.9
@@ -13,7 +13,7 @@
 	C64.4,39,66,40.6,66,42.5L66,42.5z"/>
 <g id="vOC7jN_1_" style="display:none;">
 	
-		<image style="display:inline;overflow:visible;" width="101" height="74" id="vOC7jN_2_" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEASABIAAD/7AARRHVja3kAAQAEAAAAHgAA/+4AIUFkb2JlAGTAAAAAAQMA
+		<image style="display:inline;overflow:visible;enable-background:new    ;" width="101" height="74" id="vOC7jN_2_" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEASABIAAD/7AARRHVja3kAAQAEAAAAHgAA/+4AIUFkb2JlAGTAAAAAAQMA
 EAMCAwYAAAJOAAADKgAABI3/2wCEABALCwsMCxAMDBAXDw0PFxsUEBAUGx8XFxcXFx8eFxoaGhoX
 Hh4jJSclIx4vLzMzLy9AQEBAQEBAQEBAQEBAQEABEQ8PERMRFRISFRQRFBEUGhQWFhQaJhoaHBoa
 JjAjHh4eHiMwKy4nJycuKzU1MDA1NUBAP0BAQEBAQEBAQEBAQP/CABEIAEoAZQMBIgACEQEDEQH/

www/assets/js/jquery.scrollspy.js

@@ -0,0 +1,98 @@
+/*!
+ * jQuery Scrollspy Plugin
+ * Author: @sxalexander
+ * Licensed under the MIT license
+ */
+
+
+;(function ( $, window, document, undefined ) {
+
+    $.fn.extend({
+      scrollspy: function ( options ) {
+        
+          var defaults = {
+            min: 0,
+            max: 0,
+            mode: 'vertical',
+            buffer: 0,
+            container: window,
+            onEnter: options.onEnter ? options.onEnter : [],
+            onLeave: options.onLeave ? options.onLeave : [],
+            onTick: options.onTick ? options.onTick : []
+          }
+          
+          var options = $.extend( {}, defaults, options );
+
+          return this.each(function (i) {
+
+              var element = this;
+              var o = options;
+              var $container = $(o.container);
+              var mode = o.mode;
+              var buffer = o.buffer;
+              var enters = leaves = 0;
+              var inside = false;
+                            
+              /* add listener to container */
+              $container.bind('scroll', function(e){
+                  var position = {top: $(this).scrollTop(), left: $(this).scrollLeft()};
+                  var xy = (mode == 'vertical') ? position.top + buffer : position.left + buffer;
+                  var max = o.max;
+                  var min = o.min;
+                  
+                  /* fix max */
+                  if($.isFunction(o.max)){
+                    max = o.max();
+                  }
+
+                  /* fix max */
+                  if($.isFunction(o.min)){
+                    min = o.min();
+                  }
+
+                  if(max == 0){
+                      max = (mode == 'vertical') ? $container.height() : $container.outerWidth() + $(element).outerWidth();
+                  }
+                  
+                  /* if we have reached the minimum bound but are below the max ... */
+                  if(xy >= min && xy <= max){
+                    /* trigger enter event */
+                    if(!inside){
+                       inside = true;
+                       enters++;
+                       
+                       /* fire enter event */
+                       $(element).trigger('scrollEnter', {position: position})
+                       if($.isFunction(o.onEnter)){
+                         o.onEnter(element, position);
+                       }
+                      
+                     }
+                     
+                     /* triger tick event */
+                     $(element).trigger('scrollTick', {position: position, inside: inside, enters: enters, leaves: leaves})
+                     if($.isFunction(o.onTick)){
+                       o.onTick(element, position, inside, enters, leaves);
+                     }
+                  }else{
+                    
+                    if(inside){
+                      inside = false;
+                      leaves++;
+                      /* trigger leave event */
+                      $(element).trigger('scrollLeave', {position: position, leaves:leaves})
+
+                      if($.isFunction(o.onLeave)){
+                        o.onLeave(element, position);
+                      }
+                    }
+                  }
+              }); 
+
+          });
+      }
+
+    })
+
+    
+})( jQuery, window );