diff --git a/README.md b/README.md index 0aa6ebd02..a2fee2162 100644 --- a/README.md +++ b/README.md @@ -50,6 +50,7 @@ If you want the english labels, just change it to en.js. If you want to change the labels just change the de.js or en.js ### Changelog +- 1.3.2: Bugfix for QR Code on result page - 1.3.1: Merged pull-request #6,#15 and #16 - 1.3.0: Option for QR and Print Butons, code rework, gulp-sass feature enabled - 1.2.0: Printing feature, code rework, bugfixes diff --git a/index.php b/index.php index 54bc9e7c5..e9affea63 100644 --- a/index.php +++ b/index.php @@ -50,10 +50,11 @@
+ ';} ?> diff --git a/resources/css/style.css b/resources/css/style.css index 8b0ea78b6..af4348819 100644 --- a/resources/css/style.css +++ b/resources/css/style.css @@ -267,6 +267,12 @@ h3 { padding: 0 15px; font-size: 25px; } +.qr > * { + display: none; } + +.qr.active > * { + display: block; } + .qrbtn { background: #fff; color: #000; } diff --git a/resources/js/core.js b/resources/js/core.js index 60c0eac4a..f53778216 100644 --- a/resources/js/core.js +++ b/resources/js/core.js @@ -291,16 +291,20 @@ var photoBooth = (function () { } if (qr && !target.hasClass('qrbtn')) { - $('.qrbtn').removeClass('active'); - $('.qr').hide(); - $('.qrbtn').animate({ - 'width': 200, - 'height': 70, - 'left': 205, - 'margin-left': 0, - 'top': 0 - }, 250); - qr = false; + var qrpos = $('.qrbtn').offset(), + qrbtnwidth = $('.qrbtn').outerWidth(), + qrbtnheight = $('.qrbtn').outerHeight() + $('.qr').removeClass('active'); + $('.qr').animate({ + 'width': qrbtnwidth, + 'height': qrbtnheight, + 'left': qrpos.left, + 'top': qrpos.top, + 'margin-left': 0, + }, 250, function(){ + $('.qr').hide(); + }); + qr = false; } // Go to Home @@ -310,29 +314,41 @@ var photoBooth = (function () { // Qr in and out if (target.hasClass('qrbtn') || target.closest('.qrbtn').length > 0) { + + var qrpos = $('.qrbtn').offset(), + qrbtnwidth = $('.qrbtn').outerWidth(), + qrbtnheight = $('.qrbtn').outerHeight() + if (qr) { - $('.qrbtn').removeClass('active'); - $('.qrbtn').animate({ - 'width': 200, - 'height': 70, - 'left': 205, - 'margin-left': 0, - 'top': 0 - }, 250); + $('.qr').removeClass('active'); + $('.qr').animate({ + 'width': qrbtnwidth, + 'height': qrbtnheight, + 'left': qrpos.left, + 'top': qrpos.top, + 'margin-left': 0, + }, 250, function(){ + $('.qr').hide(); + }); qr = false; } else { qr = true; - $('.qrbtn').addClass('active'); - - $('.qrbtn').animate({ + $('.qr').css({ + 'width': qrbtnwidth, + 'height': qrbtnheight, + 'left': qrpos.left, + 'top': qrpos.top + }); + $('.qr').show(); + $('.qr').animate({ 'width': 500, 'height': 600, 'left': '50%', 'margin-left': -265, - 'top': -625 - }, 250, function () { - $('.qr').fadeIn('fast'); - }); + 'top': 50 + }, 250, function(){ + $('.qr').addClass('active'); + }); } } }); diff --git a/resources/sass/style.scss b/resources/sass/style.scss index 7405d9731..9367827aa 100644 --- a/resources/sass/style.scss +++ b/resources/sass/style.scss @@ -334,6 +334,15 @@ h3 { font-size: 25px; } +.qr { + > * { + display: none; + } + &.active > *{ + display: block; + } +} + .qrbtn { background: #fff; color: #000;