Replace Table with responsive Card. Add refresh of token and retry on 401 errors

components/pages/events/Event/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <Card dis-hover>
+    <p slot="title">{{event.band.name}}</p>
+    <a href="#" slot="extra" v-if="hasUser" @click.prevent="ignore('band', event.band.name)"><Icon type="ios-eye-off" title="Dölj"></Icon></a>
+    <Row>
+      <Col :xs="24" :sm="12"><strong>Datum:</strong> {{event.date}}</Col>
+      <Col :xs="24" :sm="12" v-if="event.time"><strong>Tid:</strong> {{event.time}}</Col>
+    </Row>
+    <Row>
+      <Col :xs="24" :sm="12" :md="6"><strong>Var:</strong> {{event.danceHall.name}} <a href="#" v-if="hasUser" @click.prevent="ignore('danceHall', event.danceHall.name)"><Icon type="ios-eye-off" title="Dölj"></Icon></a></Col>
+      <Col :xs="24" :sm="12" :md="6"><strong>Ort:</strong> {{event.danceHall.city}} <a href="#" v-if="hasUser" @click.prevent="ignore('city', event.danceHall.city)"><Icon type="ios-eye-off" title="Dölj"></Icon></a></Col>
+      <Col :xs="24" :sm="12" :md="6"><strong>Kommun:</strong> {{event.danceHall.municipality}} <a href="#" v-if="hasUser" @click.prevent="ignore('municipality', event.danceHall.municipality)"><Icon type="ios-eye-off" title="Dölj"></Icon></a></Col>
+      <Col :xs="24" :sm="12" :md="6"><strong>Län:</strong> {{event.danceHall.state}} <a href="#" v-if="hasUser" @click.prevent="ignore('state', event.danceHall.state)"><Icon type="ios-eye-off" title="Dölj"></Icon></a></Col>
+    </Row>
+  </Card>
+</template>
+
+<script>
+  export default {
+    props: {
+      event: {
+        type: Object,
+        required: true
+      },
+      hasUser: {
+        type: Boolean,
+        required: true
+      },
+      ignore: {
+        type: Function,
+        required: true
+      }
+    }
+  };
+</script>