Merge branch 'patching-v0.27'

resources/js/components/page-comments.js

@@ -26,10 +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();
 

resources/js/services/animations.js

@@ -1,3 +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 @@
  * @param {Function|null} onComplete
  */
 export function fadeOut(element, animTime = 400, onComplete = null) {
+    cleanupExistingElementAnimation(element);
     animateStyles(element, {
         opacity: ['1', '0']
     }, animTime, () => {
@@ -19,6 +27,7 @@ export function fadeOut(element, animTime = 400, onComplete = null) {
  * @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 @@ export function slideUp(element, animTime = 400) {
  * @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 @@ export function slideDown(element, animTime = 400) {
     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 @@ function animateStyles(element, styles, animTime = 400, onComplete = null) {
         }
         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();
+    }
 }

resources/sass/styles.scss

@@ -253,7 +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;
   }

resources/views/comments/comment.blade.php

@@ -31,7 +31,7 @@
                         <button type="button" dropdown-toggle aria-haspopup="true" aria-expanded="false" class="text-button" title="{{ trans('common.delete') }}">@icon('delete')</button>
                         <ul class="dropdown-menu" role="menu">
                             <li class="px-m text-small text-muted pb-s">{{trans('entities.comment_delete_confirm')}}</li>
-                            <li><a action="delete" href="#" class="text-button text-neg" >@icon('delete'){{ trans('common.delete') }}</a></li>
+                            <li><button action="delete" type="button" class="text-button text-neg" >@icon('delete'){{ trans('common.delete') }}</button></li>
                         </ul>
                     </div>
                 @endif