gancio-upstream/components/Home.vue

<template lang="pug">
  div(v-loading='loading')
    magic-grid(:animate="true" useMin :gap=5 :maxCols=4
      :maxColWidth='400' ref='magicgrid')
      div.mt-1.item
        //- Search#search
        no-ssr
          Calendar
      Event.item.mt-1(v-for='event in events'
        :key='event.id'
        :event='event')
</template>

<script>
import { mapState, mapActions } from 'vuex'
import axios from 'axios'
// import filters from '@/filters.js'
import Event from '@/components/Event'
import Calendar from '@/components/Calendar'
// import { intersection } from 'lodash'
// import moment from 'dayjs'
// import Search from '@/components/Search'

export default {
  name: 'Home',
  data () {
    return { loading: true }
  },
  // created () {
  //   const now = new Date()
  //   const page = { month: now.getMonth() - 1, year: now.getFullYear() }
  //   this.updateEvents(page)
  // },
  components: { Event, Calendar }, // , Calendar, Search },
  computed: {
    ...mapState(['events', 'filters']),
    filteredEvents() {
      return this.events
      // return this.$store.getters.filteredEvents
        .filter(e => !e.past)
        .sort((a, b) => a.start_datetime > b.start_datetime)
    }
  },
  mounted () {
    this.loading = false
  },
  methods: mapActions(['updateEvents']),
  watch: {
    filteredEvents() {
      this.$nextTick(this.$refs.magicgrid.positionItems)
      this.loading = false
    }
  }
}
</script>
<style>
#search {
  display: inline-flex;
}

.item {
  width: 100%;
  max-width: 400px;
  margin-top: 4px;
  position: absolute;
  cursor: pointer;
}

.card-columns {
  column-count: 1;
  column-gap: 0.2em;
}
@media (min-width: 576px) {
  .container {
    max-width: none;
  }
  .card-columns {
    column-count: 2;
  }
}

@media (min-width: 950px) {
  .container {
    max-width: 1400px;
  }
  .card-columns {
    column-count: 3;
  }
}

/* .item {
  transition: all .2s;
  display: inline-block;
  width: 100%;
} */
/* .list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
.list-leave-active {
  position: absolute;
  top: 0px;
  width: 0px;
  left: 0px;
  height: 0px;
  z-index: -10;
} */
</style>