FIX Javascript and SCSS linting and removed unused images

client/dist/js/main.bundle.js

@@ -74,134 +74,139 @@ module.exports = jQuery;
 
 /***/ }),
 /* 1 */
-/***/ (function(module, exports, __webpack_require__) {
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-/* WEBPACK VAR INJECTION */(function(jQuery) {(function ($) {
+"use strict";
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
 
-    $.entwine('ss', function ($) {
+
-        $('.cms-content-fields > #Form_EditForm_error').entwine({
+
-            'onadd': function onadd() {
+__WEBPACK_IMPORTED_MODULE_0_jquery___default.a.entwine('ss', function ($) {
-                var $target = $('.blog-admin-outer');
+    $('.cms-content-fields > #Form_EditForm_error').entwine({
-                if ($target.length == 1) {
+        'onadd': function onadd() {
-                    $target.prepend(this);
+            var $target = $('.blog-admin-outer');
-                }
+            if ($target.length == 1) {
+                $target.prepend(this);
             }
-        });
+        }
-
-        $('.toggle-description').entwine({
-            'onadd': function onadd() {
-                var $this = $(this);
-
-                if ($this.hasClass('toggle-description-enabled')) {
-                    return;
-                }
-
-                $this.addClass('toggle-description-enabled');
-
-                var shown = false;
-                var $helpInfo = $this.closest('.field').find('.form-text');
-
-                $this.on('click', function () {
-                    $helpInfo[shown ? 'hide' : 'show']();
-                    $this.toggleClass('toggle-description-shown');
-                    shown = !shown;
-                });
-
-                $helpInfo.hide();
-
-                $this.parent().addClass('toggle-description-correct-right');
-                $this.parent().prev('.middleColumn').addClass('toggle-description-correct-middle');
-                $this.parent().next('.description').addClass('toggle-description-correct-description');
-            }
-        });
-
-        $('.MergeAction').entwine({
-            'onadd': function onadd() {
-                var $this = $(this);
-
-                $this.on('click', 'select', function () {
-                    return false;
-                });
-
-                $this.children('button').each(function (i, button) {
-                    var $button = $(button);
-                    var $select = $button.prev('select');
-
-                    $button.before('<input type="hidden" name="' + $button.attr('data-target') + '" value="' + $select.val() + '" />');
-                });
-
-                $this.on('change', 'select', function (e) {
-                    var $target = $(e.target);
-
-                    $target.next('input').val($target.val());
-                });
-
-                $this.children('button, select').hide();
-
-                $this.on('click', '.MergeActionReveal', function (e) {
-                    var $target = $(e.target);
-
-                    $target.parent().children('button, select').show();
-                    $target.hide();
-
-                    return false;
-                });
-            }
-        });
-
-        $('.blog-admin-sidebar.cms-panel').entwine({
-            MinInnerWidth: 620,
-            onadd: function onadd() {
-                this._super();
-                this.updateLayout();
-
-                if (!this.hasClass('collapsed') && $(".blog-admin-outer").width() < this.getMinInnerWidth()) {
-                    this.collapsePanel();
-                }
-
-                window.onresize = function () {
-                    this.updateLayout();
-                }.bind(this);
-            },
-            togglePanel: function togglePanel(bool, silent) {
-                this._super(bool, silent);
-                this.updateLayout();
-            },
-
-            updateLayout: function updateLayout() {
-                $(this).css('height', '100%');
-                var currentHeight = $(this).outerHeight();
-                var bottomHeight = $('.cms-content-actions').eq(0).outerHeight();
-                $(this).css('height', currentHeight - bottomHeight + "px");
-                $(this).css('bottom', bottomHeight + "px");
-
-                $('.cms-container').updateLayoutOptions({
-                    minContentWidth: 820 + this.width()
-                });
-            }
-        });
     });
-})(jQuery);
+
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0)))
+    $('.toggle-description').entwine({
+        'onadd': function onadd() {
+            var $this = $(this);
+
+            if ($this.hasClass('toggle-description-enabled')) {
+                return;
+            }
+
+            $this.addClass('toggle-description-enabled');
+
+            var shown = false;
+            var $helpInfo = $this.closest('.field').find('.form-text');
+
+            $this.on('click', function () {
+                $helpInfo[shown ? 'hide' : 'show']();
+                $this.toggleClass('toggle-description-shown');
+                shown = !shown;
+            });
+
+            $helpInfo.hide();
+
+            $this.parent().addClass('toggle-description-correct-right');
+            $this.parent().prev('.middleColumn').addClass('toggle-description-correct-middle');
+            $this.parent().next('.description').addClass('toggle-description-correct-description');
+        }
+    });
+
+    $('.MergeAction').entwine({
+        'onadd': function onadd() {
+            var $this = $(this);
+
+            $this.on('click', 'select', function () {
+                return false;
+            });
+
+            $this.children('button').each(function (i, button) {
+                var $button = $(button);
+                var $select = $button.prev('select');
+
+                $button.before('<input type="hidden" name="' + $button.attr('data-target') + '" value="' + $select.val() + '" />');
+            });
+
+            $this.on('change', 'select', function (e) {
+                var $target = $(e.target);
+
+                $target.next('input').val($target.val());
+            });
+
+            $this.children('button, select').hide();
+
+            $this.on('click', '.MergeActionReveal', function (e) {
+                var $target = $(e.target);
+
+                $target.parent().children('button, select').show();
+                $target.hide();
+
+                return false;
+            });
+        }
+    });
+
+    $('.blog-admin-sidebar.cms-panel').entwine({
+        MinInnerWidth: 620,
+        onadd: function onadd() {
+            this._super();
+            this.updateLayout();
+
+            if (!this.hasClass('collapsed') && $(".blog-admin-outer").width() < this.getMinInnerWidth()) {
+                this.collapsePanel();
+            }
+
+            window.onresize = function () {
+                this.updateLayout();
+            }.bind(this);
+        },
+        togglePanel: function togglePanel(bool, silent) {
+            this._super(bool, silent);
+            this.updateLayout();
+        },
+
+        updateLayout: function updateLayout() {
+            $(this).css('height', '100%');
+            var currentHeight = $(this).outerHeight();
+            var bottomHeight = $('.cms-content-actions').eq(0).outerHeight();
+            $(this).css('height', currentHeight - bottomHeight + "px");
+            $(this).css('bottom', bottomHeight + "px");
+
+            $('.cms-container').updateLayoutOptions({
+                minContentWidth: 820 + this.width()
+            });
+        }
+    });
+});
 
 /***/ }),
 /* 2 */
-/***/ (function(module, exports, __webpack_require__) {
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-/* WEBPACK VAR INJECTION */(function(jQuery) {(function ($) {
+"use strict";
-    $.entwine('ss', function ($) {
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
-        $('.add-existing-autocompleter input.text').entwine({
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
-            'onkeydown': function onkeydown(e) {
+
-                if (e.which == 13) {
+
-                    $parent = $(this).parents('.add-existing-autocompleter');
+__WEBPACK_IMPORTED_MODULE_0_jquery___default.a.entwine('ss', function ($) {
-                    $parent.find('button[type="submit"]').click();
+    $('.add-existing-autocompleter input.text').entwine({
-                    return false;
+        'onkeydown': function onkeydown(e) {
-                }
+            if (e.which === 13) {
+                var $parent = $(this).parents('.add-existing-autocompleter');
+                $parent.find('button[type="submit"]').click();
+                e.preventDefault();
+                return false;
             }
-        });
+        }
     });
-})(jQuery);
+});
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0)))
 
 /***/ }),
 /* 3 */
@@ -209,10 +214,8 @@ module.exports = jQuery;
 
 "use strict";
 Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_bundles_cms_js__ = __webpack_require__(1);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_bundles_cms__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_bundles_cms_js___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_bundles_cms_js__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_bundles_gridfieldaddbydbfield__ = __webpack_require__(2);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_bundles_gridfieldaddbydbfield_js__ = __webpack_require__(2);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_bundles_gridfieldaddbydbfield_js___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_bundles_gridfieldaddbydbfield_js__);
 
 
 

client/dist/styles/main.css

@@ -1,2 +1,2 @@
-.no-sidebar .content-container.size3of4{width:75%}.blog-entry .post-image img{width:98.75%}.blog-sidebar .WidgetHolder ul{margin-left:0}.blog-sidebar .WidgetHolder ul li,ul.blogTagCloud{list-style-type:none}ul.blogTagCloud{clear:both}ul.blogTagCloud li{float:left;display:inline;padding-right:8px}ul.blogTagCloud li a span{float:left;line-height:30px;text-align:center;padding:0}ul.blogTagCloud .tagCount10{font-size:26pt}ul.blogTagCloud .tagCount9{font-size:24pt}ul.blogTagCloud .tagCount8{font-size:22pt}ul.blogTagCloud .tagCount7{font-size:20pt}ul.blogTagCloud .tagCount6{font-size:18pt}ul.blogTagCloud .tagCount5{font-size:16pt}ul.blogTagCloud .tagCount4{font-size:14pt}ul.blogTagCloud .tagCount3{font-size:12pt}ul.blogTagCloud .tagCount2{font-size:10pt}ul.blogTagCloud .tagCount1{font-size:8pt}#FeaturedImage .middleColumn{clear:none;float:left}.has-panel .cms-content-tools.blog-admin-sidebar{width:280px;border-right:none;border-left:1px solid #c0c0c2;position:absolute!important;right:0;top:0;height:100%}.has-panel .cms-content-tools.blog-admin-sidebar .cms-panel-toggle a{text-align:left;margin:0}.has-panel .cms-content-tools.blog-admin-sidebar .cms-panel-toggle.south{border-top:1px solid #aaa}.has-panel .cms-content-tools.blog-admin-sidebar~.blog-admin-outer{width:100%;padding-right:280px;position:absolute;height:100%;overflow-y:hidden;overflow-x:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}.has-panel .cms-content-tools.blog-admin-sidebar~.blog-admin-outer>.ss-tabset{position:relative;overflow:auto;height:100%;width:100%}.has-panel .cms-content-tools.blog-admin-sidebar~.blog-admin-outer>.ss-tabset #Title label{float:none}.has-panel .cms-content-tools.blog-admin-sidebar~.blog-admin-outer>.ss-tabset #Title .middleColumn,.has-panel .cms-content-tools.blog-admin-sidebar~.blog-admin-outer>.ss-tabset #Title input{width:100%;max-width:100%;margin-left:0}.has-panel .cms-content-tools.blog-admin-sidebar .cms-content-view>.field+.field{margin-top:10px}.has-panel .cms-content-tools.blog-admin-sidebar .cms-content-view>.field.urlsegment .preview{padding-top:0;line-height:25px}.has-panel .cms-content-tools.blog-admin-sidebar .cms-content-view>.field.urlsegment .edit{float:right}.has-panel .cms-content-tools.blog-admin-sidebar .cms-content-view>.field.datetime>.middleColumn>.date{width:60%}.has-panel .cms-content-tools.blog-admin-sidebar .cms-content-view>.field.datetime>.middleColumn>.time{width:36%;float:right}.has-panel .cms-content-tools.blog-admin-sidebar .cms-content-view>.field.datetime>.middleColumn .middleColumn,.has-panel .cms-content-tools.blog-admin-sidebar .cms-content-view>.field.datetime>.middleColumn input{width:100%}.has-panel .cms-content-tools.blog-admin-sidebar.collapsed~.blog-admin-outer{padding-right:41px}.has-panel .cms-content-tools.blog-admin-sidebar.collapsed~.blog-admin-outer #Root_Main{margin-right:15px}.has-panel .cms-content-tools.blog-admin-sidebar.cms-content-tools .cms-panel-content{width:auto}.toggle-description{text-indent:-1000000px;display:inline-block;width:20px;height:20px;margin-left:4px;cursor:pointer}.middleColumn.toggle-description-correct-middle{margin-left:0;float:left;width:416px}.tab-content .field p.toggle-description-correct-right{display:inline-block;margin-left:0;padding-left:0;clear:none;float:left}.description.toggle-description-correct-description{width:416px;padding:12px 0}.custom-summary .ui-accordion-content .field{margin:0}.custom-summary .ui-accordion-content,.custom-summary .ui-accordion-content .field{padding:0}.custom-summary .ui-icon-triangle-1-e{background-position:-16px -128px}.cms table.ss-gridfield-table tr td.MergeAction{width:225px}.cms table.ss-gridfield-table tr td.MergeAction a{display:block;height:100%;width:100%}.cms table.ss-gridfield-table tr td.MergeAction select{width:150px}.cms-content-actions,.cms-preview-controls{z-index:999}.blog-cms-categorisation .MergeActionReveal{margin-left:10px}.blog-cms-categorisation .toolbar--content{margin-top:0}.blog-cms-categorisation .MergeActionReveal:after{content:"";display:inline-block;height:16px;width:16px;margin-left:4px}.blog-cms-categorisation button.action{margin-left:5px}
+.no-sidebar .content-container.size3of4{width:75%}.blog-entry .post-image img{width:98.75%}.blog-sidebar .WidgetHolder ul{margin-left:0}.blog-sidebar .WidgetHolder ul li,ul.blogTagCloud{list-style-type:none}ul.blogTagCloud{clear:both}ul.blogTagCloud li{float:left;display:inline;padding-right:8px}ul.blogTagCloud li a span{float:left;line-height:30px;text-align:center;padding:0}ul.blogTagCloud .tagCount10{font-size:26pt}ul.blogTagCloud .tagCount9{font-size:24pt}ul.blogTagCloud .tagCount8{font-size:22pt}ul.blogTagCloud .tagCount7{font-size:20pt}ul.blogTagCloud .tagCount6{font-size:18pt}ul.blogTagCloud .tagCount5{font-size:16pt}ul.blogTagCloud .tagCount4{font-size:14pt}ul.blogTagCloud .tagCount3{font-size:12pt}ul.blogTagCloud .tagCount2{font-size:10pt}ul.blogTagCloud .tagCount1{font-size:8pt}#FeaturedImage .middleColumn{clear:none;float:left}.has-panel .cms-content-tools.blog-admin-sidebar{width:280px;border-right:0;border-left:1px solid #c0c0c2;position:absolute!important;right:0;top:0;height:100%}.has-panel .cms-content-tools.blog-admin-sidebar .cms-panel-toggle a{text-align:left;margin:0}.has-panel .cms-content-tools.blog-admin-sidebar .cms-panel-toggle.south{border-top:1px solid #aaa}.has-panel .cms-content-tools.blog-admin-sidebar~.blog-admin-outer{width:100%;padding-right:280px;position:absolute;height:100%;overflow-y:hidden;overflow-x:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}.has-panel .cms-content-tools.blog-admin-sidebar~.blog-admin-outer>.ss-tabset{position:relative;overflow:auto;height:100%;width:100%}.has-panel .cms-content-tools.blog-admin-sidebar~.blog-admin-outer>.ss-tabset #Title label{float:none}.has-panel .cms-content-tools.blog-admin-sidebar~.blog-admin-outer>.ss-tabset #Title .middleColumn,.has-panel .cms-content-tools.blog-admin-sidebar~.blog-admin-outer>.ss-tabset #Title input{width:100%;max-width:100%;margin-left:0}.has-panel .cms-content-tools.blog-admin-sidebar .cms-content-view>.field+.field{margin-top:10px}.has-panel .cms-content-tools.blog-admin-sidebar .cms-content-view>.field.urlsegment .preview{padding-top:0;line-height:25px}.has-panel .cms-content-tools.blog-admin-sidebar .cms-content-view>.field.urlsegment .edit{float:right}.has-panel .cms-content-tools.blog-admin-sidebar .cms-content-view>.field.datetime>.middleColumn>.date{width:60%}.has-panel .cms-content-tools.blog-admin-sidebar .cms-content-view>.field.datetime>.middleColumn>.time{width:36%;float:right}.has-panel .cms-content-tools.blog-admin-sidebar .cms-content-view>.field.datetime>.middleColumn .middleColumn,.has-panel .cms-content-tools.blog-admin-sidebar .cms-content-view>.field.datetime>.middleColumn input{width:100%}.has-panel .cms-content-tools.blog-admin-sidebar.collapsed~.blog-admin-outer{padding-right:41px}.has-panel .cms-content-tools.blog-admin-sidebar.collapsed~.blog-admin-outer #Root_Main{margin-right:15px}.has-panel .cms-content-tools.blog-admin-sidebar.cms-content-tools .cms-panel-content{width:auto}.toggle-description{display:inline-block;font-size:1.2rem;width:20px;height:20px;margin-top:1px;cursor:pointer}.middleColumn.toggle-description-correct-middle{margin-left:0;float:left;width:416px}.tab-content .field p.toggle-description-correct-right{display:inline-block;margin-left:0;padding-left:0;clear:none;float:left}.description.toggle-description-correct-description{width:416px;padding:12px 0}.custom-summary .ui-accordion-content,.custom-summary .ui-accordion-content .field{padding:0}.custom-summary .ui-icon-triangle-1-e{background-position:-16px -128px}.cms table.ss-gridfield-table tr td.MergeAction{width:225px}.cms table.ss-gridfield-table tr td.MergeAction a{display:block;height:100%;width:100%}.cms table.ss-gridfield-table tr td.MergeAction select{width:150px}.cms-content-actions,.cms-preview-controls{z-index:999}.blog-cms-categorisation .toolbar--content{margin-top:0}.blog-cms-categorisation .MergeActionReveal:after{content:"@";font-family:silverstripe;display:inline-block;position:relative;margin-left:10px;top:3px}.blog-cms-categorisation .blog-merge-action{margin-top:5px}
 /*# sourceMappingURL=main.css.map*/

client/src/bundles/cms.js

@@ -1,144 +1,142 @@
-(function ($) {
+/* global window */
+import jQuery from 'jquery';
 
-    $.entwine('ss', function ($) {
+jQuery.entwine('ss', ($) => {
-
+    /**
-        /**
+     * The page success/error message sits outside of the html block
-         * The page success/error message sits outside of the html block
+     * containing the sidebar and cms fields. This means it overflows
-         * containing the sidebar and cms fields. This means it overflows
+     * underneath the sidebar.
-         * underneath the sidebar.
+     *
-         *
+     * @see https://github.com/silverstripe/silverstripe-blog/issues/210
-         * @see https://github.com/silverstripe/silverstripe-blog/issues/210
+     */
-         */
+    $('.cms-content-fields > #Form_EditForm_error').entwine({
-        $('.cms-content-fields > #Form_EditForm_error').entwine({
+        'onadd': function () {
-            'onadd': function () {
+            var $target = $('.blog-admin-outer');
-                var $target = $('.blog-admin-outer');
+            if ($target.length == 1) {
-                if ($target.length == 1) {
+                $target.prepend(this);
-                    $target.prepend(this);
-                }
             }
-        });
+        }
-
-        /**
-         * Register expandable help text functions with fields.
-         */
-        $('.toggle-description').entwine({
-            'onadd': function () {
-                var $this = $(this);
-
-                /**
-                 * Prevent multiple events being added.
-                 */
-                if ($this.hasClass('toggle-description-enabled')) {
-                    return;
-                }
-
-                $this.addClass('toggle-description-enabled');
-
-                /**
-                 * Toggle next description when button is clicked.
-                 */
-                var shown = false;
-                var $helpInfo = $this.closest('.field').find('.form-text');
-
-                $this.on('click', function () {
-                    $helpInfo[shown ? 'hide' : 'show']();
-                    $this.toggleClass('toggle-description-shown');
-                    shown = !shown;
-                });
-
-                /**
-                 * Hide next description by default.
-                 */
-                $helpInfo.hide();
-
-                /**
-                 * Add classes to correct inherited layout issues in a small context.
-                 */
-                $this.parent().addClass('toggle-description-correct-right');
-                $this.parent().prev('.middleColumn').addClass('toggle-description-correct-middle');
-                $this.parent().next('.description').addClass('toggle-description-correct-description');
-            }
-        });
-
-        /**
-         * Custom merge actions for tags and categories
-         */
-        $('.MergeAction').entwine({
-            'onadd': function () {
-                var $this = $(this);
-
-                $this.on('click', 'select', function () {
-                    return false;
-                });
-
-                $this.children('button').each(function (i, button) {
-                    var $button = $(button);
-                    var $select = $button.prev('select');
-
-                    $button.before('<input type="hidden" name="' + $button.attr('data-target') + '" value="' + $select.val() + '" />');
-                });
-
-                $this.on('change', 'select', function (e) {
-                    var $target = $(e.target);
-
-                    $target.next('input').val($target.val());
-                });
-
-                $this.children('button, select').hide();
-
-                $this.on('click', '.MergeActionReveal', function (e) {
-                    var $target = $(e.target);
-
-                    $target.parent().children('button, select').show();
-                    $target.hide();
-
-                    return false;
-                });
-            }
-        });
-
-        /**
-         * Customise the cms-panel behaviour for blog sidebar
-         *
-         * see LeftAndMain.Panel.js for base behaviour
-         */
-        $('.blog-admin-sidebar.cms-panel').entwine({
-            MinInnerWidth: 620,
-            onadd: function () {
-                this._super();
-                this.updateLayout();
-
-                // If this panel is open and the left hand column is smaller than the minimum, contract it instead
-                if (!this.hasClass('collapsed') && ($(".blog-admin-outer").width() < this.getMinInnerWidth())) {
-                    this.collapsePanel();
-                }
-
-                window.onresize = function () {
-                    this.updateLayout();
-                }.bind(this);
-            },
-            togglePanel: function (bool, silent) {
-                this._super(bool, silent);
-                this.updateLayout();
-            },
-            /**
-             * Adjust minimum width of content to account for extra panel
-             *
-             * @returns {undefined}
-             */
-            updateLayout: function () {
-                $(this).css('height', '100%');
-                var currentHeight = $(this).outerHeight();
-                var bottomHeight = $('.cms-content-actions').eq(0).outerHeight();
-                $(this).css('height', (currentHeight - bottomHeight) +  "px");
-                $(this).css('bottom', bottomHeight + "px");
-
-                $('.cms-container').updateLayoutOptions({
-                    minContentWidth: 820 + this.width()
-                });
-
-            }
-        });
-
     });
-})(jQuery);
+
+    /**
+     * Register expandable help text functions with fields.
+     */
+    $('.toggle-description').entwine({
+        'onadd': function () {
+            var $this = $(this);
+
+            /**
+             * Prevent multiple events being added.
+             */
+            if ($this.hasClass('toggle-description-enabled')) {
+                return;
+            }
+
+            $this.addClass('toggle-description-enabled');
+
+            /**
+             * Toggle next description when button is clicked.
+             */
+            var shown = false;
+            var $helpInfo = $this.closest('.field').find('.form-text');
+
+            $this.on('click', function () {
+                $helpInfo[shown ? 'hide' : 'show']();
+                $this.toggleClass('toggle-description-shown');
+                shown = !shown;
+            });
+
+            /**
+             * Hide next description by default.
+             */
+            $helpInfo.hide();
+
+            /**
+             * Add classes to correct inherited layout issues in a small context.
+             */
+            $this.parent().addClass('toggle-description-correct-right');
+            $this.parent().prev('.middleColumn').addClass('toggle-description-correct-middle');
+            $this.parent().next('.description').addClass('toggle-description-correct-description');
+        }
+    });
+
+    /**
+     * Custom merge actions for tags and categories
+     */
+    $('.MergeAction').entwine({
+        'onadd': function () {
+            var $this = $(this);
+
+            $this.on('click', 'select', function () {
+                return false;
+            });
+
+            $this.children('button').each(function (i, button) {
+                var $button = $(button);
+                var $select = $button.prev('select');
+
+                $button.before('<input type="hidden" name="' + $button.attr('data-target') + '" value="' + $select.val() + '" />');
+            });
+
+            $this.on('change', 'select', function (e) {
+                var $target = $(e.target);
+
+                $target.next('input').val($target.val());
+            });
+
+            $this.children('button, select').hide();
+
+            $this.on('click', '.MergeActionReveal', function (e) {
+                var $target = $(e.target);
+
+                $target.parent().children('button, select').show();
+                $target.hide();
+
+                return false;
+            });
+        }
+    });
+
+    /**
+     * Customise the cms-panel behaviour for blog sidebar
+     *
+     * see LeftAndMain.Panel.js for base behaviour
+     */
+    $('.blog-admin-sidebar.cms-panel').entwine({
+        MinInnerWidth: 620,
+        onadd: function () {
+            this._super();
+            this.updateLayout();
+
+            // If this panel is open and the left hand column is smaller than the minimum, contract it instead
+            if (!this.hasClass('collapsed') && ($(".blog-admin-outer").width() < this.getMinInnerWidth())) {
+                this.collapsePanel();
+            }
+
+            window.onresize = function () {
+                this.updateLayout();
+            }.bind(this);
+        },
+        togglePanel: function (bool, silent) {
+            this._super(bool, silent);
+            this.updateLayout();
+        },
+        /**
+         * Adjust minimum width of content to account for extra panel
+         *
+         * @returns {undefined}
+         */
+        updateLayout: function () {
+            $(this).css('height', '100%');
+            var currentHeight = $(this).outerHeight();
+            var bottomHeight = $('.cms-content-actions').eq(0).outerHeight();
+            $(this).css('height', (currentHeight - bottomHeight) +  "px");
+            $(this).css('bottom', bottomHeight + "px");
+
+            $('.cms-container').updateLayoutOptions({
+                minContentWidth: 820 + this.width()
+            });
+
+        }
+    });
+});

client/src/bundles/gridfieldaddbydbfield.js

@@ -1,16 +1,17 @@
-(function ($) {
+import jQuery from 'jquery';
-    $.entwine('ss', function ($) {
+
-        /**
+jQuery.entwine('ss', ($) => {
-         * Prevent the CMS hijacking the return key
+    /**
-         */
+     * Prevent the CMS hijacking the return key
-        $('.add-existing-autocompleter input.text').entwine({
+     */
-            'onkeydown': function (e) {
+    $('.add-existing-autocompleter input.text').entwine({
-                if (e.which == 13) {
+        'onkeydown': function (e) {
-                    $parent = $(this).parents('.add-existing-autocompleter');
+            if (e.which === 13) {
-                    $parent.find('button[type="submit"]').click();
+                const $parent = $(this).parents('.add-existing-autocompleter');
-                    return false;
+                $parent.find('button[type="submit"]').click();
-                }
+                e.preventDefault();
+                return false;
             }
-        });
+        }
     });
-})(jQuery);
+});

client/src/main.js

@@ -1,2 +1,2 @@
-import 'bundles/cms.js';
+import 'bundles/cms';
-import 'bundles/gridfieldaddbydbfield.js';
+import 'bundles/gridfieldaddbydbfield';

client/src/styles/blog.scss

@@ -1,75 +1,76 @@
 .no-sidebar .content-container.size3of4 {
-    width: 75%;
+  width: 75%;
 }
 
 .blog-entry .post-image img {
-    width: 98.75%;
+  width: 98.75%;
 }
 
 .blog-sidebar .WidgetHolder ul {
-    margin-left: 0;
+  margin-left: 0;
 
-	li {
+  li {
-        list-style-type: none;
+    list-style-type: none;
-    }
+  }
 }
 
 // tag cloud related
-$baseTagFontSize:4pt;
+$base_tag_font_size: 4pt;
 
 ul.blogTagCloud {
-	list-style-type: none;
+  list-style-type: none;
-	clear: both;
+  clear: both;
 
-	li {
+  li {
-		float: left;
+    float: left;
-		display: inline;
+    display: inline;
-        padding-right: 8px;
+    padding-right: 8px;
 
-        a span {
+    a span {
-            float: left;
+      float: left;
-            line-height: 30px; text-align: center;
+      line-height: 30px;
-            padding: 0px;
+      text-align: center;
-        }
+      padding: 0;
-	}
+    }
+  }
 
-	.tagCount10 {
+  .tagCount10 {
-		font-size: $baseTagFontSize+22pt;
+    font-size: $base_tag_font_size + 22pt;
-	}
+  }
 
-	.tagCount9 {
+  .tagCount9 {
-		font-size: $baseTagFontSize+20pt;
+    font-size: $base_tag_font_size + 20pt;
-	}
+  }
 
-	.tagCount8 {
+  .tagCount8 {
-		font-size: $baseTagFontSize+18pt;
+    font-size: $base_tag_font_size + 18pt;
-	}
+  }
 
-	.tagCount7 {
+  .tagCount7 {
-		font-size: $baseTagFontSize+16pt;
+    font-size: $base_tag_font_size + 16pt;
-	}
+  }
 
-	.tagCount6 {
+  .tagCount6 {
-		font-size: $baseTagFontSize+14pt;
+    font-size: $base_tag_font_size + 14pt;
-	}
+  }
 
-	.tagCount5 {
+  .tagCount5 {
-		font-size: $baseTagFontSize+12pt;
+    font-size: $base_tag_font_size + 12pt;
-	}
+  }
 
-	.tagCount4 {
+  .tagCount4 {
-		font-size: $baseTagFontSize+10pt;
+    font-size: $base_tag_font_size + 10pt;
-	}
+  }
 
-	.tagCount3 {
+  .tagCount3 {
-		font-size: $baseTagFontSize+8pt;
+    font-size: $base_tag_font_size + 8pt;
-	}
+  }
 
-	.tagCount2 {
+  .tagCount2 {
-		font-size: $baseTagFontSize+6pt;
+    font-size: $base_tag_font_size + 6pt;
-	}
+  }
 
-	.tagCount1 {
+  .tagCount1 {
-		font-size: $baseTagFontSize+4pt;
+    font-size: $base_tag_font_size + 4pt;
-	}
+  }
 }

client/src/styles/cms.scss

@@ -3,194 +3,188 @@
  */
 
 #FeaturedImage .middleColumn {
-    clear: none;
+  clear: none;
-    float: left;
+  float: left;
 }
 
 .has-panel .cms-content-tools.blog-admin-sidebar {
-    width: 280px;
+  width: 280px;
-    border-right: none;
+  border-right: 0;
-    border-left: 1px solid #C0C0C2;
+  border-left: 1px solid #C0C0C2;
-    position: absolute !important; /* overrides cms !imporant style */
+  position: absolute !important; /* overrides cms !imporant style */
-    right: 0px;
+  right: 0;
-    top: 0;
+  top: 0;
+  height: 100%;
+
+  .cms-panel-toggle a {
+    text-align: left;
+    margin: 0;
+  }
+
+  .cms-panel-toggle.south {
+    border-top: 1px solid #aaaaaa;
+  }
+
+  ~ .blog-admin-outer {
+    width: 100%;
+    padding-right: 280px;
+    position: absolute;
     height: 100%;
+    overflow-y: hidden;
+    overflow-x: hidden;
+    box-sizing: border-box;
 
-    .cms-panel-toggle a {
+    > .ss-tabset {
-        text-align: left;
+      position: relative;
-        margin: 0;
+      overflow: auto;
+      height: 100%;
+      width: 100%;
+
+      #Title {
+        label {
+          float: none;
+        }
+
+        .middleColumn,
+        input {
+          width: 100%;
+          max-width: 100%;
+          margin-left: 0;
+        }
+      }
     }
+  }
 
-    .cms-panel-toggle.south {
+  .cms-content-view {
-        border-top: 1px solid #aaaaaa;
+    > .field {
-    }
+      + .field {
+        margin-top: 10px;
+      }
 
-    ~ .blog-admin-outer {
+      &.urlsegment {
-        width: 100%;
+        .preview {
-        padding-right: 280px;
+          padding-top: 0;
-        position: absolute;
+          line-height: 25px;
-        height: 100%;
+        }
-        overflow-y: hidden;
-        overflow-x: hidden;
-        box-sizing: border-box;
 
-        > .ss-tabset {
+        .edit {
-            position: relative;
+          float: right;
-            overflow: auto;
+        }
-            height: 100%;
+      }
+
+      &.datetime {
+        > .middleColumn {
+          > .date {
+            width: 60%;
+          }
+
+          > .time {
+            width: 36%;
+            float: right;
+          }
+
+          .middleColumn,
+          input {
             width: 100%;
-
+          }
-            #Title {
-                label {
-                    float: none;
-                }
-                .middleColumn, input {
-                    width: 100%;
-                    max-width: 100%;
-                    margin-left: 0;
-                }
-            }
         }
+      }
     }
+  }
 
-    .cms-content-view {
+  &.collapsed {
-        > .field {
+    ~ .blog-admin-outer {
-            + .field {
+      padding-right: 41px;
-                margin-top: 10px;
-            }
 
-            &.urlsegment {
+      #Root_Main {
-                .preview {
+        margin-right: 15px;
-                    padding-top: 0;
+      }
-                    line-height: 25px;
-                }
-
-                .edit {
-                    float: right;
-                }
-            }
-
-            &.datetime {
-                > .middleColumn {
-                    > .date {
-                        width: 60%;
-                    }
-
-                    > .time {
-                        width: 36%;
-                        float: right;
-                    }
-
-                    .middleColumn, input {
-                        width: 100%;
-                    }
-                }
-            }
-        }
     }
+  }
 
-    &.collapsed {
+  &.cms-content-tools {
-        ~ .blog-admin-outer {
+    .cms-panel-content {
-            padding-right: 41px;
+      width: auto;
-
-            #Root_Main {
-                margin-right: 15px;
-            }
-        }
-
-    }
-
-    &.cms-content-tools {
-        .cms-panel-content {
-            width: auto;
-        }
     }
+  }
 }
 
 .toggle-description {
-    text-indent: -1000000px;
+  display: inline-block;
-    display: inline-block;
+  font-size: 1.2rem;
-    //background: url("../images/information.png") no-repeat center center;
+  width: 20px;
-    width: 20px;
+  height: 20px;
-    height: 20px;
+  margin-top: 1px;
-    margin-left: 4px;
+  cursor: pointer;
-    cursor:pointer;
 }
 
 .middleColumn.toggle-description-correct-middle {
-    margin-left: 0;
+  margin-left: 0;
-    float: left;
+  float: left;
-    width: 416px;
+  width: 416px;
 }
 
 .tab-content .field p.toggle-description-correct-right {
-    display: inline-block;
+  display: inline-block;
-    margin-left: 0;
+  margin-left: 0;
-    padding-left: 0;
+  padding-left: 0;
-    clear: none;
+  clear: none;
-    float: left;
+  float: left;
 }
 
 .description.toggle-description-correct-description {
-    width: 416px;
+  width: 416px;
-    padding: 12px 0;
+  padding: 12px 0;
 }
 
 .custom-summary {
-    .ui-accordion-content .field {
+  .ui-accordion-content,
-        margin: 0;
+  .ui-accordion-content .field {
-    }
+    padding: 0;
+  }
 
-    .ui-accordion-content,
+  // Change the caret to a plus icon
-    .ui-accordion-content .field {
+  .ui-icon-triangle-1-e {
-        padding: 0;
+    background-position: -16px -128px;
-    }
+  }
-
-    .ui-icon-triangle-1-e {
-        background-position: -16px -128px;
-    }
 }
 
 .cms table.ss-gridfield-table {
-    tr td.MergeAction {
+  tr td.MergeAction {
-        width: 225px;
+    width: 225px;
 
-        a {
+    a {
-            display: block;
+      display: block;
-            height: 100%;
+      height: 100%;
-            width: 100%;
+      width: 100%;
-        }
-
-        select {
-            width: 150px;
-        }
     }
+
+    select {
+      width: 150px;
+    }
+  }
 }
 
 .cms-content-actions,
 .cms-preview-controls {
-    z-index: 999;
+  z-index: 999;
 }
 
 .blog-cms-categorisation {
-    .MergeActionReveal {
+  .toolbar--content {
-        margin-left: 10px;
+    margin-top: 0;
-    }
+  }
 
-    .toolbar--content {
+  .MergeActionReveal:after {
-        margin-top: 0;
+    content: "@";
-    }
+    font-family: silverstripe;
+    display: inline-block;
+    position: relative;
+    margin-left: 10px;
+    top: 3px;
+  }
 
-    .MergeActionReveal:after {
+  .blog-merge-action {
-        content: '';
+    margin-top: 5px;
-        //background: url('../images/move-icon.png');
+  }
-        display: inline-block;
-        height: 16px;
-        width: 16px;
-        margin-left: 4px;
-    }
-
-    button.action {
-        margin-left: 5px;
-    }
 }