updates
This commit is contained in:
98
src2/components/About.vue
Normal file
98
src2/components/About.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<svg
|
||||
@click="isOpen = false"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-8 h-8 text-red-900 cursor-pointer z-40"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
<div id="promo-overlay" class="z-40" v-for="(qa, index) in questions">
|
||||
<div class=" p-3 m-3">
|
||||
<h2 class="text-xl">
|
||||
<a :href="index" v-on:click.prevent="open_answer(qa)">
|
||||
{{ qa.q }}
|
||||
</a>
|
||||
</h2>
|
||||
<div ref="a-${index}" :class="{hidden:qa.show}" class="p-5 promo-overlay">
|
||||
<span v-html="qa.a"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import moment from 'moment-timezone';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
questions: [],
|
||||
new_msg: "",
|
||||
the_day: "",
|
||||
isHidden: true,
|
||||
questions: [
|
||||
{ q: "What is DigiSnaxx?", a:"DigiSnaxx is an events calendar, and community board. We aggregate events and news from the Twin Cities Metro Area.", show:false },
|
||||
{ q: "Who built DigiSnaxx?", a:"'Twas I <a href='https://canin.dreamfreely.org' target='_blank'>Canin Carlos</a>.", show:false },
|
||||
{ q: "How can you support this project?", a:"Share the QR code & URL! <br/><br/>To learn about my other projects, support me as an innovator, or <b>join the DigiSnaxx Commerce Community, <a href='https://canin.dreamfreely.org/digisnaxx' target='_blank'>click here</a></b>", show:false },
|
||||
{ q: "Submit a calendar!", a:'<iframe class="airtable-embed" src="https://airtable.com/embed/shrfUvOiFdaHI8xoz?backgroundColor=teal" frameborder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>', show:false },
|
||||
{ q: "What's the status of the calendar I submitted?", a:'<iframe class="airtable-embed" src="https://airtable.com/embed/shr6IRnNvHtDEcokM?backgroundColor=teal&layout=card&viewControls=on" frameborder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>', show: false},
|
||||
// { q: "Next question?", a:"Next answer", show: true},
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
open_answer(q) {
|
||||
q.show = !q.show
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.question {
|
||||
background-color: aquamarine;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.answer {
|
||||
background-color: coral ;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 1rem 1rem 1rem 0rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: 500;
|
||||
font-size: 2.6rem;
|
||||
top: -10px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.gform-mini {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.gform-lg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
43
src2/components/Bluesky.alt.vue
Normal file
43
src2/components/Bluesky.alt.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from "vue";
|
||||
|
||||
import { useMenuStore } from '../stores/MenuStore';
|
||||
const MenuStore = useMenuStore();
|
||||
MenuStore.get_today();
|
||||
|
||||
import BlueSkyComplete from './listings/BlueskyLinks.alt.vue';
|
||||
|
||||
MenuStore.fetchSocialLinkList();
|
||||
const links = computed(() => {
|
||||
return MenuStore.social_links;
|
||||
});
|
||||
|
||||
defineProps({
|
||||
limit: {
|
||||
type: Number,
|
||||
require: false
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template class="">
|
||||
<div class="p-2">
|
||||
<p class="text-xl">Recent readings:</p>
|
||||
</div>
|
||||
|
||||
<div class="md:grid lg:grid md:justify-center lg:justify-center">
|
||||
<p class="text-lg">from <a href="https://bsky.app/profile/dreamfreely.org">BlueSky</a> & <a href="https://www.reddit.com/user/CultureClap/">Reddit</a></p>
|
||||
<table class="table-striped">
|
||||
<tr class="even:bg-blue-100 even:text-black odd:bg-grey-800" v-for="(item, index) in links">
|
||||
<BlueSkyComplete :item = "item" :index = "index" />
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
tr {
|
||||
border-radius: 25px;
|
||||
}
|
||||
</style>
|
||||
49
src2/components/Sections/EventList.vue
Normal file
49
src2/components/Sections/EventList.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from "vue";
|
||||
|
||||
import { useMenuStore } from '../../stores/MenuStore';
|
||||
const MenuStore = useMenuStore();
|
||||
MenuStore.get_today();
|
||||
|
||||
|
||||
import EventListingComplete from '../listings/EventListing.vue';
|
||||
import Promo from '../listings/BlueskyLinks.vue';
|
||||
// import Promo from '../listings/Promo.vue';
|
||||
|
||||
import { useEventsStore } from '../../stores/EventsStore';
|
||||
|
||||
const props = defineProps({
|
||||
limit: {
|
||||
type: Number,
|
||||
require: false
|
||||
},
|
||||
|
||||
cal: {
|
||||
type: String,
|
||||
require: true
|
||||
}
|
||||
})
|
||||
|
||||
const store = useEventsStore();
|
||||
store.fetchEvents(props.cal);
|
||||
store.fetchPromo();
|
||||
const events = computed(() => {
|
||||
return store.events;
|
||||
});
|
||||
const promo = computed(() => {
|
||||
return store.promo;
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="md:flex md:flex-wrap lg:flex lg:flex-wrap md:flex md:justify-center lg:flex lg:justify-center z-0">
|
||||
<span class="self-stretch" v-for="(item, index) in events">
|
||||
<Promo v-if="(index % 6 == 0) && index != 0 && events.length > 12" :item = promo[(index/6)-1] :index = "(index/6)-1"/>
|
||||
<EventListingComplete v-else-if="(index % 6 != 0)" :item = "item" :index = "index" />
|
||||
<!-- <EventListingComplete :item = "item" :index = "index" /> -->
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
22
src2/components/Sections/Footer.vue
Normal file
22
src2/components/Sections/Footer.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
lead: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="">
|
||||
<a class="green text-2xl flex justify-center" href="https://www.dreamfreely.org" target="_blank">
|
||||
{{ lead }}
|
||||
</a>
|
||||
<br/>
|
||||
Privacy Policy: This website uses <a href="https://umami.is/" target="_blank">Umami</a> for analytics.
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
68
src2/components/Sections/Header.vue
Normal file
68
src2/components/Sections/Header.vue
Normal file
@@ -0,0 +1,68 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from "vue";
|
||||
import moment from 'moment-timezone';
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<header class="grid justify-center z-10">
|
||||
<div class="greetings justify-center pt-2 pb-3">
|
||||
<h1 class="green">
|
||||
<RouterLink to="/">DigiSnaxx.com</RouterLink>
|
||||
</h1>
|
||||
<!-- <span class="subtitle z-40">
|
||||
another <a href="https://www.dreamfreely.org" targe="_blank">DreamFreely</a> project
|
||||
</span> -->
|
||||
<span class="subtitle z-40">
|
||||
Events done simply
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
header {
|
||||
line-height: 1.5;
|
||||
max-height: 50vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: -15px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-left: 65px;
|
||||
letter-spacing: .15em;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
margin: 0 auto 2rem;
|
||||
}
|
||||
|
||||
.nav {
|
||||
background-color: var(--color-background) !important;
|
||||
opacity: 1;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
header {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin: 0 2rem 0 0;
|
||||
}
|
||||
|
||||
header .wrapper {
|
||||
display: flex;
|
||||
place-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
134
src2/components/blocks/Modal.vue
Normal file
134
src2/components/blocks/Modal.vue
Normal file
@@ -0,0 +1,134 @@
|
||||
<script setup>
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { mainStore } from '../../stores/MainStore.vue'
|
||||
import About from '../About.vue'
|
||||
import qrCode from '../../assets/qr.digi.png'
|
||||
|
||||
const promo = mainStore().promo_display;
|
||||
|
||||
const { isOpen, modal} = storeToRefs(mainStore())
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-show="isOpen"
|
||||
class="
|
||||
overflow-auto scrolling-touch left-0 top-0 bottom-100 right-0 w-full h-full fixed
|
||||
overscroll-auto
|
||||
flex
|
||||
items-start
|
||||
justify-center
|
||||
mx-auto
|
||||
z-40
|
||||
"
|
||||
>
|
||||
<div class="max-w-2xl p-6 mt-10 rounded-md shadow-xl promo-overlay">
|
||||
<!-- <div class="flex items-center justify-between">
|
||||
<h3 v-show="modal" class="text-2xl">QR Code to DigiSnaxx</h3>
|
||||
<h3 v-show="!modal" class="text-2xl">About DigiSnaxx</h3>
|
||||
<svg
|
||||
@click="isOpen = false"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-8 h-8 text-red-900 cursor-pointer"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
</div> -->
|
||||
|
||||
<!-- <About v-if="modal === 0" class="z-40"/> -->
|
||||
|
||||
<div v-if="modal === 0" class="p-2 template z-40">
|
||||
<svg
|
||||
@click="isOpen = false"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-8 h-8 text-red-900 cursor-pointer"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
<div>
|
||||
<h2 class="text-2xl"><a href="">DreamFreely</a></h2>
|
||||
<p class="p-10">DigiSnaxx is the creation of <a href="//canin.dreamfreely.org">Canin Carlos</a>.</p>
|
||||
<p>You can <a href="https://airtable.com/appzQxsifc8AnD1zA/shrfUvOiFdaHI8xoz">submit a calendar here</a>, or <a href="https://airtable.com/appzQxsifc8AnD1zA/shrvhmYsAXY216C51">submit an event here</a>.</p>
|
||||
|
||||
<p>
|
||||
<img :src="qrCode"/>
|
||||
<h2 class="text-xl green p-5">Shareable QR Code</h2>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div v-if="modal === 1" class="p-2 template z-40">
|
||||
<svg
|
||||
@click="isOpen = false"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-8 h-8 text-red-900 cursor-pointer"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
<img :src="qrCode"/>
|
||||
<h2 class="text-xl green p-5">Shareable QR Code</h2>
|
||||
</div>
|
||||
<div v-if="modal === 2" class="p-10 template z-40 green">
|
||||
<a class="text-lg underline font-bold" :href="promo[0].target_link">
|
||||
<h2 class="text-xl">
|
||||
{{ promo[0].title }}
|
||||
</h2>
|
||||
<p class="text-xs">
|
||||
{{ promo[0].target_link }}
|
||||
</p>
|
||||
<img class="rounded-full" :src="promo[0].image"/>
|
||||
</a>
|
||||
<!-- <p>
|
||||
{{ promo[0].promo_type }}
|
||||
</p> -->
|
||||
<div class="p-5" v-html="promo[0].long_text" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* .template {
|
||||
background-color: #000;
|
||||
z-index: 4;
|
||||
} */
|
||||
|
||||
.promo-overlay {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
div >>> p {
|
||||
padding:.5rem;
|
||||
}
|
||||
</style>
|
||||
107
src2/components/blocks/PrimaryButtonSet.vue
Normal file
107
src2/components/blocks/PrimaryButtonSet.vue
Normal file
@@ -0,0 +1,107 @@
|
||||
<script setup>
|
||||
import { useMenuStore } from '../../stores/MenuStore';
|
||||
import { useEventsStore } from '../../stores/EventsStore';
|
||||
import { mainStore } from '../../stores/MainStore.vue';
|
||||
import Modal from './Modal.vue';
|
||||
|
||||
const menuStore = useMenuStore();
|
||||
const EventsStore = useEventsStore();
|
||||
const MainStore = mainStore();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="text-center p-0">
|
||||
<button class="" v-on:click="menuStore.showMenu = !menuStore.showMenu">Filters</button>
|
||||
|
||||
<button
|
||||
@click="MainStore.changeGallery(MainStore.isOpen, 0, 0, null)"
|
||||
class="about"
|
||||
type="button"
|
||||
>
|
||||
About
|
||||
</button>
|
||||
|
||||
<!-- <button
|
||||
@click="MainStore.changeGallery(MainStore.isOpen, 0, 1, null)"
|
||||
class="qr-code"
|
||||
type="button"
|
||||
>
|
||||
QR Code
|
||||
</button> -->
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.menu {
|
||||
color: #777 !important;
|
||||
background-color: #111;
|
||||
padding: .25em 1em .25em 1em;
|
||||
}
|
||||
|
||||
.ads {
|
||||
background-color: #222;
|
||||
border: .1em solid #fff;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 1rem 1rem 1rem 0rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input {
|
||||
border-radius: 25px;
|
||||
padding: .5rem;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 25px;
|
||||
padding: .5rem;
|
||||
margin: .75rem;
|
||||
background-color: orange;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#filter-btn {
|
||||
border-radius: 25px;
|
||||
padding: .5rem;
|
||||
margin: .75rem;
|
||||
background-color: cornflowerblue;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 25px;
|
||||
padding: .25rem .75rem;
|
||||
margin: .25rem;
|
||||
background-color: orange;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.search {
|
||||
border-radius: 25px;
|
||||
padding: .5rem 1rem;
|
||||
margin: .5rem;
|
||||
margin-top: 10px;
|
||||
background-color: hsla(160, 100%, 37%, 1);
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.days {
|
||||
background-color: hsla(160, 100%, 37%, 1);
|
||||
padding: .5rem 1rem .5rem 1rem;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.category {
|
||||
/* background-color: hsla(160, 100%, 37%, 1); */
|
||||
padding: .5rem 1rem .5rem 1rem;
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
</style>
|
||||
45
src2/components/blocks/SearchButton.vue
Normal file
45
src2/components/blocks/SearchButton.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<script setup>
|
||||
import { useMenuStore } from '../../stores/MenuStore';
|
||||
import { useEventsStore } from '../../stores/EventsStore';
|
||||
import { mainStore } from '../../stores/MainStore.vue';
|
||||
import Modal from './Modal.vue';
|
||||
|
||||
const menuStore = useMenuStore();
|
||||
const EventsStore = useEventsStore();
|
||||
const MainStore = mainStore();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="text-center p-0">
|
||||
<input v-model="EventsStore.search_term" type="text" id="search" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 blockz p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 align-middle"/>
|
||||
<button class="btn search mt-8 align-middle" v-on:click.prevent="EventsStore.searchEvents(EventsStore.search_term)"><img class="lens align-middle" src="/search.png"/></button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
input {
|
||||
border-radius: 25px;
|
||||
padding: .5rem;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 25px;
|
||||
padding: .5rem;
|
||||
margin: .75rem;
|
||||
background-color: orange;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.search {
|
||||
border-radius: 25px;
|
||||
padding: .5rem 1rem;
|
||||
margin: .5rem;
|
||||
margin-top: 10px;
|
||||
background-color: hsla(160, 100%, 37%, 1);
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
</style>
|
||||
120
src2/components/blocks/SecondaryButtonSet.vue
Normal file
120
src2/components/blocks/SecondaryButtonSet.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<script setup>
|
||||
import { useMenuStore } from '../../stores/MenuStore';
|
||||
import { useEventsStore } from '../../stores/EventsStore';
|
||||
import { mainStore } from '../../stores/MainStore.vue';
|
||||
import Modal from './Modal.vue';
|
||||
|
||||
const menuStore = useMenuStore();
|
||||
const EventsStore = useEventsStore();
|
||||
const MainStore = mainStore();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="menuStore.showMenu">
|
||||
<div v-if="menuStore.isHidden">
|
||||
<div>
|
||||
<button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(0)">Today</button>
|
||||
<button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(1)">Tomorrow</button>
|
||||
<button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(2)">+ 2</button>
|
||||
|
||||
<button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(3)">+ 3</button>
|
||||
<button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(4)">+ 4</button>
|
||||
<button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(5)">+ 5</button>
|
||||
<button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(6)">+ 6</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button class="btn category" v-on:click.prevent="EventsStore.getEventsByType('Mu')">Entertainment</button>
|
||||
<button class="btn category" v-on:click.prevent="EventsStore.getEventsByType('Ed')">Education</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div v-if="!menuStore.isHidden">
|
||||
<div>
|
||||
<button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(0)">Today</button>
|
||||
<button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(1)">Tomorrow</button>
|
||||
<button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(2)">+ 2</button>
|
||||
<button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(3)">+ 3</button>
|
||||
<button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(4)">+ 4</button>
|
||||
<button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(5)">+ 5</button>
|
||||
<button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(6)">+ 6</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button class="btn category" v-on:click.prevent="EventsStore.getEventsByType('Mu')">Music</button>
|
||||
<button class="btn category" v-on:click.prevent="EventsStore.getEventsByType('Gv')">Government</button>
|
||||
<button class="btn category" v-on:click.prevent="EventsStore.getEventsByType('Ed')">Education</button>
|
||||
<button class="btn category" v-on:click.prevent="EventsStore.getEventsByType('Co')">Comedy</button>
|
||||
<button class="btn category" v-on:click.prevent="EventsStore.getEventsByType('Ot')">Other</button>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <span>
|
||||
<button id="filter-btn" v-if="menuStore.isHidden" v-on:click="menuStore.isHidden = !menuStore.isHidden">More Filters</button>
|
||||
<button id="filter-btn" v-if="!menuStore.isHidden" v-on:click="menuStore.isHidden = !menuStore.isHidden">Less Filters</button>
|
||||
<button id="filter-btn" v-on:click.prevent="EventsStore.fetchEvents()">Clear Filters</button>
|
||||
</span> -->
|
||||
<div class="text-center p-0">
|
||||
<button class="menu" v-on:click="menuStore.close_menu()">X</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.menu {
|
||||
color: #777 !important;
|
||||
background-color: #111;
|
||||
padding: .25em 1em .25em 1em;
|
||||
}
|
||||
|
||||
.ads {
|
||||
background-color: #222;
|
||||
border: .1em solid #fff;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 1rem 1rem 1rem 0rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input {
|
||||
border-radius: 25px;
|
||||
padding: .5rem;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 25px;
|
||||
padding: .5rem;
|
||||
margin: .75rem;
|
||||
background-color: orange;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#filter-btn {
|
||||
border-radius: 25px;
|
||||
padding: .5rem;
|
||||
margin: .75rem;
|
||||
background-color: cornflowerblue;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.search {
|
||||
padding: .5rem 2rem .5rem 2rem;
|
||||
}
|
||||
|
||||
.days {
|
||||
background-color: hsla(160, 100%, 37%, 1);
|
||||
padding: .5rem 1rem .5rem 1rem;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.category {
|
||||
/* background-color: hsla(160, 100%, 37%, 1); */
|
||||
padding: .5rem 1rem .5rem 1rem;
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
</style>
|
||||
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