119 lines
3.3 KiB
Vue
119 lines
3.3 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);
|
|||
|
|
// 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>
|