style: removes dashboard card movement transitions

Signed-off-by: Pedro Lamas <[email protected]>

Author: pedrolamas

src/components/common/CollapsableCard.vue

@@ -71,7 +71,6 @@
         id="card-content"
         :class="_contentClasses"
         :style="_contentStyles"
-        @transitionend="transitionEvent"
       >
         <template v-if="subTitle || hasSubTitleSlot">
           <v-card-subtitle class="py-2">
@@ -83,7 +82,6 @@
           <v-divider />
         </template>
 
-        <!-- Primary Content slot -->
         <slot />
       </div>
     </v-expand-transition>
@@ -94,21 +92,17 @@
         id="card-content"
         :class="_contentClasses"
         :style="_contentStyles"
-        @transitionend="transitionEvent"
       >
-        <template
-          v-if="subTitle || hasSubTitleSlot"
-        >
+        <template v-if="subTitle || hasSubTitleSlot">
           <v-card-subtitle class="py-2">
-            <slot name="subTitle">
+            <slot name="sub-title">
               <span v-html="subTitle" />
             </slot>
           </v-card-subtitle>
 
           <v-divider />
         </template>
 
-        <!-- Primary Content slot -->
         <slot />
       </div>
     </v-expand-transition>
@@ -392,26 +386,6 @@ export default class CollapsableCard extends Vue {
 
   mounted () {
     this.$emit('collapsed', this.isCollapsed)
-    if (this.hasCollapseButtonSlot) {
-      // this.collapsable = false
-    }
-  }
-
-  onCollapseChange (isCollapsed: boolean) {
-    this.isCollapsed = isCollapsed
-  }
-
-  onLayoutEnabled (event: Event) {
-    this.$emit('enabled', event)
-  }
-
-  transitionEvent (event: TransitionEvent) {
-    if (
-      event.target instanceof HTMLElement &&
-      event.target.id === 'card-content'
-    ) {
-      this.$emit('transition-end')
-    }
   }
 }
 </script>

src/views/Dashboard.vue

@@ -16,23 +16,17 @@
             group: 'dashboard',
             disabled: !inLayout,
           }"
-          target=":first-child"
           @end="handleUpdateLayout"
         >
-          <transition-group
-            type="transition"
-            :name="!inLayout ? 'flip-list' : undefined"
-          >
-            <template v-for="c in container">
-              <component
-                :is="c.id"
-                v-if="inLayout || (c.enabled && !filtered(c))"
-                :key="c.id"
-                :menu-collapsed="menuCollapsed"
-                class="mb-2 mb-md-4"
-              />
-            </template>
-          </transition-group>
+          <template v-for="c in container">
+            <component
+              :is="c.id"
+              v-if="inLayout || (c.enabled && !filtered(c))"
+              :key="c.id"
+              :menu-collapsed="menuCollapsed"
+              class="mb-2 mb-md-4"
+            />
+          </template>
         </app-draggable>
       </v-col>
     </template>

src/views/Diagnostics.vue

@@ -43,23 +43,17 @@
               group: 'diagnostics',
               disabled: !inLayout,
             }"
-            target=":first-child"
             @end.stop="updateLayout"
           >
-            <transition-group
-              type="transition"
-              :name="!inLayout ? 'flip-list' : undefined"
-            >
-              <template v-for="c in container">
-                <diagnostics-card
-                  v-if="c.enabled || inLayout"
-                  :key="c.id"
-                  :config="c"
-                  class="mb-2 mb-md-4"
-                  @edit="handleEditCard"
-                />
-              </template>
-            </transition-group>
+            <template v-for="c in container">
+              <diagnostics-card
+                v-if="c.enabled || inLayout"
+                :key="c.id"
+                :config="c"
+                class="mb-2 mb-md-4"
+                @edit="handleEditCard"
+              />
+            </template>
           </app-draggable>
         </v-col>
       </template>