Skip to content
This repository has been archived by the owner on Aug 30, 2018. It is now read-only.

Ajax modal sizing #137

Merged
merged 6 commits into from
Jul 7, 2014
Merged

Ajax modal sizing #137

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
303bd29
Show quantity selector borders on small screens
cshold Jul 7, 2014
82d084a
Replaced modal close button. Esc closes modal
cshold Jul 7, 2014
10d266a
Removed styles from mobile
cshold Jul 7, 2014
70c11ce
Better modal close button position
cshold Jul 7, 2014
3d00c24
Absolutely position modal
cshold Jul 7, 2014
cc832e1
Escape closes all carts
cshold Jul 7, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 23 additions & 14 deletions assets/ajaxify.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -413,7 +428,7 @@ 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);

Expand Down Expand Up @@ -457,23 +472,17 @@ var ajaxifyShopify = (function(module, $) {
// Position modal by negative margin
$modalContainer.css({
'margin-left': - ($modalContainer.outerWidth() / 2),
'margin-top': - ($modalContainer.outerHeight() / 2),
'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');

// 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);

scrollTop();

toggleCallback({
'is_visible': true
Expand Down
105 changes: 61 additions & 44 deletions assets/ajaxify.scss.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,13 +164,6 @@ $modalBorderColor: $borderColor;
color: $ajaxifyGrey;
}

/*============================================================================
Ajaxify Helpers
==============================================================================*/
body.ajaxify-lock {
overflow: hidden;
}

/*============================================================================
Ajaxify Loader
==============================================================================*/
Expand Down Expand Up @@ -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));
Expand Down Expand Up @@ -433,22 +429,22 @@ 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;
@include transition(none);
}
}

.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;
Expand Down Expand Up @@ -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%;
Expand Down Expand Up @@ -535,7 +534,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 {
Expand Down Expand Up @@ -585,13 +588,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)";
}
}
}

Expand Down Expand Up @@ -650,6 +655,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;
}
}
}

/*============================================================================
Expand Down Expand Up @@ -800,30 +816,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;
height: 25px;
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;
}
}

Expand Down