From a930d7ae2e9d9a1f59eea74960700958f0ae896b Mon Sep 17 00:00:00 2001
From: Christopher Joe <flamer.ohr@gmail.com>
Date: Thu, 12 Oct 2017 16:49:19 +1300
Subject: [PATCH] BUG Fix up markup and classes to work better with flexbox

---
 .../Controllers/Includes/CMSMain_Content.ss   | 58 +++++++++----------
 .../CMS/Controllers/Includes/CMSMain_Tools.ss |  8 +--
 .../Includes/CMSPagesController_Content.ss    |  4 +-
 3 files changed, 32 insertions(+), 38 deletions(-)

diff --git a/templates/SilverStripe/CMS/Controllers/Includes/CMSMain_Content.ss b/templates/SilverStripe/CMS/Controllers/Includes/CMSMain_Content.ss
index 2e247ba7..67807e0f 100644
--- a/templates/SilverStripe/CMS/Controllers/Includes/CMSMain_Content.ss
+++ b/templates/SilverStripe/CMS/Controllers/Includes/CMSMain_Content.ss
@@ -1,40 +1,34 @@
 <div id="pages-controller-cms-content" class="has-panel cms-content flexbox-area-grow fill-width fill-height $BaseCSSClasses" data-layout-type="border" data-pjax-fragment="Content" data-ignore-tab-state="true">
-	<div class="fill-width fill-height flexbox-area-grow">
-		$Tools
+	$Tools
 
-		<div class="fill-height flexbox-area-grow">
-			<div class="cms-content-header north">
-				<div class="cms-content-header-nav fill-width vertical-align-items">
-                    <div class="cms-content-header-nav__left vertical-align-items flexbox-area-grow">
-                        <a href="$BreadcrumbsBackLink" class="btn btn-secondary btn--no-text font-icon-left-open-big hidden-lg-up toolbar__back-button"></a>
-                        <% include SilverStripe\\Admin\\CMSBreadcrumbs %>
-                    </div>
+	<div class="fill-height flexbox-area-grow">
+		<div class="cms-content-header north vertical-align-items fill-width">
+			<a href="$BreadcrumbsBackLink" class="btn btn-secondary btn--no-text font-icon-left-open-big hidden-lg-up toolbar__back-button"></a>
+			<% include SilverStripe\\Admin\\CMSBreadcrumbs %>
 
-					<div class="cms-content-header-tabs cms-tabset">
-						<ul class="cms-tabset-nav-primary nav nav-tabs">
-							<li class="nav-item content-treeview<% if $TabIdentifier == 'edit' %> ui-tabs-active<% end_if %>">
-								<a href="$LinkPageEdit" class="nav-link cms-panel-link" title="Form_EditForm" data-href="$LinkPageEdit">
-				  <%t SilverStripe\\CMS\\Controllers\\CMSMain.TabContent 'Content' %>
-								</a>
-							</li>
-							<li class="nav-item content-listview<% if $TabIdentifier == 'settings' %> ui-tabs-active<% end_if %>">
-								<a href="$LinkPageSettings" class="nav-link cms-panel-link" title="Form_EditForm" data-href="$LinkPageSettings">
-				  <%t SilverStripe\\CMS\\Controllers\\CMSMain.TabSettings 'Settings' %>
-								</a>
-							</li>
-							<li class="nav-item content-listview<% if $TabIdentifier == 'history' %> ui-tabs-active<% end_if %>">
-								<a href="$LinkPageHistory" class="nav-link cms-panel-link" title="Form_EditForm" data-href="$LinkPageHistory">
-				  <%t SilverStripe\\CMS\\Controllers\\CMSMain.TabHistory 'History' %>
-								</a>
-							</li>
-						</ul>
-					</div>
-				</div>
+			<div class="cms-content-header-tabs cms-tabset">
+				<ul class="cms-tabset-nav-primary nav nav-tabs">
+					<li class="nav-item content-treeview<% if $TabIdentifier == 'edit' %> ui-tabs-active<% end_if %>">
+						<a href="$LinkPageEdit" class="nav-link cms-panel-link" title="Form_EditForm" data-href="$LinkPageEdit">
+							<%t SilverStripe\\CMS\\Controllers\\CMSMain.TabContent 'Content' %>
+						</a>
+					</li>
+					<li class="nav-item content-listview<% if $TabIdentifier == 'settings' %> ui-tabs-active<% end_if %>">
+						<a href="$LinkPageSettings" class="nav-link cms-panel-link" title="Form_EditForm" data-href="$LinkPageSettings">
+							<%t SilverStripe\\CMS\\Controllers\\CMSMain.TabSettings 'Settings' %>
+						</a>
+					</li>
+					<li class="nav-item content-listview<% if $TabIdentifier == 'history' %> ui-tabs-active<% end_if %>">
+						<a href="$LinkPageHistory" class="nav-link cms-panel-link" title="Form_EditForm" data-href="$LinkPageHistory">
+							<%t SilverStripe\\CMS\\Controllers\\CMSMain.TabHistory 'History' %>
+						</a>
+					</li>
+				</ul>
 			</div>
