diff --git a/src/account/DevicesPage.vue b/src/account/DevicesPage.vue index 1c60ba4..f395f14 100644 --- a/src/account/DevicesPage.vue +++ b/src/account/DevicesPage.vue @@ -47,7 +47,7 @@ {{messages['device_type_'+device.deviceType]}} {{messages.label_device_ctime_format.parseDateMessage(device.ctime, messages)}} -
+
@@ -160,6 +160,14 @@ errors: this.errors }) }, + mounted() { + window.addEventListener('keyup', ev => { + if (ev.key === "Escape") { + this.hideVpnConfig(); + this.hideDeviceHelp(); + } + }); + }, methods: { ...mapActions('apps', ['getMitmStatus', 'enableMitm', 'disableMitm']), ...mapActions('devices', [ diff --git a/src/index.html b/src/index.html index 2661268..6c8d2f6 100755 --- a/src/index.html +++ b/src/index.html @@ -47,15 +47,33 @@ } .device-vpn-config-div { - width: 400px; - height: 600px; + border: solid black 2px; background-color: white; position: absolute; - top:0; - bottom: 0; + top: 50%; + -ms-transform: translateY(-50%); + transform: translateY(-50%); + z-index: 100; + left: 0; + right: 0; + margin: auto; + padding: 5px; + } + + .device-help-div { + /*width: 80%;*/ + /*height: 30%;*/ + border: solid black 2px; + background-color: white; + position: absolute; + top: 50%; + -ms-transform: translateY(-50%); + transform: translateY(-50%); + z-index: 100; left: 0; right: 0; margin: auto; + padding: 5px; } .icon-dash-title {