move region_1 to off instead of removing it and dont squelch region_2 when region_1 moves in again

6 files changed, 25 insertions, 9 deletions

diff --git a/view/css/conversation.css b/view/css/conversation.css
index 0100f58b5..188dbaccc 100644
--- a/view/css/conversation.css
+++ b/view/css/conversation.css
@@ -261,6 +261,7 @@
 
 .wall-item-body {
 	margin-top: 10px;
+	word-wrap: break-word;
 }
 
 .wall-item-body.divmore {
diff --git a/view/css/default.css b/view/css/default.css
index 271e15620..f8d00d34c 100644
--- a/view/css/default.css
+++ b/view/css/default.css
@@ -8,11 +8,13 @@ header #banner {
 
 main {
 	display: table;
+	position: relative;
 	width: 100%;
 	height: 100%;
 }
 
 aside#region_1 {
+	width: 210px;
 	min-width: 210px;
 	display: table-cell;
 	vertical-align: top;
@@ -25,7 +27,6 @@ aside input[type='text'] {
 
 section {
 	width: 100%;
-	min-width: 298px;
 	display: table-cell;
 	vertical-align: top;
 	padding: 65px 15px 200px 7px;
diff --git a/view/php/default.php b/view/php/default.php
index 87b92161b..01cd8a0d4 100644
--- a/view/php/default.php
+++ b/view/php/default.php
@@ -9,7 +9,7 @@
 	<header><?php if(x($page,'header')) echo $page['header']; ?></header>
 	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"><?php if(x($page,'nav')) echo $page['nav']; ?></nav>
 	<main>
-		<aside id="region_1" class="hidden-xs"><?php if(x($page,'aside')) echo $page['aside']; ?></aside>
+		<aside id="region_1"><?php if(x($page,'aside')) echo $page['aside']; ?></aside>
 		<section id="region_2"><?php if(x($page,'content')) echo $page['content']; ?>
 					<div id="page-footer"></div>
 			<div id="pause"></div>
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 7cdc55644..d30aedd25 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -244,7 +244,7 @@ header #banner #logo-text {
 	height: 28px;
 	border-bottom: 1px solid #aaaaaa;
 	padding:0px;
-	width: 90%; 
+	width: 100%;
 }
 
 .tabs li { margin: 0px; list-style: none; }
@@ -262,8 +262,7 @@ ul.tabs {
 	margin-top: 0px;
 	margin-bottom: 0px;
 	list-style-type: none;
-	padding: 0px;
-	padding-right: 8px;
+
 }
 
 /* footer */
@@ -2309,9 +2308,24 @@ blockquote {
 	padding: 7px 10px;
 }
 
-@media (max-width:767px) {
+@media screen and (max-width: 767px) {
 	aside#region_1 {
 		background: rgba(0, 0, 0, .1);
 		border-right: 1px solid $nav_bd;
 	}
+
+	main {
+		-webkit-transition: all 0.25s ease-out;
+		-moz-transition: all 0.25s ease-out;
+		transition: all 0.25s ease-out;
+	}
+
+	main {
+		left: -227px;
+		width: calc( 100% + 227px );
+	}
+
+	main.region_1-on {
+		left: 0px;
+	}
 }
diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js
index 7e957a4f4..bec7c55c8 100644
--- a/view/theme/redbasic/js/redbasic.js
+++ b/view/theme/redbasic/js/redbasic.js
@@ -22,9 +22,9 @@ function cmtBbClose(comment, id) {
 
 $(document).ready(function() {
 
-$('[data-toggle=show_hide]').click(function() {
+$('[data-toggle=offcanvas]').click(function() {
 	$('#expand-aside-icon').toggleClass('icon-circle-arrow-right').toggleClass('icon-circle-arrow-left');
-	$('#region_1').toggleClass('hidden-xs');
+	$('main').toggleClass('region_1-on');
 });
 
 $('.group-edit-icon').hover(
diff --git a/view/tpl/nav.tpl b/view/tpl/nav.tpl
index a4baaf48b..fbdf28f76 100755
--- a/view/tpl/nav.tpl
+++ b/view/tpl/nav.tpl
@@ -5,7 +5,7 @@
 				<span class="icon-bar"></span>
 				<span class="icon-bar"></span>
 			</button>
-			<button id="expand-aside" type="button" class="navbar-toggle" data-toggle="show_hide" data-target="#region_1">
+			<button id="expand-aside" type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#region_1">
 				<i class="icon-circle-arrow-right" id="expand-aside-icon"></i>
 			</button>
 			{{if $userinfo}}