gancio/components/List.vue

<template lang='pug'>
div#list
  p(v-if='title') {{title}}
  v-timeline
    v-timeline-item(
      v-for='event in events'
      :key='`${event.id}_${event.start_datetime}`'
      :timestamp='event|when'
      placement='top' icon='el-icon-arrow-down' size='large')

      div.float-right
        small @{{event.place.name}}

      a(:href='`/event/${event.id}`' target='_blank') {{event.title}}
      hr
</template>
<script>

export default {
  name: 'List',
  props: {
    title: {
      type: String,
      default: ''
    },
    events: {
      type: Array,
      default: () => {
        return []
      }
    },
    maxEvents: {
      type: Number,
      default: 0
    },
    minimal: {
      type: Boolean,
      default: false
    },
    showTags: {
      type: Boolean,
      default: true
    },
    showImage: {
      type: Boolean,
      default: true
    },
    showDescription: {
      type: Boolean,
      default: true
    }
  }
}
</script>
<style lang='less'>
  #list {
    max-width: 500px;
    margin: 0 auto;

    .el-timeline {
      padding-left: 5px;

      hr {
        margin-top: 4px;
        margin-bottom: 4px;
      }
    }

    .el-timeline-item {
      padding-bottom: 1px;
    }

    .el-timeline-item__timestamp {
      margin: 0px;
      padding: 0px;
    }
  }
</style>