updates
This commit is contained in:
74
src2/components/listings/BlueskyLinks.alt.vue
Normal file
74
src2/components/listings/BlueskyLinks.alt.vue
Normal file
@@ -0,0 +1,74 @@
|
||||
<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);
|
||||
// Then specify how you want your dates to be formatted
|
||||
return date.format('MM/DD');
|
||||
// return date.format('LLLL')
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<td>
|
||||
<a v-if="item.platform == 'bluesky'" :href="'https://bsky.app/profile/' + item.handle + '/post/' + item.uri" target="_blank" class="">
|
||||
<b>
|
||||
{{ item.platform }}
|
||||
</b>
|
||||
</a>
|
||||
<a v-else="item.platform == 'reddit'" :href="item.link">
|
||||
<b>
|
||||
{{ item.platform }}
|
||||
</b>
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
{{ item.text }}
|
||||
|
||||
<p v-if="item.link != 'blank' && item.platform =='bluesky'">
|
||||
<a :href="item.link">Link</a>
|
||||
</p>
|
||||
|
||||
<p class="border p-2" v-if="item.rt_text != 'blank'">
|
||||
{{ item.rt_text }}
|
||||
<p v-if="item.rt_link != 'blank'">
|
||||
<a :href="item.rt_link">RT Link</a>
|
||||
</p>
|
||||
</p>
|
||||
</td>
|
||||
<td class="text-center w-72">
|
||||
<span v-if="item.likes > 0">👍{{ item.likes }} </span>
|
||||
<span v-if="item.replies > 0">↩️{{ item.replies }} </span>
|
||||
<span v-if="item.quotes > 0">💭{{ item.quotes }} </span>
|
||||
<span v-if="item.reposts >0">⏩{{ item.reposts }} </span>
|
||||
</td>
|
||||
</template>
|
||||
<style scoped>
|
||||
td {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.link {
|
||||
border-radius: 25px;
|
||||
padding: .5rem;
|
||||
margin: .5rem;
|
||||
background-color: orange;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
td > span {
|
||||
padding: .5em;
|
||||
}
|
||||
</style>
|
||||
119
src2/components/listings/BlueskyLinks.vue
Normal file
119
src2/components/listings/BlueskyLinks.vue
Normal file
@@ -0,0 +1,119 @@
|
||||
<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);
|
||||
// Then specify how you want your dates to be formatted
|
||||
return date.format('MM/DD');
|
||||
// return date.format('LLLL')
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="events px-4 pb-6 m-2" style="padding-top: revert-layer;">
|
||||
<div class="p-2">
|
||||
<span class="float-left text-xs">
|
||||
#{{ item.id }} | {{ format_date(item.created_at) }}
|
||||
</span>
|
||||
<span class="float-right text-right text-xs" style="">
|
||||
<a v-if="item.platform == 'bluesky'" :href="'https://bsky.app/profile/' + item.handle + '/post/' + item.uri" target="_blank" class="">
|
||||
<b>
|
||||
{{ item.platform }}
|
||||
</b>
|
||||
</a>
|
||||
<a v-else="item.platform == 'reddit'" :href="item.link">
|
||||
<b>
|
||||
{{ item.platform }}
|
||||
</b>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="tcenter p-1">
|
||||
{{ item.text.slice(0,256) }}
|
||||
|
||||
<p v-if="item.link != 'blank' && item.platform =='bluesky'">
|
||||
<a :href="item.link">Link</a>
|
||||
</p>
|
||||
|
||||
<p class="border" v-if="item.rt_text != 'blank'">
|
||||
{{ item.rt_text }}
|
||||
<p v-if="item.rt_link != 'blank'">
|
||||
<a :href="item.rt_link">RT Link</a>
|
||||
</p>
|
||||
</p>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<div v-if="item.published" style="float:left;">
|
||||
<a :href="item.pub_link">
|
||||
📝 {{ item.platform }}
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<div v-else="!item.published" style="float:left;">
|
||||
✍️
|
||||
</div>
|
||||
<!-- <div style="float:right;">
|
||||
<span v-if="item.likes > 0">👍{{ item.likes }} </span>
|
||||
<span v-if="item.replies > 0">↩️{{ item.replies }} </span>
|
||||
<span v-if="item.quotes > 0">💭{{ item.quotes }} </span>
|
||||
<span v-if="item.reposts >0">⏩{{ item.reposts }} </span>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.events {
|
||||
/* background-color: #222; */
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.link {
|
||||
border-radius: 25px;
|
||||
padding: .5rem;
|
||||
margin: .5rem;
|
||||
background-color: orange;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
div > span {
|
||||
padding: .5em;
|
||||
}
|
||||
</style>
|
||||
81
src2/components/listings/EventListing.vue
Normal file
81
src2/components/listings/EventListing.vue
Normal file
@@ -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>
|
||||
98
src2/components/listings/Promo.vue
Normal file
98
src2/components/listings/Promo.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user