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

This commit is contained in:
schlagmichdoch 2023-02-24 16:08:36 +01:00
parent ad109d1724
commit 0eb13d9d1b
8 changed files with 35 additions and 17 deletions

4
package-lock.json generated
View file

@ -1,12 +1,12 @@
{ {
"name": "pairdrop", "name": "pairdrop",
"version": "1.1.0", "version": "1.1.1",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "pairdrop", "name": "pairdrop",
"version": "1.1.0", "version": "1.1.1",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"express": "^4.18.2", "express": "^4.18.2",

View file

@ -1,6 +1,6 @@
{ {
"name": "pairdrop", "name": "pairdrop",
"version": "1.1.0", "version": "1.1.1",
"description": "", "description": "",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {

View file

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

View file

@ -1,4 +1,4 @@
const cacheVersion = 'v1.1.0'; const cacheVersion = 'v1.1.1';
const cacheTitle = `pairdrop-cache-${cacheVersion}`; const cacheTitle = `pairdrop-cache-${cacheVersion}`;
const urlsToCache = [ const urlsToCache = [
'index.html', 'index.html',

View file

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

View file

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

View file

@ -1,4 +1,4 @@
const cacheVersion = 'v1.1.0'; const cacheVersion = 'v1.1.1';
const cacheTitle = `pairdrop-included-ws-fallback-cache-${cacheVersion}`; const cacheTitle = `pairdrop-included-ws-fallback-cache-${cacheVersion}`;
const urlsToCache = [ const urlsToCache = [
'index.html', 'index.html',

View file

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