change input blocking to use css

src/components/timeline/timeline.js

@@ -65,8 +65,10 @@ const Timeline = {
       }
     },
     classes () {
+      let rootClasses = !this.embedded ? ['panel', 'panel-default'] : []
+      if (this.blockingClicks) rootClasses = rootClasses.concat(['-blocked'])
       return {
-        root: ['timeline'].concat(!this.embedded ? ['panel', 'panel-default'] : []),
+        root: rootClasses,
         header: ['timeline-heading'].concat(!this.embedded ? ['panel-heading'] : []),
         body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : []),
         footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : [])
@@ -125,17 +127,11 @@ const Timeline = {
     this.$store.commit('setLoading', { timeline: this.timelineName, value: false })
   },
   methods: {
-    blockClickEvent (e) {
-      e.stopPropagation()
-      e.preventDefault()
-    },
     stopBlockingClicks: debounce(function () {
       this.blockingClicks = false
-      this.$el && this.$el.removeEventListener('click', this.blockClickEvent, true)
     }, 1000),
     blockClicksTemporarily () {
       if (!this.blockingClicks) {
-        this.$el.addEventListener('click', this.blockClickEvent, true)
         this.blockingClicks = true
       }
       this.stopBlockingClicks()

src/components/timeline/timeline.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="[classes.root, 'timeline']">
+  <div :class="[classes.root, 'Timeline']">
     <div :class="classes.header">
       <TimelineMenu v-if="!embedded" />
       <div
@@ -103,10 +103,15 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.timeline {
+.Timeline {
   .loadmore-text {
     opacity: 1;
   }
+
+  &.-blocked {
+    pointer-events: none;
+    cursor: wait;
+  }
 }
 
 .timeline-heading {