+		</div>
 
-			<div class="flexbox-area-grow fill-height">
-				$EditForm
-			</div>
+		<div class="flexbox-area-grow fill-height">
+			$EditForm
 		</div>
 	</div>
 </div>
diff --git a/templates/SilverStripe/CMS/Controllers/Includes/CMSMain_Tools.ss b/templates/SilverStripe/CMS/Controllers/Includes/CMSMain_Tools.ss
index 104ac744..22a3a75f 100644
--- a/templates/SilverStripe/CMS/Controllers/Includes/CMSMain_Tools.ss
+++ b/templates/SilverStripe/CMS/Controllers/Includes/CMSMain_Tools.ss
@@ -1,10 +1,10 @@
 <div class="cms-content-tools fill-height cms-panel cms-panel-layout" data-expandOnClick="true" data-layout-type="border" id="cms-content-tools-CMSMain">
-	<div class="cms-content-header north">
-		<div class="cms-content-header-info vertical-align-items">
-			<div class="section-heading">
+	<div class="cms-content-header north vertical-align-items">
+		<div class="cms-content-header-info vertical-align-items fill-width">
+			<div class="section-heading flexbox-area-grow">
 				<span class="section-label"><a href="$LinkPages">{$MenuCurrentItem.Title}</a></span>
 			</div>
-            <% include SilverStripe\\CMS\\Controllers\\CMSMain_Filter %>
+			<% include SilverStripe\\CMS\\Controllers\\CMSMain_Filter %>
 		</div>
 	</div>
 	<div class="panel panel--scrollable flexbox-area-grow fill-height cms-panel-content">
diff --git a/templates/SilverStripe/CMS/Controllers/Includes/CMSPagesController_Content.ss b/templates/SilverStripe/CMS/Controllers/Includes/CMSPagesController_Content.ss
index 10f68324..630747b7 100644
--- a/templates/SilverStripe/CMS/Controllers/Includes/CMSPagesController_Content.ss
+++ b/templates/SilverStripe/CMS/Controllers/Includes/CMSPagesController_Content.ss
@@ -1,9 +1,9 @@
 <div id="pages-controller-cms-content" class="flexbox-area-grow fill-height cms-content $BaseCSSClasses" data-layout-type="border" data-pjax-fragment="Content">
 
-	<div class="cms-content-header north">
+	<div class="cms-content-header north vertical-align-items">
 		<div class="cms-content-header-info fill-width vertical-align-items">
 			<% include SilverStripe\\Admin\\CMSBreadcrumbs %>
-            <% include SilverStripe\\CMS\\Controllers\\CMSMain_Filter %>
+			<% include SilverStripe\\CMS\\Controllers\\CMSMain_Filter %>
 		</div>
 	</div>