diff --git a/static/css/connect.css b/static/css/connect.css index 27ea020b..d66aa14c 100644 --- a/static/css/connect.css +++ b/static/css/connect.css @@ -13,9 +13,8 @@ display: block; position: relative; width: 253px; - height: 241px; - -webkit-backdrop-filter: blur(10px); - backdrop-filter: blur(10px); + min-height: 241px; + height: auto; margin-top: 10px; padding: 10px; transition: background-color 0.5s; @@ -27,7 +26,7 @@ } /* prevent overlap: hide connect string until revealed; click surface on box */ -.qrcode-box #connectString { display: none; } +.qrcode-box #connectString { display: none; margin-top: 6px; } .qrcode-box.revealed #connectString { display: block; } .qrcode-box { cursor: pointer; } @@ -40,6 +39,7 @@ align-items: center; justify-content: center; overflow: hidden; + margin-top: 6px; } .qrcode-viewport #qrcode { position: absolute; @@ -60,6 +60,9 @@ } .qrcode-box.revealed .qr-veil { display: none; } +/* hide helper text when revealed to avoid overlap */ +.qrcode-box.revealed #click-text { display: none; } + .qrcode-box-clicked::before { content: ""; position: absolute; diff --git a/static/js/wizard.js b/static/js/wizard.js index 452e03f2..7d98b372 100644 --- a/static/js/wizard.js +++ b/static/js/wizard.js @@ -152,12 +152,13 @@ $(() => { new QRCode(qrElement, { text: connectString, colorDark: '#000000', colorLight: '#ffffff', width: 157, height: 157 }); } - // Reveal on click: show string and remove veil - codebox.off('click').on('click', () => { + // Reveal on click: show string below and remove veil/heading + codebox.off('click').on('click', (e) => { + e.preventDefault(); + e.stopPropagation(); if (!codebox.hasClass('revealed')) { cs.text(connectString); codebox.addClass('revealed'); - clickText.text('Pairing code'); } }); })();