[BUGFIX] Fix tab integration to fit the bootstrap way

Resources/Private/Templates/Overview/Overview.html

@@ -5,25 +5,23 @@
 <f:section name="main">
 	<f:if condition="{newsByCategory}">
 		<div class="tx-sgnews-categories">
-			<div class="tx-sgnews-categories-tabmenu-outer tabs-menu">
-				<ul class="tx-sgnews-categories-tabmenu tabs-menu-list nav nav-tabs">
+			<ul class="nav nav-tabs">
+				<li class="tx-sgnews-category active">
+					<a data-toggle="tab" href="#sgnewsTab0">
+						<f:translate key="frontend.overview.allTabLabel" />
+					</a>
+				</li>
+				<f:for each="{newsByCategory}" as="dataByCategory">
 					<li class="tx-sgnews-category">
-						<a class="category-0" data-tab="tx-sgnews-categories-tabcontent0" href="#tx-sgnews-categories-tabcontent0">
-							<f:translate key="frontend.overview.allTabLabel" />
+						<a data-toggle="tab" href="#sgnewsTab{dataByCategory.category.uid}">
+							{dataByCategory.category.subtitleWithFallbackToTitle}
 						</a>
 					</li>
-					<f:for each="{newsByCategory}" as="dataByCategory">
-						<li class="tx-sgnews-category">
-							<a class="category-{dataByCategory.category.uid}" data-tab="tx-sgnews-categories-tabcontent{dataByCategory.category.uid}" href="#tx-sgnews-categories-tabcontent{dataByCategory.category.uid}">
-								{dataByCategory.category.subtitleWithFallbackToTitle}
-							</a>
-						</li>
-					</f:for>
-				</ul>
-			</div>
+				</f:for>
+			</ul>
 
-			<div class="tx-sgnews-categories-tabcontents tabs-contents">
-				<div class="tx-sgnews-categories-tabcontent" id="tx-sgnews-categories-tabcontent0">
+			<div class="tab-content">
+				<div class="tab-pane active" id="sgnewsTab0">
 					<h4 class="tx-sgnews-tab-title"><f:translate key="frontend.overview.allTabLabel" /></h4>
 					<ul class="tx-sgnews-list tx-sgnews-list-0 row" data-category="0">
 						<f:for each="{allNews}" as="newsMetaDataEntry">
@@ -39,7 +37,7 @@
 					</ul>
 				</div>
 				<f:for each="{newsByCategory}" as="dataByCategory">
-					<div class="tx-sgnews-categories-tabcontent" id="tx-sgnews-categories-tabcontent{dataByCategory.category.uid}">
+					<div class="tab-pane" id="sgnewsTab{dataByCategory.category.uid}">
 						<h4 class="tx-sgnews-tab-title">{dataByCategory.category.title}</h4>
 						<ul class="tx-sgnews-list tx-sgnews-list-{dataByCategory.category.uid} row" data-category="{dataByCategory.category.uid}">
 							<f:for each="{dataByCategory.newsMetaData}" as="newsMetaDataEntry">

Resources/Public/Sass/styles.scss

@@ -11,7 +11,7 @@
 	}
 }
 
-.tx-sgnews-categories-tabcontent {
+.tx-sgnews .tab-pane {
 	padding-top: 40px;
 }