Add QR code as a simple popup

rsierra · Apr 17, 2020 · 25d43e9 · 25d43e9
1 parent 4a5e2b5
commit 25d43e9
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 13 deletions.
diff --git a/web/assets/css/app.css b/web/assets/css/app.css
@@ -1,16 +1,21 @@
 body, html{
-  height: 100%;
-  margin: 40px;
+  margin: 30px;
 }
 
-#qr-code{
-  position: absolute;
-  background: white;
-  padding: 10px;
-  border: 1px solid #ddd;
-}
-#qr-code canvas{
-  display: block;
+#qr-code {
+  position: fixed;
+  top: 0; bottom: 0; left: 0;  right: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: false;
+}
+
+.popup {
+  margin: 100px  auto;
+  padding: 20px;
+  background: #fff;
+  border-radius: 5px;
+  width: 300px;
+  position: relative;
 }
 
 h1 a {

diff --git a/web/assets/js/app.js b/web/assets/js/app.js
@@ -1,5 +1,5 @@
 $(document).ready(function () {
-  var $view = $("<div id='qr-code'></div>");
+  var $view = $("<div id='qr-code'><div class='popup'><div class='content'></div></div></div>");
   $("body").append($view);
   $view.hide();
 });
@@ -21,11 +21,10 @@ $("a.qr-link").click(function (e) {
   var href = $(this).prop('href');
 
   // set its location and do show
-  $("#qr-code").css("top", (e.pageY) + "px").css("left", (e.pageX) + "px");
   $("#qr-code").fadeIn();
 
   // set qr-code content
-  $("#qr-code").empty().qrcode(
+  $("#qr-code .content").empty().qrcode(
     {
       text: encodeURI(decodeURI(href)),
       correctLevel: 1, // QRErrorCorrectLevel.L,