From 7841adda46b6fbf6c793b978a2837b2ba8d2087b Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Fri, 22 Jan 2021 08:51:56 -0500
Subject: [PATCH] Add transition around 'stop message' row; makes it less
 jarring if the page jumps around.

---
 client/src/components/admin/Jobs.vue | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/client/src/components/admin/Jobs.vue b/client/src/components/admin/Jobs.vue
index 985390906eb..12daf02b3e5 100644
--- a/client/src/components/admin/Jobs.vue
+++ b/client/src/components/admin/Jobs.vue
@@ -55,17 +55,19 @@
                     </b-form-group>
                 </b-col>
             </b-row>
-            <b-form v-if="jobsItemsComputed.length && selectedStopJobIds.length" @submit.prevent="onStopJobs">
-                <b-form-group label="Stop Selected Jobs" description="Stop message will be displayed to the user">
-                    <b-input-group>
-                        <b-form-input id="stop-message" v-model="stopMessage" placeholder="Stop message" required>
-                        </b-form-input>
-                        <b-input-group-append>
-                            <b-btn type="submit">Submit</b-btn>
-                        </b-input-group-append>
-                    </b-input-group>
-                </b-form-group>
-            </b-form>
+            <transition name="fade">
+                <b-form v-if="jobsItemsComputed.length && selectedStopJobIds.length" @submit.prevent="onStopJobs">
+                    <b-form-group label="Stop Selected Jobs" description="Stop message will be displayed to the user">
+                        <b-input-group>
+                            <b-form-input id="stop-message" v-model="stopMessage" placeholder="Stop message" required>
+                            </b-form-input>
+                            <b-input-group-append>
+                                <b-btn type="submit">Submit</b-btn>
+                            </b-input-group-append>
+                        </b-input-group>
+                    </b-form-group>
+                </b-form>
+            </transition>
             <b-alert v-if="!jobsItemsComputed.length" variant="secondary" show>
                 There are no unfinished jobs to show with current cutoff time.
             </b-alert>