close panel with esc shortcut (#3901)

* ESC as shortcut to close

* some little beauty

* only ESC close the list now

* Update template.rtl.css

* fixed onclick listener

* Update global_view.js

* heebie jeebies fix ;-)

* Update p/scripts/global_view.js

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

3 files changed, 15 insertions, 8 deletions

diff --git a/p/scripts/global_view.js b/p/scripts/global_view.js
index bc4a48b91..e9515be6a 100644
--- a/p/scripts/global_view.js
+++ b/p/scripts/global_view.js
@@ -73,6 +73,13 @@ function init_close_panel() {
 			document.getElementById('overlay').classList.remove('visible');
 			return false;
 		};
+	document.addEventListener('keydown', ev => {
+		const k = (ev.key.trim() || ev.code).toUpperCase();
+		if (k === 'ESCAPE' || k === 'ESC') {
+			document.querySelector('#overlay .close').click();
+		}
+		return false;
+	});
 }
 
 function init_global_view() {
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index ccbb33d3b..2ec7dea34 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -1095,7 +1095,7 @@ br {
 }
 
 #global > #panel.visible {
-	bottom: 1em;
+	bottom: 2%;
 	visibility: visible;
 }
 /*=== Panel */
@@ -1103,7 +1103,7 @@ br {
 	position: fixed;
 	top: 0; bottom: 0;
 	left: 0; right: 0;
-	background: rgba(0, 0, 0, 0.9);
+	background: rgba(0, 0, 0, 0.5);
 	opacity: 0;
 	transition: visibility .3s, opacity .3s;
 	visibility: hidden;
@@ -1118,8 +1118,8 @@ br {
 	background: #fff;
 	display: none;
 	position: fixed;
-	top: 1em; bottom: 1em;
-	left: 2em; right: 2em;
+	top: 2%; bottom: 2%;
+	left: 3%; right: 3%;
 	overflow: auto;
 }
 
diff --git a/p/themes/base-theme/template.rtl.css b/p/themes/base-theme/template.rtl.css
index 92de5c2d6..d6f0d0168 100644
--- a/p/themes/base-theme/template.rtl.css
+++ b/p/themes/base-theme/template.rtl.css
@@ -1090,7 +1090,7 @@ br {
 }
 
 #global > #panel.visible {
-	bottom: 1em;
+	bottom: 2%;
 	visibility: visible;
 }
 /*=== Panel */
@@ -1098,7 +1098,7 @@ br {
 	position: fixed;
 	top: 0; bottom: 0;
 	right: 0; left: 0;
-	background: rgba(0, 0, 0, 0.9);
+	background: rgba(0, 0, 0, 0.5);
 	opacity: 0;
 	transition: visibility .3s, opacity .3s;
 	visibility: hidden;
@@ -1113,8 +1113,8 @@ br {
 	background: #fff;
 	display: none;
 	position: fixed;
-	top: 1em; bottom: 1em;
-	right: 2em; left: 2em;
+	top: 2%; bottom: 2%;
+	left: 3%; right: 3%;
 	overflow: auto;
 }