From 0eb13d9d1b2775625d86746651f1349d4d94043e Mon Sep 17 00:00:00 2001 From: schlagmichdoch Date: Fri, 24 Feb 2023 16:08:36 +0100 Subject: [PATCH] increase QR-Code size as requested in #43 and fix overflow issues on iOS --- package-lock.json | 4 ++-- package.json | 2 +- public/scripts/ui.js | 4 ++-- public/service-worker.js | 2 +- public/styles.css | 17 +++++++++++++---- public_included_ws_fallback/scripts/ui.js | 4 ++-- public_included_ws_fallback/service-worker.js | 2 +- public_included_ws_fallback/styles.css | 17 +++++++++++++---- 8 files changed, 35 insertions(+), 17 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3fb3b38..f1dbbca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "pairdrop", - "version": "1.1.0", + "version": "1.1.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "pairdrop", - "version": "1.1.0", + "version": "1.1.1", "license": "ISC", "dependencies": { "express": "^4.18.2", diff --git a/package.json b/package.json index 0196f9f..ff66482 100644 --- 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 index 161f7b3..e864781 100644 --- 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 index e05a378..8230bfe 100644 --- 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 index dcec033..0b089bf 100644 --- 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 index 8e1a306..da103ed 100644 --- 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 index b510684..fe52427 100644 --- 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 index 9df5852..c415cdd 100644 --- 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); } }