Extend sidebar blur to body
Change-Id: Ieac3f58722a03b1c440fd6863747badcc78d4a02
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index 1a2992b..1ff4c73 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -146,13 +146,26 @@
var aside = document.getElementsByTagName('aside')[0];
if (aside && aside.classList.contains('active') == false) {
- aside.addEventListener('focus', function() {
+
+ // Make aside active on focus
+ aside.addEventListener('focus', function(e) {
this.classList.add('active');
});
- var main = document.getElementsByTagName('main')[0];
- main.addEventListener('click', function() {
- aside.classList.remove('active');
+ // Deactivate focus when clicking anywhere else
+ var body = document.getElementsByTagName('body')[0];
+ if (body !== null) {
+ body.addEventListener('click', function() {
+ aside.classList.remove('active');
+ });
+ };
+
+ /* Stop click event on aside
+ * (to not trickle down to body)
+ */
+ aside.addEventListener('click', function(e) {
+ // TODO: This prevents the form submission!
+ e.halt();
});
};
diff --git a/dev/scss/sidebar/sidebar.scss b/dev/scss/sidebar/sidebar.scss
index 384f598..eb9f4c7 100644
--- a/dev/scss/sidebar/sidebar.scss
+++ b/dev/scss/sidebar/sidebar.scss
@@ -26,10 +26,10 @@
opacity: 1;
}
&::after {
+ position: absolute;
display: block;
opacity: 0;
cursor: pointer;
- position: absolute;
right: 0;
bottom: 0;
margin-right: -1 * ($standard-margin / 2);