make sticky aside available for small screens. we had to get rid of the transition effect for this to work reliably

3 files changed, 28 insertions, 22 deletions

diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 8a38c68f3..c66b040a4 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -22,6 +22,8 @@ body {
 	color: $font_colour;
 	margin: 0px;
 	height: 100%;
+	overflow-x: hidden;
+	
 }
 
 aside {
@@ -30,6 +32,10 @@ aside {
 	max-width: $aside_widthpx;
 }
 
+aside#region_1 {
+	border-right: 1px solid transparent;
+}
+
 main {
 	margin-left: auto;
 	margin-right: auto;
@@ -1839,10 +1845,6 @@ nav .badge.mail-update:hover {
 	}
 
 	main {
-		transition: all 0.25s ease-in-out;
-	}
-
-	main {
 		left: -$aside_widthpx;
 		width: calc( 100% + $aside_widthpx );
 	}
diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js
index 8fb1117ce..4a18db8ff 100644
--- a/view/theme/redbasic/js/redbasic.js
+++ b/view/theme/redbasic/js/redbasic.js
@@ -8,34 +8,32 @@ $(document).ready(function() {
 	if( $('#css3-calc').width() == 10) {
 		$(window).resize(function() {
 			if($(window).width() < 767) {
-				$('main').css('width', $(window).width() + 287 );
+				$('main').css('width', $(window).width() + $('aside').outerWidth() );
 			} else {
 				$('main').css('width', '100%' );
 			}
 		});
 	}
+
 	$('#css3-calc').remove(); // Remove the test element
 
-	if($(window).outerWidth() > 767) {
-		$('#left_aside_wrapper').stick_in_parent({
-			offset_top: $('nav').outerHeight(true)
-		});
-	}
+	$('#left_aside_wrapper').stick_in_parent({
+		offset_top: $('nav').outerHeight(true)
+	});
 
-	$(window).resize(function() {
-		if($(window).outerWidth() > 767) {
-			$('#left_aside_wrapper').stick_in_parent({
-				offset_top: $('nav').outerHeight(true)
-			});
-		}
-		else {
-			$('#left_aside_wrapper').trigger("sticky_kit:detach");
+	$('#expand-aside').on('click', toggleAside);
+
+	$('section').on('click', function() {
+		if($('main').hasClass('region_1-on')){
+			toggleAside();
 		}
 	});
 
-	$('#expand-aside').click(function() {
-		$('#expand-aside-icon').toggleClass('fa-arrow-circle-right').toggleClass('fa-arrow-circle-left');
-		$('main').toggleClass('region_1-on');
+	$(window).on('scroll', function() {
+		if($('main').hasClass('region_1-on') && $(window).scrollLeft() > 5){
+			$(window).scrollLeft(0);
+			toggleAside();
+		}
 	});
 
 	if($('aside').length && $('aside').html().length === 0) {
@@ -92,3 +90,9 @@ function makeFullScreen(full) {
 		$(document.body).trigger("sticky_kit:recalc");
 	}
 }
+
+function toggleAside() {
+	$(window).scroll();
+	$('#expand-aside-icon').toggleClass('fa-arrow-circle-right').toggleClass('fa-arrow-circle-left');
+	$('main').toggleClass('region_1-on');
+}
diff --git a/view/theme/redbasic/php/style.php b/view/theme/redbasic/php/style.php
index 2db0d4c44..9b994ebdf 100644
--- a/view/theme/redbasic/php/style.php
+++ b/view/theme/redbasic/php/style.php
@@ -165,7 +165,7 @@ if(file_exists('view/theme/redbasic/css/style.css')) {
 		$x .= $schemecss;
 	}
 
-	$aside_width = 287;
+	$aside_width = 288;
 
 	// left aside and right aside are 285px + converse width
 	if($align_left) {