Hide preview in campaigns, override list styles for mobile

admin/client/dist/js/bundle.js

@@ -2477,7 +2477,7 @@ key:"componentDidMount",value:function n(){var e=this.props.itemListViewEndpoint
 f(t.prototype.__proto__||Object.getPrototypeOf(t.prototype),"componentDidMount",this).call(this),this.setBreadcrumbs(),Object.keys(this.props.record).length||this.props.recordActions.fetchRecord(this.props.treeClass,"get",e).then(this.setBreadcrumbs)
 
 }},{key:"setBreadcrumbs",value:function i(){if(this.props.record){var e=[{text:$["default"]._t("Campaigns.CAMPAIGN","Campaigns"),href:this.props.sectionConfig.url}]
-e.push({text:this.props.record.Name,href:this.props.sectionConfig.url+"/set/"+this.props.campaignId+"/show"}),this.props.breadcrumbsActions.setBreadcrumbs(e)}}},{key:"render",value:function r(){var e=this,t=this.props.campaign.changeSetItemId,n=null,i=t?"":"campaign-admin__campaign--no-selected-item",r=this.props.campaignId,o=this.props.record,a=this.groupItemsForSet(),s=[]
+e.push({text:this.props.record.Name,href:this.props.sectionConfig.url+"/set/"+this.props.campaignId+"/show"}),this.props.breadcrumbsActions.setBreadcrumbs(e)}}},{key:"render",value:function r(){var e=this,t=this.props.campaign.changeSetItemId,n=null,i=t?"":"campaign-admin__campaign--hide-preview",r=this.props.campaignId,o=this.props.record,a=this.groupItemsForSet(),s=[]
 
 
 Object.keys(a).forEach(function(i){var l=a[i],u=l.items.length,c=[],d=u+" "+(1===u?l.singular:l.plural),f="Set_"+r+"_Group_"+i
@@ -2597,7 +2597,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 preview"},e,u["default"].createElement("div",{
+},u["default"].createElement("h3",{className:"preview__overlay-text"},"No preview available.")),u["default"].createElement("div",{className:"flexbox-area-grow fill-height preview campaign-admin__campaign-preview"
-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",onClick:this.handleBackClick
+},e,u["default"].createElement("div",{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"])
+onClick:this.handleBackClick},"Back"),u["default"].createElement("div",{className:"btn-toolbar"},o)))}}]),t}(p["default"])
 h.propTypes={itemLinks:u["default"].PropTypes.object,itemId:u["default"].PropTypes.number,onBack:u["default"].PropTypes.func},t["default"]=h}])

admin/client/dist/styles/bundle.css

@@ -15965,7 +15965,7 @@ body,html{
 }
 
 @media (max-width:991px){
-  .cms-content.has-panel .cms-content-tools{
+  .CMSPageEditController.has-panel .cms-content-tools,.CMSPageSettingsController.has-panel .cms-content-tools{
     display:none;
   }
 }
@@ -16052,13 +16052,20 @@ body,html{
 }
 
 @media (max-width:991px){
-  .campaign-admin__campaign--no-selected-item .preview{
+  .campaign-admin__campaign.campaign-admin__campaign--hide-preview .campaign-admin__campaign-preview{
     display:none;
   }
 
-  .campaign-admin__campaign--no-selected-item .list-group-item.active{
+  .campaign-admin__campaign .list-group-item.active{
-    background-color:inherit;
+    background-color:#fff;
-    color:inherit;
+    color:#4f5861;
+    z-index:0;
+  }
+
+  .campaign-admin__campaign .list-group-item.active:hover{
+    background-color:#f5f5f5;
+    color:#4f5861;
+    border-color:#ddd;
   }
 }
 

admin/client/src/components/ListGroup/ListGroup.scss

@@ -34,7 +34,7 @@
       color: $white;
       opacity: 1;
     }
-	}
+  }
 }
 
 .list-group-item-heading {

admin/client/src/components/Preview/Preview.js

@@ -75,7 +75,7 @@ class Preview extends SilverStripeComponent {
 
     // Combine elements
     return (
-      <div className="flexbox-area-grow fill-height preview">
+      <div className="flexbox-area-grow fill-height preview campaign-admin__campaign-preview">
         {body}
         <div className="toolbar toolbar--south">
           <button

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

@@ -2,19 +2,27 @@
 .campaign-admin__campaign {
   position: relative;
   height: 100%;
-}
 
-@include media-breakpoint-down(md) {
+  // On smaller screens hide the preview and show list of items with nothing selected
-  .campaign-admin__campaign--no-selected-item {
+  @include media-breakpoint-down(md) {
-    .preview {
+    &.campaign-admin__campaign--hide-preview .campaign-admin__campaign-preview {
       display: none;
     }
+
     .list-group-item.active {
-      background-color: inherit;
+      background-color: $list-group-bg;
-      color: inherit;
+      color: $list-group-link-color;
+      z-index: 0;
+
+      &:hover {
+        background-color: $list-group-hover-bg;
+        color: $list-group-link-color;
+        border-color: $list-group-border-color;
+      }
     }
   }
 }
+
 .campaign-admin__campaign-items {
   width: 100%;
   z-index: 1;

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

@@ -73,7 +73,7 @@ class CampaignAdminList extends SilverStripeComponent {
   render() {
     let itemId = this.props.campaign.changeSetItemId;
     let itemLinks = null;
-    const selectedClass = (!itemId) ? 'campaign-admin__campaign--no-selected-item' : '';
+    const selectedClass = (!itemId) ? 'campaign-admin__campaign--hide-preview' : '';
     const campaignId = this.props.campaignId;
     const campaign = this.props.record;