98 lines
2.9 KiB
Vue
98 lines
2.9 KiB
Vue
|
<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>
|