bootstrapify common tabs and make show aside/tabs buttons only appear if there is something to show

2 files changed, 25 insertions, 29 deletions

diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 3b61ceab1..4415bdc30 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -245,31 +245,6 @@ header #banner #logo-text {
   font-size: 22px;
 }
 
-.tabs {
-	height: 28px;
-	border-bottom: 1px solid #aaaaaa;
-	padding:0px;
-	width: 100%;
-}
-
-.tabs li { margin: 0px; list-style: none; }
-.tab {
-	display:block;
-	float:left;
-	margin-right: 15px ;
-}
-
-.tab.active {
-	color: #444444;
-}
-
-ul.tabs {
-	margin-top: 0px;
-	margin-bottom: 0px;
-	list-style-type: none;
-
-}
-
 /* footer */
 
 footer {
@@ -2308,11 +2283,19 @@ blockquote {
 	background-color: $nav_active_icon_colour;
 }
 
-#expand-aside {
+#expand-aside,
+#expand-tabs {
 	color: $nav_active_icon_colour;
 	padding: 7px 10px;
 }
 
+#tabs-collapse-1 {
+	padding: 0px;
+	margin-bottom: 25px;
+	border-top: none;
+	box-shadow: none;
+}
+
 @media screen and (max-width: 767px) {
 	aside#region_1 {
 		background: rgba(0, 0, 0, .1);
@@ -2326,8 +2309,8 @@ blockquote {
 	}
 
 	main {
-		left: -227px;
-		width: calc( 100% + 227px );
+		left: -225px;
+		width: calc( 100% + 225px );
 	}
 
 	main.region_1-on {
diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js
index bec7c55c8..9a34b6a07 100644
--- a/view/theme/redbasic/js/redbasic.js
+++ b/view/theme/redbasic/js/redbasic.js
@@ -22,11 +22,24 @@ function cmtBbClose(comment, id) {
 
 $(document).ready(function() {
 
-$('[data-toggle=offcanvas]').click(function() {
+$('#expand-aside').click(function() {
 	$('#expand-aside-icon').toggleClass('icon-circle-arrow-right').toggleClass('icon-circle-arrow-left');
 	$('main').toggleClass('region_1-on');
+	$('html, body').animate({ scrollTop: position });
 });
 
+if ($('aside').html().length == 0) {
+	$('#expand-aside').hide();
+}
+
+$('#expand-tabs').click(function() {
+	$('#expand-tabs-icon').toggleClass('icon-circle-arrow-down').toggleClass('icon-circle-arrow-up');
+});
+
+if($('#tabs-collapse-1').length == 0) {
+	$('#expand-tabs').hide();
+}
+
 $('.group-edit-icon').hover(
 	function() {
 		$(this).css('opacity','1.0');},