increase QR-Code size as requested in #43 and fix overflow issues on iOS

schlagmichdoch · Feb 24, 2023 · 0eb13d9 · 0eb13d9
1 parent ad109d1
commit 0eb13d9
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 17 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pairdrop",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "",
   "main": "index.js",
   "scripts": {

diff --git a/public/scripts/ui.js b/public/scripts/ui.js
@@ -839,8 +839,8 @@ class PairDeviceDialog extends Dialog {
         // Display the QR code for the url
         const qr = new QRCode({
             content: this._getShareRoomURL(),
-            width: 80,
-            height: 80,
+            width: 150,
+            height: 150,
             padding: 0,
             background: "transparent",
             color: getComputedStyle(document.body).getPropertyValue('--text-color'),

diff --git a/public/service-worker.js b/public/service-worker.js
@@ -1,4 +1,4 @@
-const cacheVersion = 'v1.1.0';
+const cacheVersion = 'v1.1.1';
 const cacheTitle = `pairdrop-cache-${cacheVersion}`;
 const urlsToCache = [
     'index.html',

diff --git a/public/styles.css b/public/styles.css
@@ -11,7 +11,8 @@
 /* Layout */
 
 html {
-    height: 100%;
+    min-height: 100%;
+    height: -webkit-fill-available;
 }
 
 html,
@@ -25,6 +26,8 @@ body {
 }
 
 body {
+    min-height: 100%;
+    min-height: -webkit-fill-available;
     flex-grow: 1;
     align-items: center;
     justify-content: center;
@@ -407,6 +410,7 @@ x-dialog x-background {
     transition: opacity 300ms;
     will-change: opacity;
     padding: 35px;
+    overflow: overlay;
 }
 
 x-dialog x-paper {
@@ -419,6 +423,10 @@ x-dialog x-paper {
     box-sizing: border-box;
     transition: transform 300ms;
     will-change: transform;
+    position: absolute;
+    top: max(50%, 350px);
+    height: 650px;
+    margin-top: -325px;
 }
 
 x-dialog:not([show]) {
@@ -491,8 +499,8 @@ x-dialog .font-subheading {
 #roomKeyQrCode {
     padding: inherit;
     margin: auto;
-    width: 80px;
-    height: 80px;
+    width: 150px;
+    height: 150px;
 }
 
 #pairDeviceDialog hr {
@@ -619,6 +627,7 @@ x-dialog .row-reverse {
 #base64PasteDialog button[close] {
     margin-top: 20px;
 }
+
 #base64PasteDialog button[close]:before {
     border-radius: 8px;
 }
@@ -931,7 +940,7 @@ screen and (min-width: 1100px) {
         position: fixed;
     }
 
-    x-instructions:before {
+    x-instructions:not([drop-peer]):not([drop-bg]):before {
         content: attr(mobile);
     }
 }

diff --git a/public_included_ws_fallback/scripts/ui.js b/public_included_ws_fallback/scripts/ui.js
@@ -840,8 +840,8 @@ class PairDeviceDialog extends Dialog {
         // Display the QR code for the url
         const qr = new QRCode({
             content: this._getShareRoomURL(),
-            width: 80,
-            height: 80,
+            width: 150,
+            height: 150,
             padding: 0,
             background: "transparent",
             color: getComputedStyle(document.body).getPropertyValue('--text-color'),

diff --git a/public_included_ws_fallback/service-worker.js b/public_included_ws_fallback/service-worker.js
@@ -1,4 +1,4 @@
-const cacheVersion = 'v1.1.0';
+const cacheVersion = 'v1.1.1';
 const cacheTitle = `pairdrop-included-ws-fallback-cache-${cacheVersion}`;
 const urlsToCache = [
     'index.html',

diff --git a/public_included_ws_fallback/styles.css b/public_included_ws_fallback/styles.css
@@ -12,7 +12,8 @@
 /* Layout */
 
 html {
-    height: 100%;
+    min-height: 100%;
+    height: -webkit-fill-available;
 }
 
 html,
@@ -26,6 +27,8 @@ body {
 }
 
 body {
+    min-height: 100%;
+    min-height: -webkit-fill-available;
     flex-grow: 1;
     align-items: center;
     justify-content: center;
@@ -416,6 +419,7 @@ x-dialog x-background {
     transition: opacity 300ms;
     will-change: opacity;
     padding: 35px;
+    overflow: overlay;
 }
 
 x-dialog x-paper {
@@ -428,6 +432,10 @@ x-dialog x-paper {
     box-sizing: border-box;
     transition: transform 300ms;
     will-change: transform;
+    position: absolute;
+    top: max(50%, 350px);
+    height: 650px;
+    margin-top: -325px;
 }
 
 x-dialog:not([show]) {
@@ -500,8 +508,8 @@ x-dialog .font-subheading {
 #roomKeyQrCode {
     padding: inherit;
     margin: auto;
-    width: 80px;
-    height: 80px;
+    width: 150px;
+    height: 150px;
 }
 
 #pairDeviceDialog hr {
@@ -628,6 +636,7 @@ x-dialog .row-reverse {
 #base64PasteDialog button[close] {
     margin-top: 20px;
 }
+
 #base64PasteDialog button[close]:before {
     border-radius: 8px;
 }
@@ -944,7 +953,7 @@ screen and (min-width: 1100px) {
         position: fixed;
     }
 
-    x-instructions:before {
+    x-instructions:not([drop-peer]):not([drop-bg]):before {
         content: attr(mobile);
     }
 }