From: Dan Brown <redacted>
Date: Wed, 16 Oct 2019 15:37:29 +0000 (+0100)
Subject: Merge branch 'patching-v0.27'
X-Git-Tag: v0.28.0~1^2~80
X-Git-Url: http://source.bookstackapp.com/bookstack/commitdiff_plain/b24279cc120fd1ae40c705ddaf3235f8e9a2ab32?hp=-c

Merge branch 'patching-v0.27'
---

b24279cc120fd1ae40c705ddaf3235f8e9a2ab32
diff --combined resources/js/components/page-comments.js
index cabce9139,5d8d16958..5d8d16958
--- a/resources/js/components/page-comments.js
+++ b/resources/js/components/page-comments.js
@@@ -26,10 -26,12 +26,12 @@@ class PageComments 
  
      handleAction(event) {
          let actionElem = event.target.closest('[action]');
+ 
          if (event.target.matches('a[href^="#"]')) {
              const id = event.target.href.split('#')[1];
              scrollAndHighlightElement(document.querySelector('#' + id));
          }
+ 
          if (actionElem === null) return;
          event.preventDefault();
  
diff --combined resources/js/services/animations.js
index 8a3e9a57b,b6158ea5f..b6158ea5f
--- a/resources/js/services/animations.js
+++ b/resources/js/services/animations.js
@@@ -1,3 -1,10 +1,10 @@@
+ /**
+  * Used in the function below to store references of clean-up functions.
+  * Used to ensure only one transitionend function exists at any time.
+  * @type {WeakMap<object, any>}
+  */
+ const animateStylesCleanupMap = new WeakMap();
+ 
  /**
   * Fade out the given element.
   * @param {Element} element
@@@ -5,6 -12,7 +12,7 @@@
   * @param {Function|null} onComplete
   */
  export function fadeOut(element, animTime = 400, onComplete = null) {
+     cleanupExistingElementAnimation(element);
      animateStyles(element, {
          opacity: ['1', '0']
      }, animTime, () => {
@@@ -19,6 -27,7 +27,7 @@@
   * @param {Number} animTime
   */
  export function slideUp(element, animTime = 400) {
+     cleanupExistingElementAnimation(element);
      const currentHeight = element.getBoundingClientRect().height;
      const computedStyles = getComputedStyle(element);
      const currentPaddingTop = computedStyles.getPropertyValue('padding-top');
@@@ -41,6 -50,7 +50,7 @@@
   * @param {Number} animTime - Animation time in ms
   */
  export function slideDown(element, animTime = 400) {
+     cleanupExistingElementAnimation(element);
      element.style.display = 'block';
      const targetHeight = element.getBoundingClientRect().height;
      const computedStyles = getComputedStyle(element);
@@@ -56,13 -66,6 +66,6 @@@
      animateStyles(element, animStyles, animTime);
  }
  
- /**
-  * Used in the function below to store references of clean-up functions.
-  * Used to ensure only one transitionend function exists at any time.
-  * @type {WeakMap<object, any>}
-  */
- const animateStylesCleanupMap = new WeakMap();
- 
  /**
   * Animate the css styles of an element using FLIP animation techniques.
   * Styles must be an object where the keys are style properties, camelcase, and the values
@@@ -84,23 -87,28 +87,28 @@@ function animateStyles(element, styles
          }
          element.style.transition = null;
          element.removeEventListener('transitionend', cleanup);
+         animateStylesCleanupMap.delete(element);
          if (onComplete) onComplete();
      };
  
      setTimeout(() => {
-         requestAnimationFrame(() => {
-             element.style.transition = `all ease-in-out ${animTime}ms`;
-             for (let style of styleNames) {
-                 element.style[style] = styles[style][1];
-             }
+         element.style.transition = `all ease-in-out ${animTime}ms`;
+         for (let style of styleNames) {
+             element.style[style] = styles[style][1];
+         }
  
-             if (animateStylesCleanupMap.has(element)) {
-                 const oldCleanup = animateStylesCleanupMap.get(element);
-                 element.removeEventListener('transitionend', oldCleanup);
-             }
+         element.addEventListener('transitionend', cleanup);
+         animateStylesCleanupMap.set(element, cleanup);
+     }, 15);
+ }
  
-             element.addEventListener('transitionend', cleanup);
-             animateStylesCleanupMap.set(element, cleanup);
-         });
-     }, 10);
+ /**
+  * Run the active cleanup action for the given element.
+  * @param {Element} element
+  */
+ function cleanupExistingElementAnimation(element) {
+     if (animateStylesCleanupMap.has(element)) {
+         const oldCleanup = animateStylesCleanupMap.get(element);
+         oldCleanup();
+     }
  }
diff --combined resources/sass/styles.scss
index 8f1fef70c,1f4d00f6b..1f4d00f6b
--- a/resources/sass/styles.scss
+++ b/resources/sass/styles.scss
@@@ -253,7 -253,8 +253,8 @@@ $btt-size: 40px
    .list-sort {
      display: inline-grid;
      margin-left: $-s;
-     grid-template-columns: 120px 40px;
+     grid-template-columns: minmax(120px, max-content) 40px;
+     font-size: 0.9rem;
      border: 2px solid #DDD;
      border-radius: 4px;
    }