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

Restructured modal close button so modal now scrolls if too tall #72

Merged
merged 1 commit into from
May 21, 2014
Merged

Restructured modal close button so modal now scrolls if too tall #72

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
16 changes: 14 additions & 2 deletions assets/ajaxify.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -445,8 +445,21 @@ var ajaxifyShopify = (function(module, $) {
};

closeModalButton = function () {
// Link up close modal link
// Create close button if it doesn't exist
if ( !$('.ajaxifyCart--close').length ) {
$modalContainer.after('<button class="ajaxifyCart--close" title="Close Cart">Close Cart</button>');
}

$closeCart = $('.ajaxifyCart--close');

// Position close button then show it
var w = $(window);
$closeCart.css({
top: ( w.height() - ( $modalContainer.offset().top + $modalContainer.outerHeight() ) - 15 ),
right: ( w.width() - ( $modalContainer.offset().left + $modalContainer.outerWidth() ) - 15 )
});

// Reset close modal listener
$closeCart.off('click');
$closeCart.on('click', hideModal);
};
Expand Down Expand Up @@ -754,7 +767,6 @@ var ajaxifyShopify = (function(module, $) {
// Size drawer at this point
switch (settings.method) {
case 'modal':
$cartContainer.prepend('<button class="ajaxifyCart--close" title="Close Cart">Close Cart</button>');
closeModalButton();
break;
case 'flip':
Expand Down
18 changes: 7 additions & 11 deletions assets/ajaxify.scss.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -470,7 +470,6 @@ form[action^="/cart/add"] {

&.is-visible {
visibility: visible;
overflow: visible;
@include box-shadow(0px 10px 80px rgba(0,0,0,.25));
}

Expand Down Expand Up @@ -687,24 +686,21 @@ form[action^="/cart/add"] {

.ajaxifyCart--close {
@extend .sprite;
display: none;
position: absolute;
top: -15px;
right: -15px;
z-index: 10;
border: none;
opacity: 0;
position: fixed;
border: 0 none;
width: 30px;
height: 30px;
float: right;
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=);
@include transition(background-color 0.1s);
z-index: 999999999;
@include transition(all 0.1s ease-in-out);

#ajaxifyModal & {
display: block;
#ajaxifyModal.is-visible + & {
opacity: 1;
}

&:hover {
Expand Down