1  <template lang="pug">
 2  
 3  .eventfeed
 4    div(v-for='(e, i) in eventstream'  :key="i")
 5        transition(name='fade' v-if='e.showEvent'  v-bind:style="{ left: e.randomX }"  @click='goTo(e)').feed.wiggle
 6            img.bubble(src='../assets/images/down.svg')
 7            //- .float(:style='{ color: e.randomColors[0], left: e.randomXs[0], top: e.randomYs[0] }') {{ e.meme }}
 8                //- span(v-if='e.type==="task-created"'  :style='{ color: e.randomColors[1], left: e.randomXs[1], top: e.randomYs[1] }') -{{ e.name }}
 9  </template>
10  
11  <script>
12  
13  export default {
14      computed:{
15          eventstream(){
16              return this.$store.state.eventstream
17          },
18      },
19      methods: {
20          goTo(ev){
21              if (ev.memberId){
22                  this.$store.commit('goDeeper',ev.memberId )
23              }
24              if (ev.subTask){
25                  this.$store.commit('goDeeper',ev.subTask )
26              } else if  (ev.taskId){
27                  this.$store.commit('goDeeper',ev.taskId )
28              }
29              if (ev.inId){
30                  this.$store.commit('goDeeper',ev.inId )
31              }
32          }
33      }
34  }
35  </script>
36  
37  <style lang='stylus' scoped>
38  @import '../styles/breakpoints';
39  @import '../styles/colours';
40  
41  .feed
42      position: fixed
43      top: 100vh - 20em
44      left: 45%
45      height: 4em
46      width: 4em
47      z-index: 10000000
48      opacity: 0.456
49      cursor: pointer
50  
51  .feed img
52      height: 4em
53      width: 4em
54  
55  img
56      height: 170px
57      position: absolute
58      top: 0
59      left: 0
60  
61  // transition doesn't work
62  .fade-enter-active
63      transition: top 7s
64  
65  .fade-leave-active
66      transition: top 7s
67      top: -11em
68  
69  .fade-enter
70      top: 99%
71  
72  .fade-leave-to /* .fade-leave-active below version 2.1.8 */
73      top: -10em
74  
75  @keyframes wiggle {
76      0%, 100% { transform: translate(-16px, 0) }
77      25% { transform: translate(-8px, 0) }
78      50% { transform: translate(16px, 0) }
79      75% { transform: translate(8px, 0) }
80  }
81  
82  .wiggle {
83    animation: wiggle 1s infinite
84    transition-timing-function: ease
85  }
86  
87  .float
88      position: relative
89      left: 30%
90      top: 40%
91      font-family: "Comic Sans MS"
92      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5)
93  
94  .bubble
95      opacity: 0.5
96  </style>