updates

src2/components/listings/EventListing.vue

@@ -0,0 +1,81 @@
+<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>