From b6c0baf44d7d737ede7784848374a8af3e911ac1 Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Mon, 7 Oct 2019 20:21:04 +0100 Subject: [PATCH 1/3] Updated comment delete action to be a button Fixes issue that causes code error when an anchor tag. Closes #1650 --- resources/assets/js/components/page-comments.js | 2 ++ resources/views/comments/comment.blade.php | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/resources/assets/js/components/page-comments.js b/resources/assets/js/components/page-comments.js index cabce9139..5d8d16958 100644 --- a/resources/assets/js/components/page-comments.js +++ b/resources/assets/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(); diff --git a/resources/views/comments/comment.blade.php b/resources/views/comments/comment.blade.php index 5fbdfa500..ea96a9250 100644 --- a/resources/views/comments/comment.blade.php +++ b/resources/views/comments/comment.blade.php @@ -31,7 +31,7 @@ @endif From d4c62265caeaee0465799ff42dcc146b3218363c Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Mon, 7 Oct 2019 20:57:25 +0100 Subject: [PATCH 2/3] Made JS animation cleanup process more reliable Fixes #1643 --- resources/assets/js/services/animations.js | 48 +++++++++++++--------- 1 file changed, 28 insertions(+), 20 deletions(-) diff --git a/resources/assets/js/services/animations.js b/resources/assets/js/services/animations.js index 8a3e9a57b..b6158ea5f 100644 --- a/resources/assets/js/services/animations.js +++ b/resources/assets/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} + */ +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} - */ -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(); + } } \ No newline at end of file From d6456e961afde217e045140fdf8cf88921897536 Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Mon, 7 Oct 2019 21:06:15 +0100 Subject: [PATCH 3/3] Fixed issue causing text overlap in sort select box Updated grid columns to be more adaptable to content, with a min-width of the old value. Fixes #1654 --- resources/assets/sass/styles.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/resources/assets/sass/styles.scss b/resources/assets/sass/styles.scss index 8f1fef70c..1f4d00f6b 100644 --- a/resources/assets/sass/styles.scss +++ b/resources/assets/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; }