3 files changed, 66 insertions, 20 deletions

diff --git a/view/js/mod_hq.js b/view/js/mod_hq.js
index 48fbf1f9b..ad77e0af0 100644
--- a/view/js/mod_hq.js
+++ b/view/js/mod_hq.js
@@ -2,12 +2,14 @@ $(document).ready(function() {
 
 	$(document).on('click', '.jot-toggle', function(e) {
 		$(window).scrollTop(0);
+		$(document).trigger('hz:hqControlsClickAction');
 		$('#jot-popup').toggle();
 		$('#profile-jot-text').focus();
 	});
 
 	$(document).on('click', '.notes-toggle', function(e) {
 		$(window).scrollTop(0);
+		$(document).trigger('hz:hqControlsClickAction');
 		$('#personal-notes').toggleClass('d-none');
 		$('#note-text').focus();
 	});
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 2ed7a03c1..3b74c5ea1 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -47,14 +47,13 @@ main {
 }
 
 #overlay {
-	position: absolute;
+	position: fixed;
 	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
+	left: $left_aside_widthpx;
+	width: 100vw;
+	height: 100vh;
 	background: rgba(0, 0, 0, .3);
 	cursor: pointer;
-	z-index: 1028;
 }
 
 h1, .h1 {
diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js
index b0b8d5dfc..a354682d7 100644
--- a/view/theme/redbasic/js/redbasic.js
+++ b/view/theme/redbasic/js/redbasic.js
@@ -11,7 +11,7 @@ $(document).ready(function() {
 			if($(window).width() < 992) {
 				$('main').css('width', $(window).width() + $('aside').outerWidth() );
 			} else {
-				$('main').css('width', '100%' );
+				$('main').css('width', '100%');
 			}
 		});
 	}
@@ -20,15 +20,15 @@ $(document).ready(function() {
 	stickyScroll('.aside_spacer_left', '.aside_spacer_top_left', '.content', parseFloat(window.getComputedStyle(document.querySelector('#region_1')).getPropertyValue('padding-top')), 0);
 	stickyScroll('.aside_spacer_right', '.aside_spacer_top_right', '.content', parseFloat(window.getComputedStyle(document.querySelector('#region_3')).getPropertyValue('padding-top')), 20);
 
-	$('#expand-aside').on('click', toggleAside);
-
-	$('section').on('click', function() {
+	$('#expand-aside').on('click', function() {
 		if($('main').hasClass('region_1-on')){
-			toggleAside();
+			toggleAside('left');
+		}
+		else {
+			toggleAside('right');
 		}
 	});
 
-
 	$('.usermenu').click(function() {
 		if($('#navbar-collapse-1, #navbar-collapse-2').hasClass('show')){
 			$('#navbar-collapse-1, #navbar-collapse-2').removeClass('show');
@@ -69,6 +69,49 @@ $(document).ready(function() {
 		}
 	}
 	setInterval(function () {checkNotify();}, 10 * 1000);
+
+	var touch_start = null;
+	var touch_max = 70;
+
+	window.addEventListener('touchstart', function(e) {
+		if (e.touches.length === 1){
+			//just one finger touched
+			touch_start = e.touches.item(0).clientX;
+			if (touch_start < touch_max) {
+				$('html, body').css('overflow-y', 'hidden');
+			}
+		}
+		else {
+			//a second finger hit the screen, abort the touch
+			touch_start = null;
+		}
+	});
+
+	window.addEventListener('touchend', function(e) {
+		$('html, body').css('overflow-y', '');
+
+		let touch_offset = 30; //at least 100px are a swipe
+		if (touch_start) {
+			//the only finger that hit the screen left it
+			let touch_end = e.changedTouches.item(0).clientX;
+
+			if (touch_end > (touch_start + touch_offset)) {
+				//a left -> right swipe
+				if (touch_start < touch_max) {
+					toggleAside('right');
+				}
+			}
+			if (touch_end < (touch_start - touch_offset)) {
+				//a right -> left swipe
+				//toggleAside('left');
+			}
+		}
+	});
+
+	$(document).on('hz:hqControlsClickAction', function(e) {
+		toggleAside('left');
+	});
+
 });
 
 function setStyle(element, cssProperty) {
@@ -136,16 +179,18 @@ function makeFullScreen(full) {
 	}
 }
 
-function toggleAside() {
-	$('#expand-aside-icon').toggleClass('fa-arrow-circle-right').toggleClass('fa-arrow-circle-left');
-	if($('main').hasClass('region_1-on')){
-		$('html, body').css('overflow-x', '');
-		$('main').removeClass('region_1-on')
+function toggleAside(swipe) {
+
+	if ($('main').hasClass('region_1-on') && swipe === 'left') {
+		$('#expand-aside-icon').addClass('fa-arrow-circle-right').removeClass('fa-arrow-circle-left');
+		$('html, body').css({ 'position': '', left: '' });
+		$('main').removeClass('region_1-on');
 		$('#overlay').remove();
 	}
-	else {
-		$('html, body').css('overflow-x', 'hidden');
-		$('main').addClass('region_1-on')
-		$('<div id="overlay"></div>').appendTo('section');
+	if (!$('main').hasClass('region_1-on') && swipe === 'right') {
+		$('#expand-aside-icon').removeClass('fa-arrow-circle-right').addClass('fa-arrow-circle-left');
+		$('html, body').css({ 'position': 'sticky',  'left': '0px'});
+		$('main').addClass('region_1-on');
+		$('<div id="overlay"></div>').appendTo('body').one('click', function() { toggleAside('left'); });
 	}
 }