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

view/css/bootstrap-red.css

@@ -121,6 +121,10 @@ nav .navbar-collapse .navbar-right {
 	margin-right: 5px;
 }
 
+.nav-tabs.nav-justified > li {
+	white-space: nowrap;
+}
+
 code {
 	white-space: normal;
 }

view/css/conversation.css

@@ -1,9 +1,5 @@
 /* jot */
 
-#profile-jot-wrapper {
-	margin-top: 25px;
-}
-
 #jot-title,
 #jot-category,
 #jot-pagetitle {

view/css/default.css

@@ -18,7 +18,7 @@ aside#region_1 {
 	min-width: 210px;
 	display: table-cell;
 	vertical-align: top;
-	padding: 65px 7px 7px 7px;
+	padding: 65px 7px 13px 7px;
 }
 
 aside input[type='text'] {
@@ -29,5 +29,5 @@ section {
 	width: 100%;
 	display: table-cell;
 	vertical-align: top;
-	padding: 65px 15px 200px 7px;
+	padding: 65px 13px 200px 13px;
 }

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 {

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');},

view/tpl/common_tabs.tpl

@@ -1,6 +1,8 @@
-<ul class="tabs">
+<div id="tabs-collapse-1" class="navbar-collapse collapse">
+	<ul class="nav nav-tabs nav-justified">
 		{{foreach $tabs as $tab}}
-		<li {{if $tab.id}}id="{{$tab.id}}"{{/if}}><a href="{{$tab.url}}" class="tab button {{$tab.sel}}"{{if $tab.title}} title="{{$tab.title}}"{{/if}}>{{$tab.label}}</a></li>
+			<li class="{{$tab.sel}}" {{if $tab.id}}id="{{$tab.id}}"{{/if}}><a href="{{$tab.url}}"{{if $tab.title}} title="{{$tab.title}}"{{/if}}>{{$tab.label}}</a></li>
 		{{/foreach}}
 	</ul>
+</div>
 <div class="tabs-end"></div>

view/tpl/nav.tpl

@@ -5,6 +5,9 @@
 				<span class="icon-bar"></span>
 				<span class="icon-bar"></span>
 			</button>
+			<button id="expand-tabs" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#tabs-collapse-1">
+				<i class="icon-circle-arrow-down" id="expand-tabs-icon"></i>
+			</button>
 			<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>