Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(marketplace): Links to faq questions #1185

Merged
merged 3 commits into from
Feb 21, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 51 additions & 4 deletions frontend/marketplace/src/components/FAQCollapse.vue
Original file line number Diff line number Diff line change
@@ -1,15 +1,62 @@
<script setup lang="ts">
import { onMounted, ref, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
export interface FAQCollapseProps {
id: string;
title: string;
content: string;
name: string;
}
defineProps<FAQCollapseProps>();
const props = defineProps<FAQCollapseProps>();
const rootElRef = ref<HTMLElement | null>(null);
const route = useRoute();
const router = useRouter();
const isChecked = computed(() => {
const { hash } = route;
return hash === `#${props.id}`;
});

onMounted(() => {
const { hash } = route;
if (hash === `#${props.id}` && rootElRef.value) {
const topPos = rootElRef.value.getBoundingClientRect().top + window.scrollY;
// need to push it back to the next tick to ensure the element is in the DOM
setTimeout(() => {
window.scrollTo({
top: topPos, // scroll so that the element is at the top of the view
behavior: "smooth", // smooth scroll
});
}, 1);
}
});

const handleClick = () => {
if (isChecked.value) {
router.push({ hash: "" });
jschill marked this conversation as resolved.
Show resolved Hide resolved
} else {
router.push({ hash: `#${props.id}` });
}
};
</script>
<template>
<div tabindex="0" class="collapse group collapse-arrow mb-1">
<div class="flex collapse-title text-white bg-mediumGray">
<div
:id="props.id"
ref="rootElRef"
class="collapse group collapse-arrow mb-1"
>
<input
type="radio"
:name="props.name"
:checked="isChecked"
:onClick="handleClick"
/>
<div
class="flex collapse-title text-white bg-mediumGray"
:onClick="handleClick"
>
<div
class="w-7 h-7 border-2 border-white rounded-full mr-3 group-focus:bg-greenPrimary"
class="w-7 h-7 border-2 border-white rounded-full mr-3"
:class="{ 'bg-greenPrimary': isChecked }"
/>
{{ title }}
</div>
Expand Down
97 changes: 80 additions & 17 deletions frontend/marketplace/src/pages/FAQPage.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,79 @@
<script setup lang="ts">
import FAQCollapse from "@/components/FAQCollapse.vue";
const faqData = [
{
id: "foo",
title: "Frequently asked q 1",
content:
"Decentralizing the new (circular) economy so everyone can get a fair share of the upside of making the world a cleaner and better place. Decentralizing the new (circular) economy",
},
{
id: "bar",
title: "Lorem ipsum dolor sit amet",
content:
"Decentralizing the new (circular) economy so everyone can get a fair share of the upside of making the world a cleaner and better place. Decentralizing the new (circular) economy",
},
{
id: "baz",
title: "Ipsum dolor sit amet",
content:
"Decentralizing the new (circular) economy so everyone can get a fair share of the upside of making the world a cleaner and better place. Decentralizing the new (circular) economy",
},
{
id: "qux",
title: "Sit amet lorem ipsum",
content:
"Decentralizing the new (circular) economy so everyone can get a fair share of the upside of making the world a cleaner and better place. Decentralizing the new (circular) economy",
},
{
id: "foo1",
title: "Frequently asked q 1",
content:
"Decentralizing the new (circular) economy so everyone can get a fair share of the upside of making the world a cleaner and better place. Decentralizing the new (circular) economy",
},
{
id: "bar1",
title: "Lorem ipsum dolor sit amet",
content:
"Decentralizing the new (circular) economy so everyone can get a fair share of the upside of making the world a cleaner and better place. Decentralizing the new (circular) economy",
},
{
id: "baz1",
title: "Ipsum dolor sit amet",
content:
"Decentralizing the new (circular) economy so everyone can get a fair share of the upside of making the world a cleaner and better place. Decentralizing the new (circular) economy",
},
{
id: "qux1",
title: "Sit amet lorem ipsum",
content:
"Decentralizing the new (circular) economy so everyone can get a fair share of the upside of making the world a cleaner and better place. Decentralizing the new (circular) economy",
},
{
id: "foo2",
title: "Frequently asked q 1",
content:
"Decentralizing the new (circular) economy so everyone can get a fair share of the upside of making the world a cleaner and better place. Decentralizing the new (circular) economy",
},
{
id: "bar2",
title: "Lorem ipsum dolor sit amet",
content:
"Decentralizing the new (circular) economy so everyone can get a fair share of the upside of making the world a cleaner and better place. Decentralizing the new (circular) economy",
},
{
id: "baz2",
title: "Ipsum dolor sit amet",
content:
"Decentralizing the new (circular) economy so everyone can get a fair share of the upside of making the world a cleaner and better place. Decentralizing the new (circular) economy",
},
{
id: "qux2",
title: "Sit amet lorem ipsum",
content:
"Decentralizing the new (circular) economy so everyone can get a fair share of the upside of making the world a cleaner and better place. Decentralizing the new (circular) economy",
},
];
</script>

<template>
Expand All @@ -8,23 +82,12 @@ import FAQCollapse from "@/components/FAQCollapse.vue";

<div class="my-5 text-title18">
<FAQCollapse
title="Frequently asked question"
content="Decentralizing the new (circular) economy so everyone can get a fair share of the upside of making the world a cleaner and better place. Decentralizing the new (circular) economy"
/>

<FAQCollapse
title="Frequently asked question"
content="Decentralizing the new (circular) economy so everyone can get a fair share of the upside of making the world a cleaner and better place. Decentralizing the new (circular) economy"
/>

<FAQCollapse
title="Frequently asked question"
content="Decentralizing the new (circular) economy so everyone can get a fair share of the upside of making the world a cleaner and better place. Decentralizing the new (circular) economy"
/>

<FAQCollapse
title="Frequently asked question"
content="Decentralizing the new (circular) economy so everyone can get a fair share of the upside of making the world a cleaner and better place. Decentralizing the new (circular) economy"
v-for="faqItem in faqData"
:key="faqItem.id"
:id="faqItem.id"
:title="faqItem.title"
:content="faqItem.content"
name="faq"
/>
</div>
</div>
Expand Down
Loading