-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added transition for question loading and random question button
- Loading branch information
Showing
10 changed files
with
1,469 additions
and
1,434 deletions.
There are no files selected for viewing
2 changes: 1 addition & 1 deletion
2
vue/dist/assets/AboutView-DqBc_98r.js → vue/dist/assets/AboutView-Da__H575.js
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,37 +1,54 @@ | ||
| <template> | ||
| <div class="card mt-12"> | ||
| <h3>Topics</h3> | ||
| <h3>Select your topics of interest</h3> | ||
| <div class="flex flex-wrap items-center gap-4 justify-center my-4"> | ||
| <div class="flex" v-for="topic in topics" :key="topic.id"> | ||
| <Checkbox v-model="selectedTopics" name="topics" :value="topic.id" /> | ||
| <div class="flex" v-for="topic in TOPICS" :key="topic.id"> | ||
| <Checkbox v-model="selectedTopics" name="topics" :value="topic.id" :input-id="topic.id" /> | ||
| <label :for="topic.id" class="ms-2 me-4">{{ topic.t }}</label> | ||
| </div> | ||
| </div> | ||
| <div class="flex flex-wrap items-center gap-4 justify-center my-8"> | ||
| <InputText type="text" v-model="email" placeholder="Your email" /> | ||
| <Button label="Subscribe" icon="pi pi-discord" raised rounded class="font-bold px-8 py-4 whitespace-nowrap" /> | ||
|
|
||
| <div class="flex flex-wrap items-center gap-4 justify-center my-12"> | ||
| <div class=" flex-grow text-start mb-auto"> | ||
| <Button label="Try a random question" icon="pi pi-sparkles" severity="secondary" rounded class="whitespace-nowrap" @click="showRandomQuestion" /> | ||
| </div> | ||
| <div class="flex-shrink"> | ||
| <InputText type="email" v-model="email" placeholder="Your email" name="email" /> | ||
| <Button label="Subscribe" icon="pi pi-envelope" raised rounded class="font-bold px-8 py-4 ms-4 whitespace-nowrap" :disabled="!canSubscribe" /> | ||
| <p v-if="email && !selectedTopics.length" class="mt-2 text-sm text-start text-slate-500">Select at least one topic</p> | ||
| </div> | ||
|
|
||
| </div> | ||
| <SampleQuestion v-if="currentTopic" :topic="currentTopic" /> | ||
| <TransitionSlot> | ||
| <SampleQuestion v-if="currentTopic" :topic="currentTopic" /> | ||
| </TransitionSlot> | ||
| </div> | ||
| </template> | ||
|
|
||
|
|
||
| <script setup lang="ts"> | ||
| import { ref, watch } from "vue"; | ||
| import { ref, watch, computed } from "vue"; | ||
| import Button from 'primevue/button'; | ||
| import Checkbox from 'primevue/checkbox'; | ||
| import InputText from 'primevue/inputtext'; | ||
| import SampleQuestion from "./SampleQuestion.vue"; | ||
| import { TOPICS } from "@/constants"; | ||
| import TransitionSlot from "./TransitionSlot.vue"; | ||
| const topics = ref(TOPICS); | ||
| const selectedTopics = ref<Array<string>>([]); | ||
| const email = ref(""); | ||
| const currentTopic = ref<string>(""); | ||
| watch(selectedTopics, (newVal, oldVal) => { | ||
| if (newVal.length > 0) currentTopic.value = newVal[newVal.length - 1]; | ||
| console.log("currentTopic", currentTopic.value); | ||
| }); | ||
| const canSubscribe = computed(() => selectedTopics.value.length > 0 && email.value.length > 0); | ||
| /// Show a random question from the selected topics or all topics | ||
| function showRandomQuestion() { | ||
| if (selectedTopics.value.length) { | ||
| currentTopic.value = selectedTopics.value[Math.floor(Math.random() * selectedTopics.value.length)]; | ||
| } else { | ||
| currentTopic.value = TOPICS[Math.floor(Math.random() * TOPICS.length)].id; | ||
| } | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| <template> | ||
| <Transition name="fade" enter-active-class="duration-1000 ease-out" enter-from-class="transform opacity-0" enter-to-class="opacity-100" leave-active-class="duration-1000 ease-in" leave-from-class="opacity-100" leave-to-class="transform opacity-0"> | ||
| <slot></slot> | ||
| </Transition> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { Transition } from "vue"; | ||
| </script> |