improve help popup displays

src/account/DevicesPage.vue

@@ -47,7 +47,7 @@
                     <td nowrap="nowrap"><a v-if="device.deviceType" :href="'/api/auth/cacert?deviceType='+device.deviceType">{{messages['device_type_'+device.deviceType]}}</a></td>
                     <td nowrap="nowrap">{{messages.label_device_ctime_format.parseDateMessage(device.ctime, messages)}}</td>
                     <td>
-                        <div v-if="displayDeviceHelp[device.uuid] === true" class="device-vpn-config-div">
+                        <div v-if="displayDeviceHelp[device.uuid] === true" class="device-help-div">
                             <div v-html="messages['device_type_'+device.deviceType+'_help_html']"></div>
                             <button @click="hideDeviceHelp()" class="btn btn-primary">{{messages.button_label_close_device_help}}</button>
                         </div>
@@ -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', [

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 {