83 lines
2.8 KiB
Vue
83 lines
2.8 KiB
Vue
<template>
|
|
<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 Business Community, <a href='https://canin.dreamfreely.org/the-dbc' target='_blank'>click here</a></b>.<br/><br/>Or, let me know ...<br/><br/><iframe class='airtable-embed' src='https://airtable.com/embed/appzQxsifc8AnD1zA/shr317pX2OVA7zfIk' frameborder='0' onmousewheel='' width='100%' height='533' style='background: transparent; border: 1px solid #ccc;'></iframe>", 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> |