81 lines
2.0 KiB
Vue
81 lines
2.0 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="events px-2 py-2 m-2 max-w-lg">
|
||
|
|
<div class="p-2">
|
||
|
|
<span class="float-left text-xs">
|
||
|
|
{{ format_date(item.show_date) }}
|
||
|
|
</span>
|
||
|
|
<span class="float-right text-right text-xs" style="width:60%;">
|
||
|
|
<a :href="item.venue.website" target="_blank">
|
||
|
|
<b>
|
||
|
|
{{ item.venue.name }}
|
||
|
|
</b>
|
||
|
|
</a>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<a :href="item.show_link" target="_blank">
|
||
|
|
<p class="text-2xl p-5">
|
||
|
|
{{ item.show_title }}
|
||
|
|
</p>
|
||
|
|
</a>
|
||
|
|
<div class="p-2">
|
||
|
|
<span class="float-left text-xs">
|
||
|
|
{{ item.event_type }}
|
||
|
|
</span>
|
||
|
|
<span class="float-right text-right text-xs" style="width:60%;">
|
||
|
|
{{ item.venue.city }}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<p class="text-xs p-2">
|
||
|
|
|
||
|
|
</p>
|
||
|
|
</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>
|