Delete legacy styles in Layout, move rest to CampaignAdmin. Convert to BEM

admin/client/dist/js/bundle.js

@@ -2414,12 +2414,10 @@ case"create":e=this.renderCreateView()
 break
 default:e=this.renderIndexView()}return e}},{key:"renderIndexView",value:function f(){var e=this.props.sectionConfig.form.EditForm.schemaUrl,t={title:S["default"]._t("Campaigns.ADDCAMPAIGN"),icon:"plus",
 handleClick:this.addCampaign.bind(this)},n={createFn:this.campaignListCreateFn.bind(this),schemaUrl:e}
-return p["default"].createElement("div",{className:"fill-height cms-campaigns","aria-expanded":"true"},p["default"].createElement(x["default"],null,p["default"].createElement(C["default"],{multiline:!0,
+return p["default"].createElement("div",{className:"fill-height","aria-expanded":"true"},p["default"].createElement(x["default"],null,p["default"].createElement(C["default"],{multiline:!0,crumbs:this.props.breadcrumbs
-crumbs:this.props.breadcrumbs})),p["default"].createElement("div",{className:"panel panel--padded panel--scrollable flexbox-area-grow"},p["default"].createElement("div",{className:"toolbar toolbar--content"
+})),p["default"].createElement("div",{className:"panel panel--padded panel--scrollable flexbox-area-grow"},p["default"].createElement("div",{className:"toolbar toolbar--content"},p["default"].createElement("div",{
-},p["default"].createElement("div",{className:"btn-toolbar"},p["default"].createElement(O["default"],t))),p["default"].createElement("div",{className:"campaign-admin"},p["default"].createElement(A["default"],n))))
+className:"btn-toolbar"},p["default"].createElement(O["default"],t))),p["default"].createElement(A["default"],n)))}},{key:"renderItemListView",value:function h(){var e={sectionConfig:this.props.sectionConfig,
-
+campaignId:this.props.params.id,itemListViewEndpoint:this.props.sectionConfig.itemListViewEndpoint,publishApi:this.publishApi,handleBackButtonClick:this.handleBackButtonClick.bind(this)}
-}},{key:"renderItemListView",value:function h(){var e={sectionConfig:this.props.sectionConfig,campaignId:this.props.params.id,itemListViewEndpoint:this.props.sectionConfig.itemListViewEndpoint,publishApi:this.publishApi,
-handleBackButtonClick:this.handleBackButtonClick.bind(this)}
 return p["default"].createElement(F["default"],e)}},{key:"renderDetailEditView",value:function m(){var e=this.props.sectionConfig.form.DetailEditForm.schemaUrl,t=e
 this.props.params.id>0&&(t=e+"/"+this.props.params.id)
 var n={createFn:this.campaignEditCreateFn.bind(this),schemaUrl:t}
@@ -2487,17 +2485,17 @@ var a=[]
 handleClickArg:i.ID},h["default"].createElement(M["default"],{item:i,campaign:e.props.record})))}),a.push(h["default"].createElement(S["default"],{key:f,groupid:f,title:d},c))})
 var s=[this.props.config.absoluteBaseUrl,this.props.config.sections["SilverStripe\\CMS\\Controllers\\CMSPagesController"].url].join(""),l=a.length?h["default"].createElement(O["default"],null,a):h["default"].createElement("div",{
 className:"alert alert-warning",role:"alert"},h["default"].createElement("strong",null,"This campaign is empty.")," You can add pages by selecting"," ",h["default"].createElement("em",null,"Add to campaign")," from within the ",h["default"].createElement("em",null,"More Options")," popup on"," ","the ",h["default"].createElement("a",{
-href:s},"edit page screen"),"."),u=["panel","panel--padded","panel--scrollable","flexbox-area-grow","campaign-items"]
+href:s},"edit page screen"),"."),u=["panel","panel--padded","panel--scrollable","flexbox-area-grow"]
-return h["default"].createElement("div",{className:"fill-width campaigns"},h["default"].createElement("div",{className:"fill-height campaign-items cms-content__left cms-campaigns","aria-expanded":"true"
+return h["default"].createElement("div",{className:"fill-width campaign-admin__campaign"},h["default"].createElement("div",{className:"fill-height campaign-admin__campaign-items","aria-expanded":"true"
 },h["default"].createElement(A["default"],{showBackButton:!0,handleBackButtonClick:this.props.handleBackButtonClick},h["default"].createElement(U["default"],{multiline:!0,crumbs:this.props.breadcrumbs})),h["default"].createElement("div",{
 className:u.join(" ")},l),h["default"].createElement("div",{className:"toolbar toolbar--south"},this.renderButtonToolbar())),h["default"].createElement(B["default"],{itemLinks:n,itemId:t}))}},{key:"handleItemSelected",
 value:function l(e,t){this.props.campaignActions.selectChangeSetItem(t)}},{key:"renderButtonToolbar",value:function u(){var e=this.getItems()
 if(!e||!e.length)return h["default"].createElement("div",{className:"btn-toolbar"})
 var t={}
 return"open"===this.props.record.State?t=c(t,{title:$["default"]._t("Campaigns.PUBLISHCAMPAIGN"),bootstrapButtonStyle:"primary",loading:this.props.campaign.isPublishing,handleClick:this.handlePublish,icon:"rocket"
-}):"published"===this.props.record.State&&(t=c(t,{title:$["default"]._t("Campaigns.REVERTCAMPAIGN"),bootstrapButtonStyle:"default",icon:"back-in-time",disabled:!0})),h["default"].createElement("div",{className:"btn-toolbar"
+}):"published"===this.props.record.State&&(t=c(t,{title:$["default"]._t("Campaigns.REVERTCAMPAIGN"),bootstrapButtonStyle:"secondary-outline",icon:"back-in-time",disabled:!0})),h["default"].createElement("div",{
-},h["default"].createElement(F["default"],t))}},{key:"getItems",value:function p(){return this.props.record&&this.props.record._embedded?this.props.record._embedded.items:null}},{key:"groupItemsForSet",
+className:"btn-toolbar"},h["default"].createElement(F["default"],t))}},{key:"getItems",value:function p(){return this.props.record&&this.props.record._embedded?this.props.record._embedded.items:null}},{
-value:function m(){var e={},t=this.getItems()
+key:"groupItemsForSet",value:function m(){var e={},t=this.getItems()
 return t?(t.forEach(function(t){var n=t.BaseClass
 e[n]||(e[n]={singular:t.Singular,plural:t.Plural,items:[]}),e[n].items.push(t)}),e):e}},{key:"handlePublish",value:function g(e){e.preventDefault(),this.props.campaignActions.publishCampaign(this.props.publishApi,this.props.treeClass,this.props.campaignId)
 
@@ -2591,8 +2589,7 @@ return this.props.itemLinks&&this.props.itemLinks.edit&&(i=this.props.itemLinks.
 className:"btn__title"},d["default"]._t("Preview.EDIT","Edit"))))),e=this.props.itemId?t?n&&0===n.indexOf("image/")?u["default"].createElement("div",{className:"preview__file-container panel--scrollable"
 },u["default"].createElement("img",{alt:t,className:"preview__file--fits-space",src:t})):u["default"].createElement("iframe",{className:"flexbox-area-grow preview__iframe",src:t}):u["default"].createElement("div",{
 className:"preview__overlay"},u["default"].createElement("h3",{className:"preview__overlay-text"},"There is no preview available for this item.")):u["default"].createElement("div",{className:"preview__overlay"
-},u["default"].createElement("h3",{className:"preview__overlay-text"},"No preview available.")),u["default"].createElement("div",{className:"flexbox-area-grow fill-height cms-content__right preview"},e,u["default"].createElement("a",{
+},u["default"].createElement("h3",{className:"preview__overlay-text"},"No preview available.")),u["default"].createElement("div",{className:"flexbox-area-grow fill-height preview"},e,u["default"].createElement("div",{
-href:"",className:"cms-content__back-btn font-icon-left-open-big"}),u["default"].createElement("div",{className:"toolbar toolbar--south"},u["default"].createElement("div",{className:"btn-toolbar"},o)))
+className:"toolbar toolbar--south"},u["default"].createElement("button",{className:"btn btn-secondary font-icon-left-open-big toolbar__back-button hidden-lg-up",type:"button"},"Back"),u["default"].createElement("div",{
-
+className:"btn-toolbar"},o)))}}]),t}(p["default"])
-}}]),t}(p["default"])
 h.propTypes={itemLinks:u["default"].PropTypes.object,itemId:u["default"].PropTypes.number},t["default"]=h}])

