BUG Fix up markup and classes to work better with flexbox

This commit is contained in:
Christopher Joe 2017-10-12 16:49:19 +13:00
parent acadcadbdf
commit a930d7ae2e
3 changed files with 32 additions and 38 deletions

View File

@ -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>

View File

@ -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">

View File

@ -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>