updates

src2/components/listings/Promo.vue

@@ -0,0 +1,98 @@
+<script setup>
+    import moment from 'moment-timezone';
+    import Modal from '../blocks/Modal.vue';
+    import { mainStore } from '../../stores/MainStore.vue';
+
+
+    const MainStore = mainStore();
+
+    defineProps({
+        item: {
+            type: Object,
+            required: true
+        },
+        index: {
+            type: Number,
+            require: true
+        },
+    })
+
+</script>
+        
+<template>
+    <div v-if="item.promo_type === 'Ja'" class="events p-5 m-2 max-w-lg art-text" :class="item.promo_type">
+        <a :href="item.target_link">
+            <h2 class="text-lg pb-2">
+                {{ item.title }} 
+            </h2>
+        </a>
+        <div class="p-5 font-bold underline">
+            <a :href="item.target_link">{{ item.organization.name  }}</a>
+        </div>
+    </div>
+    <div v-else-if="item.promo_type === ''" class="events p-5 m-2 max-w-lg" :class="item.promo_type">
+        <a href="#!"
+        @click="MainStore.changeGallery(MainStore.isOpen, 0, 2, item)"
+        >
+            <h2 class="text-2xl pb-2 underline ad-headline">
+                {{ item.title }} 
+            </h2>
+        </a>
+        <div class="p-5">
+            {{ item.short_text }}
+        </div>
+    </div>
+    <div v-else class="events p-5 m-2 max-w-lg" :class="item.promo_type">
+        <a :href="item.target_link">
+            <h2 class="text-2xl pb-2 underline ad-headline">
+                {{ item.title }} 
+            </h2>
+        </a>
+        <div class="p-5">
+            {{ item.short_text }}
+        </div>
+    </div>
+</template>
+
+<style scoped>
+    .events {
+    border: .1em solid #666;
+    border-radius: 25px;
+    min-width: 325px;
+    max-width: 400px;
+    }
+
+    .Ja, .Su, .An, .Su {
+        background-color: hsla(202, 100%, 37%, 0.1);
+    }
+
+    .Sp, .Ma, .Ar {
+        background-color: hsla(160, 100%, 37%, .1);
+    }
+
+    .Jo, .Re, .Fo, .Ev {
+        background-color: hsla(0, 100%, 59%, 0.1);
+    }
+
+
+    @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>