RichEditor: Fix css bug when creating a spoiler

.circleci/config.yml

@@ -64,7 +64,7 @@ aliases:
         run:
             name: Prepare Database Dependencies
             command: |
-                sudo apt-get install -y libfreetype6-dev libjpeg62-turbo-dev libpng-dev
+                sudo apt-get update && sudo apt-get install -y libfreetype6-dev libjpeg62-turbo-dev libpng-dev
                 sudo docker-php-ext-configure gd --with-freetype-dir=/usr/include/ --with-jpeg-dir=/usr/include/
                 sudo docker-php-ext-install pdo pdo_mysql gd
                 sudo apt-get install mysql-client

applications/dashboard/js/src/main.js

@@ -95,34 +95,6 @@
         prettyPrint();
     }
 
-    /**
-     * Add a CSS class to the navbar based on it scroll position.
-     *
-     * @param element - The scope of the function.
-     */
-    function navbarHeightInit(element) {
-        var $navbar = $('.js-navbar', element);
-
-        $navbar.addClass('navbar-short');
-        var navShortHeight = $navbar.outerHeight(true);
-        $navbar.removeClass('navbar-short');
-        var navHeight = $navbar.outerHeight(true);
-        var navOffset = navHeight - navShortHeight;
-
-        // If we load in the middle of the page, we should have a short navbar.
-        if ($(window).scrollTop() > navOffset) {
-            $navbar.addClass('navbar-short');
-        }
-
-        $(window).on('scroll', function() {
-            if ($(window).scrollTop() > navOffset) {
-                $navbar.addClass('navbar-short');
-            } else {
-                $navbar.removeClass('navbar-short');
-            }
-        });
-    }
-
     /**
      * Initialize drop.js on any element with the class 'js-drop'. The element must have their id attribute set and
      * must specify the html content it will reveal when it is clicked.
@@ -404,7 +376,6 @@
         prettyPrintInit(e.target); // prettifies <pre> blocks
         aceInit(e.target); // code editor
         collapseInit(e.target); // panel nav collapsing
-        navbarHeightInit(e.target); // navbar height settings
         dropInit(e.target); // navbar 'me' dropdown
         modalInit(); // modals (aka popups)
         clipboardInit(); // copy elements to the clipboard
@@ -670,6 +641,31 @@
             dataType: 'json'
         });
     });
+
+    /**
+     * Turn a toolbar with the .js-toolbar-sticky class into a sticky toolbar.
+     *
+     * This is an opt-in class because it may not work or be appropriate on all pages.
+     */
+    $(window).scroll(function () {
+        var $toolbar = $('.js-toolbar-sticky');
+        var cssClass = 'is-stuck';
+
+        if ($(this).scrollTop() > $('header.navbar').height()) {
+            $toolbar
+                .addClass(cssClass)
+                .outerWidth($('.main').outerWidth() - 2)
+                .next('*')
+                .css('margin-top', $toolbar.outerHeight());
+        } else {
+            $toolbar.removeClass(cssClass).outerWidth('').next('*').css('margin-top', '');
+        }
+    });
+    $(window).resize(function () {
+        var $toolbar = $('.js-toolbar-sticky.is-stuck');
+
+        $toolbar.outerWidth($('.main').outerWidth() - 2);
+    });
 })(jQuery);
 
 /**

applications/dashboard/scss/compatibility/editor/_richEditorLegacy.scss

@@ -157,6 +157,19 @@ body.hasRichEditor {
         // The text box wrapper can have $.show() called on it which adds an inline `display: block`.
         display: none !important;
     }
+    .richEditor {
+        .buttonClose {
+            appearance: none;
+            border: 0;
+        }
+
+        .spoiler {
+            .iconButton {
+                justify-content: center;
+                display: flex;
+            }
+        }
+    }
 }
 
 // Handle gutter for paragraph menu