From 356ffa2250c66c442cfa8c4e638ca53926396a65 Mon Sep 17 00:00:00 2001 From: Terry Truong Date: Sun, 15 Jan 2023 12:25:08 +1100 Subject: Add visual indication of pan/zoom failure Add tick display data to Tick objects Add 'movement fail' divs Add animateWithClass() utility function Add animate-show-then-fade class --- src/components/SearchModal.vue | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) (limited to 'src/components/SearchModal.vue') diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue index dd387e1..ade86be 100644 --- a/src/components/SearchModal.vue +++ b/src/components/SearchModal.vue @@ -31,7 +31,7 @@ import {ref, computed, onMounted, PropType} from 'vue'; import SearchIcon from './icon/SearchIcon.vue'; import InfoIcon from './icon/InfoIcon.vue'; -import {HistEvent, queryServer, EventInfoJson, jsonToEventInfo, SuggResponseJson} from '../lib'; +import {HistEvent, queryServer, EventInfoJson, jsonToEventInfo, SuggResponseJson, animateWithClass} from '../lib'; import {useStore} from '../store'; import {RBTree} from '../rbtree'; @@ -187,12 +187,8 @@ async function resolveSearch(eventTitle: string){ return; } emit('search', eventInfo.event); - } else { - // Trigger failure animation - let input = inputRef.value!; - input.classList.remove('animate-red-then-fade'); - input.offsetWidth; // Triggers reflow - input.classList.add('animate-red-then-fade'); + } else { // Trigger failure animation + animateWithClass(inputRef.value!, 'animate-red-then-fade'); } } -- cgit v1.2.3