69 lines
1.6 KiB
Vue
69 lines
1.6 KiB
Vue
|
<script setup>
|
||
|
|
import moment from 'moment-timezone';
|
||
|
|
|
||
|
|
defineProps({
|
||
|
|
item: {
|
||
|
|
type: Object,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
index: {
|
||
|
|
type: Number,
|
||
|
|
require: true
|
||
|
|
},
|
||
|
|
})
|
||
|
|
|
||
|
|
function format_date(dateString) {
|
||
|
|
let date = moment.utc(dateString);
|
||
|
|
return date.format('dd @ h:mm a');
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="m-auto">
|
||
|
|
<div class="float-right text-right text-xs p-2 m-3 w-70">
|
||
|
|
{{ format_date(item.show_date) }} <br/>
|
||
|
|
<a :href="item.venue.website" target="_blank">
|
||
|
|
<b>
|
||
|
|
{{ item.venue.name }}
|
||
|
|
</b>
|
||
|
|
</a>
|
||
|
|
<a :href="item.show_link" target="_blank">
|
||
|
|
<p class="text-lg">
|
||
|
|
{{ item.show_title }}
|
||
|
|
</p>
|
||
|
|
</a>
|
||
|
|
<span class="float-right text-xs">
|
||
|
|
{{ item.venue.city }} | {{ item.event_type }}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<style scoped>
|
||
|
|
.events {
|
||
|
|
border: .1em solid #333;
|
||
|
|
border-radius: 25px;
|
||
|
|
min-width: 325px;
|
||
|
|
max-width: 400px;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 800px) and (max-width:1023px) {
|
||
|
|
.events {
|
||
|
|
min-width: 300px;
|
||
|
|
max-width: 300px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 1024px) and (max-width: 1249) {
|
||
|
|
.events {
|
||
|
|
min-width: 300px;
|
||
|
|
max-width: 400px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 1250px) {
|
||
|
|
.events {
|
||
|
|
min-width: 325px;
|
||
|
|
max-width: 475px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|