Bugfix for QR Code on result page

PhotoboothProject · Dec 22, 2017 · 5a58f32 · 5a58f32
1 parent a43fef1
commit 5a58f32
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 26 deletions.
diff --git 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
@@ -50,10 +50,11 @@
 			<a href="#" class="btn homebtn"><i class="fa fa-home"></i> <span data-l10n="home"></span></a>
 			<div class="resultInner hidden">
 			<a href="#" class="btn gallery"><i class="fa fa-th"></i> <span data-l10n="gallery"></span></a>
-			<?php if($config['use_qr']){ echo '<a href="#" class="btn qrbtn"><span class="qrbtnlabel"><i class="fa fa-qrcode"></i> <span data-l10n="qr"></span></span> <div class="qr"></div></a>'; } ?>
+			<?php if($config['use_qr']){ echo '<a href="#" class="btn qrbtn"><span class="qrbtnlabel"><i class="fa fa-qrcode"></i> <span data-l10n="qr"></span></span></a>'; } ?>
 			<?php if($config['use_print']){ echo '<a href="#" class="btn printbtn"><i class="fa fa-print"></i> <span data-l10n="print"></span></a>'; } ?>
 			<a href="#" class="btn newpic"><i class="fa fa-camera"></i> <span data-l10n="newPhoto"></span></a>
 			</div>
+			<?php if($config['use_qr']){ echo '<div class="qr"></div>';} ?>
 		</div>
 
 		<!-- Gallery -->

diff --git 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
@@ -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
@@ -334,6 +334,15 @@ h3 {
   font-size: 25px;
 }
 
+.qr {
+	> * {
+		display: none;
+	}
+	&.active > *{
+		display: block;
+	}
+}
+
 .qrbtn {
 	background: #fff;
 	color: #000;