admin/client/dist/styles/bundle.css

@@ -3745,7 +3745,7 @@ pre code{
       -ms-user-select:none;
           user-select:none;
   border:1px solid transparent;
-  padding:.4615rem .7692rem;
+  padding:.3846rem .7692rem;
   font-size:1rem;
   line-height:1.539;
   border-radius:.23rem;
@@ -9027,7 +9027,7 @@ button.loading.ss-ui-action-constructive .ui-icon,input.loading.ss-ui-action-con
 }
 
 .ss-ui-button.ss-ui-button-constructive[class*=font-icon-],.ss-ui-button[class*=font-icon-],.ss-ui-button[class^=font-icon-]{
-  padding:.4615rem .7692rem;
+  padding:.3846rem .7692rem;
   vertical-align:middle;
   box-shadow:none;
   border:0;
@@ -15085,7 +15085,7 @@ fieldset+.btn-toolbar{
 }
 
 button.close{
-  padding:.4615rem .7692rem;
+  padding:.3846rem .7692rem;
 }
 
 .btn--top-right{
@@ -15243,8 +15243,8 @@ th:only-child .grid-field__sort{
   vertical-align:bottom;
   margin:0;
   float:right;
-  margin-top:-.4615rem;
+  margin-top:-.3846rem;
-  margin-bottom:-.4615rem;
+  margin-bottom:-.3846rem;
 }
 
 .grid-field .grid-field__filter-clear,.grid-field .grid-field__filter-submit{
@@ -15377,6 +15377,8 @@ div.grid-field__sort-field+.form__fieldgroup-item{
 
 .preview{
   position:relative;
+  background-color:#f6f7f8;
+  border-left:1px solid #ced3d9;
 }
 
 @media (max-width:991px){
@@ -15385,6 +15387,7 @@ div.grid-field__sort-field+.form__fieldgroup-item{
     right:0;
     z-index:2;
     width:100%;
+    border-left:0;
   }
 }
 
@@ -15494,15 +15497,22 @@ div.grid-field__sort-field+.form__fieldgroup-item{
   background-color:#f6f7f8;
 }
 
-.cms-backlink .toolbar__back-button,.toolbar__back-button{
+.toolbar__back-button{
   float:left;
   margin:.76925rem .6154rem .76925rem -.76925rem;
   padding-left:.3077rem;
-  padding-right:.3077rem;
-  border:0;
   color:#66727d;
 }
 
+.toolbar--south .toolbar__back-button{
+  margin-top:0;
+  margin-right:5px;
+}
+
+.toolbar__back-button.btn--no-text{
+  padding-right:.3077rem;
+}
+
 .nav-tabs{
   margin-bottom:1.5385rem;
 }
@@ -15960,62 +15970,6 @@ body,html{
   }
 }
 
-@media (max-width:991px){
-  .campaign-items{
-    width:100%;
-    z-index:1;
-  }
-}
-
-.campaigns{
-  position:relative;
-  height:100%;
-}
-
-.campaigns .cms-content--selected{
-  display:block;
-}
-
-.campaigns .cms-content__back-btn{
-  width:36px;
-  height:36px;
-  background-color:rgba(79,88,97,.8);
-  display:block;
-  position:absolute;
-  top:8px;
-  left:12px;
-  content:"5";
-  font-size:16px;
-  line-height:20px;
-  color:#fff;
-  padding:8px;
-  border-radius:50%;
-  font-family:silverstripe;
-  z-index:1;
-  cursor:pointer;
-}
-
-.campaigns .cms-content__back-btn:hover{
-  background-color:#4f5861;
-  text-decoration:none;
-}
-
-@media (min-width:992px){
-  .campaigns{
-    padding-left:300px;
-  }
-
-  .campaigns .cms-content__back-btn{
-    display:none;
-  }
-}
-
-@media (min-width:1200px){
-  .campaigns{
-    padding-left:448px;
-  }
-}
-
 .panel{
   margin-left:auto;
   margin-right:auto;
@@ -16092,6 +16046,22 @@ body,html{
   display:flex;
 }
 
+.campaign-admin__campaign{
+  position:relative;
+  height:100%;
+}
+
+.campaign-admin__campaign-items{
+  width:100%;
+  z-index:1;
+}
+
+@media (min-width:992px){
+  .campaign-admin__campaign-items{
+    width:300px;
+  }
+}
+
 .campaign-admin__item-links--has-links,.campaign-admin__item-links--is-linked{
   color:#29abe2;
   float:right;

admin/client/src/containers/CampaignAdmin/CampaignAdmin.scss

@@ -1,3 +1,19 @@
+// Required for preview position
+.campaign-admin__campaign {
+  position: relative;
+  height: 100%;
+}
+
+.campaign-admin__campaign-items {
+  width: 100%;
+  z-index: 1;
+
+  @include media-breakpoint-up(lg) {
+    width: $cms-panel-sm;
+  }
+}
+
+
 // Campaign items which have linked associations
 .campaign-admin__item-links--has-links,
 .campaign-admin__item-links--is-linked {

admin/client/src/containers/CampaignAdmin/CampaignAdminList.js

@@ -147,12 +147,12 @@ class CampaignAdminList extends SilverStripeComponent {
         </div>
       );
     const bodyClass = [
-      'panel', 'panel--padded', 'panel--scrollable', 'flexbox-area-grow', 'campaign-items',
+      'panel', 'panel--padded', 'panel--scrollable', 'flexbox-area-grow',
     ];
 
     return (
-      <div className="fill-width campaigns">
+      <div className="fill-width campaign-admin__campaign">
-        <div className="fill-height campaign-items cms-content__left cms-campaigns"
+        <div className="fill-height campaign-admin__campaign-items"
           aria-expanded="true"
         >
           <Toolbar showBackButton handleBackButtonClick={this.props.handleBackButtonClick}>
@@ -209,7 +209,7 @@ class CampaignAdminList extends SilverStripeComponent {
       // TODO Implement "revert" feature
       actionProps = Object.assign(actionProps, {
         title: i18n._t('Campaigns.REVERTCAMPAIGN'),
-        bootstrapButtonStyle: 'default',
+        bootstrapButtonStyle: 'secondary-outline',
         icon: 'back-in-time',
         disabled: true,
       });

admin/client/src/styles/_layout.scss

@@ -19,79 +19,14 @@ body {
   display: flex;
 }
 
+
+// TODO move out of layout
 @include media-breakpoint-down(md) {
   .cms-content.has-panel .cms-content-tools {
     display: none;
   }
 }
 
-.campaign-items {
-  @include media-breakpoint-down(md) {
-    width: 100%;
-    z-index: 1;
-  }
-}
-
-.campaigns { // TODO move to campaign container
-  position: relative;
-  height: 100%;
-
-  // Overlay preview if there isn't enough space for both items and preview
-  .cms-content--selected {
-    display: block;
-  }
-
-  // Back button for smaller screens, closes preview
-  .cms-content__back-btn {
-    width: 36px;
-    height: 36px;
-    background-color: rgba($gray-dark, 0.8);
-    display: block;
-    position: absolute;
-    top: 8px;
-    left: 12px;
-    content: "5";
-    font-size: 16px;
-    line-height: 20px;
-    color: $white;
-    padding: 8px;
-    border-radius: 50%;
-    font-family: silverstripe;
-    z-index: 1;
-    cursor: pointer;
-
-    &:hover {
-      background-color: $gray-dark;
-      text-decoration: none;
-    }
-  }
-
-  @include media-breakpoint-up(lg) {
-    padding-left: $cms-panel-sm;
-
-    // .cms-content__left {
-    //   width: $cms-panel-sm;
-    // }
-    //
-    // .cms-content__right {
-    //   display: block;
-    //   border-left: 1px solid $border-color;
-    // }
-
-    .cms-content__back-btn {
-      display: none;
-    }
-  }
-
-  @include media-breakpoint-up(xl) {
-    padding-left: $cms-panel-md;
-
-    // .cms-content__left {
-    //   width: $cms-panel-md;
-    // }
-  }
-}
-
 
 // Panels, basic holder for CMS content areas
 // Use .container-fluid if you want only padding left and right