From 303bd29eb3bd097b5723bbf6bf7f24bf9510e578 Mon Sep 17 00:00:00 2001
From: Carson Shold <carson@carsonshold.com>
Date: Mon, 7 Jul 2014 09:21:16 -0400
Subject: [PATCH 1/6] Show quantity selector borders on small screens

---
 assets/ajaxify.scss.liquid | 29 ++++++++++++++++++++---------
 layout/theme.liquid        |  2 +-
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/assets/ajaxify.scss.liquid b/assets/ajaxify.scss.liquid
index b947b0db1..fbf6a3b0e 100755
--- a/assets/ajaxify.scss.liquid
+++ b/assets/ajaxify.scss.liquid
@@ -433,15 +433,7 @@ form[action^="/cart/add"] {
 ==============================================================================*/
 .ajaxifyCart--qty {
   @extend .js-qty;
-  margin-bottom: 0;
-
-  input[type="text"] {
-    @include transition(all 0.1s ease-out);
-
-    .supports-no-touch & {
-      border: 1px solid rgba(0,0,0,0);
-    }
-  }
+  margin: 0;
 
   .ajaxifyCart--is-loading & {
     opacity: 0.5;
@@ -449,6 +441,14 @@ form[action^="/cart/add"] {
   }
 }
 
+.ajaxifyCart--num {
+  @include transition(all 0.1s ease-out);
+
+  .supports-no-touch & {
+    border: 1px solid rgba(0,0,0,0);
+  }
+}
+
 .ajaxifyCart--qty-adjuster {
   @extend .js--qty-adjuster;
   opacity: 0;
@@ -650,6 +650,17 @@ form[action^="/cart/add"] {
       background-color: darken($modalBorderColor, 10%);
     }
   }
+
+  // Small screen quantity appearance
+  @include at-query ($max, $medium) {
+    input[type="text"] {
+      border-color: $modalBorderColor;
+    }
+
+    .ajaxifyCart--qty-adjuster {
+      opacity: 1;
+    }
+  }
 }
 
 /*============================================================================
diff --git a/layout/theme.liquid b/layout/theme.liquid
index e6ada8c98..f52956029 100755
--- a/layout/theme.liquid
+++ b/layout/theme.liquid
@@ -178,7 +178,7 @@
   <script>
   jQuery(function($) {
     ajaxifyShopify.init({
-      method: '{{ settings.ajax_cart_method }}', // Method options are drawer, modal, and flip. Default is drawer.
+      method: 'modal', // Method options are drawer, modal, and flip. Default is drawer.
       wrapperClass: 'wrapper', // The class that defines your site width. Default is null.
       formSelector: '#addToCartForm', // Default is form[action^="/cart/add"].
       addToCartSelector: '#addToCart', // Default is input[type="submit"] within 'formSelector'.

From 82d084a0f1802fcfd5ec8d439e4e1855045c6c2e Mon Sep 17 00:00:00 2001
From: Carson Shold <carson@carsonshold.com>
Date: Mon, 7 Jul 2014 09:54:30 -0400
Subject: [PATCH 2/6] Replaced modal close button. Esc closes modal

---
 assets/ajaxify.js          | 20 ++++++++------------
 assets/ajaxify.scss.liquid | 31 ++++++++++++++++---------------
 2 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/assets/ajaxify.js b/assets/ajaxify.js
index eac6284f6..4070af78c 100644
--- a/assets/ajaxify.js
+++ b/assets/ajaxify.js
@@ -413,10 +413,17 @@ var ajaxifyShopify = (function(module, $) {
     $modalOverlay.on('click', hideModal);
 
     // Create a close modal button
-    $modalContainer.after('<button class="ajaxifyCart--close" title="Close Cart">Close Cart</button>');
+    $modalContainer.prepend('<button class="ajaxifyCart--close" title="Close Cart">Close Cart</button>');
     $closeCart = $('.ajaxifyCart--close');
     $closeCart.on('click', hideModal);
 
+    // Escape also closes cart
+    $(document).keyup( function (evt) {
+      if (evt.keyCode == 27) {
+        hideModal();
+      }
+    });
+
     // Add a class if CSS translate isn't available
     if (!$cssTransforms) {
       $modalContainer.addClass('no-transforms')
@@ -464,17 +471,6 @@ var ajaxifyShopify = (function(module, $) {
     $modalContainer.addClass('is-visible');
     $body.addClass('ajaxify-lock');
 
-    // Position close button on slight timeout
-    clearTimeout(positionTimeout);
-    var fromTop = window.pageYOffset | document.documentElement.scrollTop;
-    var positionTimeout = setTimeout(function() {
-      $closeCart.css({
-        top: ( $w.height() - ( $modalContainer.offset().top - fromTop + $modalContainer.outerHeight() ) - 15 ),
-        right: ( $w.width() - ( $modalContainer.offset().left + $modalContainer.outerWidth() ) - 15 ),
-        opacity: 1
-      });
-    }, 460);
-
     toggleCallback({
       'is_visible': true
     });
diff --git a/assets/ajaxify.scss.liquid b/assets/ajaxify.scss.liquid
index fbf6a3b0e..4ebcb86c4 100755
--- a/assets/ajaxify.scss.liquid
+++ b/assets/ajaxify.scss.liquid
@@ -811,30 +811,31 @@ form[action^="/cart/add"] {
 
 .ajaxifyCart--close {
   @extend .sprite;
-  display: none;
-  position: fixed;
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  opacity: 0;
+  visibility: hidden;
   border: 0 none;
   width: 30px;
   height: 30px;
   cursor: pointer;
-  border-radius: 30px;
-  background-position: center center;
-  background-color: $ajaxifyGreyDark;
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkMzRUY2REVBNDY1QjExRTM4ODdCODU0OEQ4MDA1MjgwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkMzRUY2REVCNDY1QjExRTM4ODdCODU0OEQ4MDA1MjgwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QzNFRjZERTg0NjVCMTFFMzg4N0I4NTQ4RDgwMDUyODAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QzNFRjZERTk0NjVCMTFFMzg4N0I4NTQ4RDgwMDUyODAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7sdZ8fAAAAp0lEQVR42nSPQQ6CMBBFx4ZEj+DSY8BGt9SVwRP1QBDdULeygaN4BFzpn+Q3mZCW5DFk/uvQ2YUQfiIygYuUnzc4O7wW/QCxIEbmi8oNG23mgO03js0reDF4gCNry77mUpkpHvSgo7QHA7gnwW1+q8FKcbViTtbJB/Bl7Uty5BWe4MTa2aWTPJplbuDDmpYe04IzqBn4zbU8J2udHcUpI9oDmtd/AQYAX20mtnhTCxQAAAAASUVORK5CYII=);
+  background: {
+    color: transparent;
+    position: center center;
+    image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkMzRUY2REVBNDY1QjExRTM4ODdCODU0OEQ4MDA1MjgwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkMzRUY2REVCNDY1QjExRTM4ODdCODU0OEQ4MDA1MjgwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QzNFRjZERTg0NjVCMTFFMzg4N0I4NTQ4RDgwMDUyODAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QzNFRjZERTk0NjVCMTFFMzg4N0I4NTQ4RDgwMDUyODAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7sdZ8fAAAAp0lEQVR42nSPQQ6CMBBFx4ZEj+DSY8BGt9SVwRP1QBDdULeygaN4BFzpn+Q3mZCW5DFk/uvQ2YUQfiIygYuUnzc4O7wW/QCxIEbmi8oNG23mgO03js0reDF4gCNry77mUpkpHvSgo7QHA7gnwW1+q8FKcbViTtbJB/Bl7Uty5BWe4MTa2aWTPJplbuDDmpYe04IzqBn4zbU8J2udHcUpI9oDmtd/AQYAX20mtnhTCxQAAAAASUVORK5CYII=)
+  }
   z-index: 999999999;
-  @include transition(opacity 100ms ease-in-out);
+  @include transition(all 450ms cubic-bezier(0.57,.06,.05,.95));
 
-  #ajaxifyModal.is-visible + & {
-    display: block;
+  .is-visible & {
+    opacity: 0.8;
+    visibility: visible;
+    @include transition(opacity 650ms cubic-bezier(0.57, 0.06, 0.05, 0.95) 200ms);
   }
 
   &:hover {
-    background-color: lighten($ajaxifyGreyDark, 50%);
-  }
-
-  @include at-query ($max, 972px) {
-    background-color: transparent;
-    @include transform(translateY(32px) translateX(-32px));
+    opacity: 1;
   }
 }
 

From 10d266a68433df4b7980692e5aa8a777927c7543 Mon Sep 17 00:00:00 2001
From: Carson Shold <carson@carsonshold.com>
Date: Mon, 7 Jul 2014 10:00:09 -0400
Subject: [PATCH 3/6] Removed styles from mobile

---
 assets/ajaxify.scss.liquid | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/assets/ajaxify.scss.liquid b/assets/ajaxify.scss.liquid
index 4ebcb86c4..98996caa4 100755
--- a/assets/ajaxify.scss.liquid
+++ b/assets/ajaxify.scss.liquid
@@ -535,7 +535,11 @@ form[action^="/cart/add"] {
 
   &.is-visible {
     visibility: visible;
-    @include box-shadow(0px 10px 80px rgba(0,0,0,.25));
+
+    // Large screens
+    @include at-query ($min, $large) {
+      @include box-shadow(0px 10px 80px rgba(0,0,0,.25));
+    }
   }
 
   &.no-transforms {
@@ -585,13 +589,15 @@ form[action^="/cart/add"] {
   @include transition(opacity 450ms cubic-bezier(0.57,.06,.05,.95));
 }
 
-#ajaxifyModal.is-visible ~ #ajaxifyCart-overlay {
-  opacity: 0.8;
-  visibility: visible;
-  @include transition(opacity 650ms cubic-bezier(0.57, 0.06, 0.05, 0.95));
+@include at-query ($min, $postSmall) {
+  #ajaxifyModal.is-visible ~ #ajaxifyCart-overlay {
+    opacity: 0.8;
+    visibility: visible;
+    @include transition(opacity 650ms cubic-bezier(0.57, 0.06, 0.05, 0.95));
 
-  .lt-ie9 & {
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
+    .lt-ie9 & {
+      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
+    }
   }
 }
 

From 70c11ce6bee4be0d5bf3d04cb3febe3446b8d97e Mon Sep 17 00:00:00 2001
From: Carson Shold <carson@carsonshold.com>
Date: Mon, 7 Jul 2014 10:07:54 -0400
Subject: [PATCH 4/6] Better modal close button position

---
 assets/ajaxify.js          | 5 +++++
 assets/ajaxify.scss.liquid | 2 +-
 layout/theme.liquid        | 2 +-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/assets/ajaxify.js b/assets/ajaxify.js
index 4070af78c..ba1c586f2 100644
--- a/assets/ajaxify.js
+++ b/assets/ajaxify.js
@@ -468,6 +468,11 @@ var ajaxifyShopify = (function(module, $) {
       'opacity': 1
     });
 
+    // Position close button relative to title
+    $closeCart.css({
+      'top': 10 + ( $cartContainer.find('h1').height() / 2 )
+    })
+
     $modalContainer.addClass('is-visible');
     $body.addClass('ajaxify-lock');
 
diff --git a/assets/ajaxify.scss.liquid b/assets/ajaxify.scss.liquid
index 98996caa4..228a82709 100755
--- a/assets/ajaxify.scss.liquid
+++ b/assets/ajaxify.scss.liquid
@@ -824,7 +824,7 @@ form[action^="/cart/add"] {
   visibility: hidden;
   border: 0 none;
   width: 30px;
-  height: 30px;
+  height: 25px;
   cursor: pointer;
   background: {
     color: transparent;
diff --git a/layout/theme.liquid b/layout/theme.liquid
index f52956029..e6ada8c98 100755
--- a/layout/theme.liquid
+++ b/layout/theme.liquid
@@ -178,7 +178,7 @@
   <script>
   jQuery(function($) {
     ajaxifyShopify.init({
-      method: 'modal', // Method options are drawer, modal, and flip. Default is drawer.
+      method: '{{ settings.ajax_cart_method }}', // Method options are drawer, modal, and flip. Default is drawer.
       wrapperClass: 'wrapper', // The class that defines your site width. Default is null.
       formSelector: '#addToCartForm', // Default is form[action^="/cart/add"].
       addToCartSelector: '#addToCart', // Default is input[type="submit"] within 'formSelector'.

From 3d00c24444fd514ee420ac8834a335e28d354ff2 Mon Sep 17 00:00:00 2001
From: Carson Shold <carson@carsonshold.com>
Date: Mon, 7 Jul 2014 10:40:27 -0400
Subject: [PATCH 5/6] Absolutely position modal

---
 assets/ajaxify.js          |  4 ++--
 assets/ajaxify.scss.liquid | 23 +++++++++++------------
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/assets/ajaxify.js b/assets/ajaxify.js
index ba1c586f2..c918552f9 100644
--- a/assets/ajaxify.js
+++ b/assets/ajaxify.js
@@ -464,7 +464,6 @@ var ajaxifyShopify = (function(module, $) {
     // Position modal by negative margin
     $modalContainer.css({
       'margin-left': - ($modalContainer.outerWidth() / 2),
-      'margin-top': - ($modalContainer.outerHeight() / 2),
       'opacity': 1
     });
 
@@ -474,7 +473,8 @@ var ajaxifyShopify = (function(module, $) {
     })
 
     $modalContainer.addClass('is-visible');
-    $body.addClass('ajaxify-lock');
+
+    scrollTop();
 
     toggleCallback({
       'is_visible': true
diff --git a/assets/ajaxify.scss.liquid b/assets/ajaxify.scss.liquid
index 228a82709..fe845a5e0 100755
--- a/assets/ajaxify.scss.liquid
+++ b/assets/ajaxify.scss.liquid
@@ -164,13 +164,6 @@ $modalBorderColor: $borderColor;
   color: $ajaxifyGrey;
 }
 
-/*============================================================================
-  Ajaxify Helpers
-==============================================================================*/
-body.ajaxify-lock {
-  overflow: hidden;
-}
-
 /*============================================================================
   Ajaxify Loader
 ==============================================================================*/
@@ -341,11 +334,14 @@ form[action^="/cart/add"] {
   @include transition(all 650ms cubic-bezier(0.57, 0.06, 0.05, 0.95));
   @include rotateX(0deg);
   max-height: 500px;
+  visibility: visible;
 
   &.is-removed {
     overflow: hidden;
     opacity: 0;
     padding: 0;
+    margin: -$gutter 0 0;
+    visibility: hidden;
     @include rotateX(-92deg);
     @include backface(hidden);
     @include transition(all 450ms cubic-bezier(0.57,.06,.05,.95));
@@ -487,19 +483,22 @@ form[action^="/cart/add"] {
   Ajaxify Modal
 ==============================================================================*/
 #ajaxifyModal {
-  position: fixed;
-  top: 50%;
+  position: absolute;
+  top: 170px;
   left: 50%;
-  margin: -300px 0 0 -500px; // overridden with JS
+  margin-left: -500px; // overridden with JS
   width: 100%;
   max-width: 760px;
-  max-height: 80%;
   height: auto;
   z-index: 99999999;
   visibility: hidden;
-  overflow: auto;
   @include transition('box-shadow 600ms cubic-bezier(0.47, 0.5, 0, 0.95) 400ms, margin-top 200ms ease-in-out');
 
+  // Short screens
+  @media only screen and (max-height:645px) {
+    top: 70px;
+  }
+
   // Medium-down screens
   @include at-query ($max, $medium) {
     max-width: 90%;

From cc832e1743c8968e5b982748f2190315b684131f Mon Sep 17 00:00:00 2001
From: Carson Shold <carson@carsonshold.com>
Date: Mon, 7 Jul 2014 10:49:48 -0400
Subject: [PATCH 6/6] Escape closes all carts

---
 assets/ajaxify.js | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/assets/ajaxify.js b/assets/ajaxify.js
index c918552f9..3157177d2 100644
--- a/assets/ajaxify.js
+++ b/assets/ajaxify.js
@@ -326,6 +326,21 @@ var ajaxifyShopify = (function(module, $) {
           break;
       }
 
+      // Escape key closes cart
+      $(document).keyup( function (evt) {
+        if (evt.keyCode == 27) {
+          switch (settings.method) {
+            case 'flip':
+            case 'drawer':
+              hideDrawer();
+              break;
+            case 'modal':
+              hideModal();
+              break;
+          }
+        }
+      });
+
       if ( $addToCart.length ) {
         // Take over the add to cart form submit
         formOverride();
@@ -417,13 +432,6 @@ var ajaxifyShopify = (function(module, $) {
     $closeCart = $('.ajaxifyCart--close');
     $closeCart.on('click', hideModal);
 
-    // Escape also closes cart
-    $(document).keyup( function (evt) {
-      if (evt.keyCode == 27) {
-        hideModal();
-      }
-    });
-
     // Add a class if CSS translate isn't available
     if (!$cssTransforms) {
       $modalContainer.addClass('no-transforms')