fix #8 with magic grid

client/package.json

@@ -24,6 +24,7 @@
     "vue-awesome": "^3.3.1",
     "vue-clipboard2": "^0.3.0",
     "vue-i18n": "^8.5.0",
+    "vue-magic-grid": "^0.0.4",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1",
     "vuex-persist": "^2.0.0",

client/src/components/Event.vue

@@ -6,7 +6,7 @@
       div <v-icon name='clock'/> {{event.start_datetime|datetime}}
       span <v-icon name='map-marker-alt'/> {{event.place.name}}
       br
-      el-tag.mr-1(:color='tag.color' v-for='tag in event.tags' :key='tag.tag'
+      el-tag.mr-1(:color='tag.color || "grey"' v-for='tag in event.tags' :key='tag.tag'
         size='small' @click.stop='addSearchTag(tag)') {{tag.tag}}
 </template>
 <script>

client/src/components/EventDetail.vue

@@ -14,7 +14,7 @@
       b-card-body(v-if='event.description || event.tags')
         pre(v-html='event.description')
         br
-        el-tag.mr-1(:color='tag.color' v-for='tag in event.tags'
+        el-tag.mr-1(:color='tag.color || "grey"' v-for='tag in event.tags'
           size='mini' :key='tag.tag') {{tag.tag}}
         .ml-auto(v-if='mine')
           hr
@@ -74,7 +74,7 @@ export default {
     async remove () {
       await api.delEvent(this.event.id)
       this.delEvent(this.event.id)
-      this.$router.go(-1)
+      this.$refs.modal.hide()
     }
   }
 }

client/src/components/Export.vue

@@ -1,5 +1,6 @@
 <template lang="pug">
-  b-modal(@hidden='$router.replace("/")' :title='$t("Export")' :visible='true' size='lg' hide-footer)
+  b-modal(ref='modal' @hidden='$router.replace("/")' 
+    :title='$t("Export")' :visible='true' size='lg' hide-footer)
     p {{$t('export_intro')}}
     
     li(v-if='filters.tags.length') {{$t('Tags')}}:
@@ -63,7 +64,7 @@ export default {
   components: { Calendar },
   data () {
     return {
-      type: 'feed',
+      type: 'email',
       link: '',
       reminder: { send_on_insert: true, send_reminder: false },
       export_list: true,
@@ -81,7 +82,7 @@ export default {
   },
   methods: {
     activate_email () {
-      this.$router.go(-1)
+      this.$refs.modal.hide()
     },
     loadLink () {
       const tags = this.filters.tags.join(',')

client/src/components/Home.vue

@@ -1,7 +1,6 @@
 <template lang="pug">
-  b-container
+    magic-grid(animate :gap=5 :maxCols=4 :maxColWidth='300')
-    b-card-group(columns)
+      div.mt-1.item
-      div.mt-1
         Search#search
         Calendar
       Event.item(v-for='event in filteredEvents'
@@ -34,15 +33,11 @@ export default {
 #search {
   display: inline-flex;
 }
-/* 
+
-.card-horiz {
+.item {
-  flex-flow: row wrap;
+  /* min-width: 350px; */
-  display: flex;
+  width: 100%;
-  /*! margin-left: -8px; 
 }
-.card-horiz .card {
-  width: 400px !important;
-} */
 
 .card-columns {
   column-count: 1;
@@ -66,12 +61,12 @@ export default {
   }
 }
 
-.item {
+/* .item {
   transition: all .2s;
   display: inline-block;
   width: 100%;
-}
+} */
-.list-enter, .list-leave-to {
+/* .list-enter, .list-leave-to {
   opacity: 0;
   transform: translateY(30px);
 }
@@ -82,5 +77,5 @@ export default {
   left: 0px;
   height: 0px;
   z-index: -10;
-}
+} */
 </style>

client/src/components/newEvent.vue

@@ -1,5 +1,6 @@
 <template lang="pug">
-  b-modal(@hidden='$router.replace("/")' :title="edit?$t('Edit event'):$t('New event')" size='md' :visible='true' hide-footer)
+  b-modal(ref='modal' @hidden='$router.replace("/")' size='md' :visible='true'
+    :title="edit?$t('Edit event'):$t('New event')" hide-footer)
     b-container
       el-tabs.mb-2(v-model='activeTab' v-loading='sending')
 
@@ -188,7 +189,7 @@ export default {
         }
         this.updateMeta()
         this.sending = false
-        this.$router.go(-1)
+        this.$refs.modal.hide()
       } catch (e) {
         this.sending = false
         console.error(e)

client/src/main.js

@@ -30,7 +30,7 @@ import { Button, Select, Tag, Option, Table, FormItem,
   Form, Tabs, TabPane, Switch, Input, Loading, TimeSelect,
   TableColumn, ColorPicker, Pagination } from 'element-ui'
 import ElementLocale from 'element-ui/lib/locale'
-
+import MagicGrid from 'vue-magic-grid'
 
 import 'element-ui/lib/theme-chalk/index.css'
 
@@ -63,6 +63,8 @@ Vue.use(Form)
 Vue.use(TimeSelect)
 Vue.use(Loading.directive)
 
+Vue.use(MagicGrid)
+
 // Use v-calendar, v-date-picker & v-popover components
 Vue.use(VCalendar, {
   firstDayOfWeek: 2