Bommels05/Modrinth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(servers): faqs not opening on nav (#2897)

Browse Source 
* feat(servers): allow scrolling faq into view via hashes

* fix(servers): hide webkit details marker for faq

* fix(servers): faqs not opening on nav

---------

Signed-off-by: nullptr <62841684+not-nullptr@users.noreply.github.com>
This commit is contained in:
nullptr 2024-11-03 17:43:23 +00:00 committed by GitHub
parent 66d943d391
commit 3b966c03ee
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
apps/frontend/src/pages/servers/index.vue
View File

@ -403,7 +403,7 @@
<div class="relative flex flex-col gap-4 rounded-2xl bg-bg p-6 text-left md:p-12"> <div class="relative flex flex-col gap-4 rounded-2xl bg-bg p-6 text-left md:p-12">
<h1 class="m-0 text-lg font-bold">Frequently Asked Questions</h1> <h1 class="m-0 text-lg font-bold">Frequently Asked Questions</h1>
<div class="details-hide flex flex-col gap-1"> <div class="details-hide flex flex-col gap-1">
<details pyro-hash="cpus" class="group" :open="route.hash === '#cpus'"> <details pyro-hash="cpus" class="group" :open="$route.hash === '#cpus'">
<summary class="flex cursor-pointer items-center py-3 font-bold text-contrast"> <summary class="flex cursor-pointer items-center py-3 font-bold text-contrast">
<span class="mr-2 transition-transform duration-200 group-open:rotate-90"> <span class="mr-2 transition-transform duration-200 group-open:rotate-90">
<RightArrowIcon /> <RightArrowIcon />
@ -416,7 +416,7 @@
</p> </p>
</details> </details>
<details pyro-hash="ddos" class="group" :open="route.hash === '#ddos'"> <details pyro-hash="ddos" class="group" :open="$route.hash === '#ddos'">
<summary class="flex cursor-pointer items-center py-3 font-bold text-contrast"> <summary class="flex cursor-pointer items-center py-3 font-bold text-contrast">
<span class="mr-2 transition-transform duration-200 group-open:rotate-90"> <span class="mr-2 transition-transform duration-200 group-open:rotate-90">
<RightArrowIcon /> <RightArrowIcon />
@ -430,7 +430,7 @@
</p> </p>
</details> </details>
<details pyro-hash="region" class="group" :open="route.hash === '#region'"> <details pyro-hash="region" class="group" :open="$route.hash === '#region'">
<summary class="flex cursor-pointer items-center py-3 font-bold text-contrast"> <summary class="flex cursor-pointer items-center py-3 font-bold text-contrast">
<span class="mr-2 transition-transform duration-200 group-open:rotate-90"> <span class="mr-2 transition-transform duration-200 group-open:rotate-90">
<RightArrowIcon /> <RightArrowIcon />
@ -444,7 +444,7 @@
</p> </p>
</details> </details>
<details pyro-hash="storage" class="group" :open="route.hash === '#storage'"> <details pyro-hash="storage" class="group" :open="$route.hash === '#storage'">
<summary class="flex cursor-pointer items-center py-3 font-bold text-contrast"> <summary class="flex cursor-pointer items-center py-3 font-bold text-contrast">
<span class="mr-2 transition-transform duration-200 group-open:rotate-90"> <span class="mr-2 transition-transform duration-200 group-open:rotate-90">
<RightArrowIcon /> <RightArrowIcon />
@ -457,7 +457,7 @@
</p> </p>
</details> </details>
<details pyro-hash="players" class="group" :open="route.hash === '#players'"> <details pyro-hash="players" class="group" :open="$route.hash === '#players'">
<summary class="flex cursor-pointer items-center py-3 font-bold text-contrast"> <summary class="flex cursor-pointer items-center py-3 font-bold text-contrast">
<span class="mr-2 transition-transform duration-200 group-open:rotate-90"> <span class="mr-2 transition-transform duration-200 group-open:rotate-90">
<RightArrowIcon /> <RightArrowIcon />
@ -895,6 +895,7 @@ const scrollToFaq = () => {
// where pyro-hash === route.hash // where pyro-hash === route.hash
const faq = document.querySelector(`[pyro-hash="${route.hash.slice(1)}"]`); const faq = document.querySelector(`[pyro-hash="${route.hash.slice(1)}"]`);
if (faq) { if (faq) {
faq.open = true;
const top = faq.getBoundingClientRect().top; const top = faq.getBoundingClientRect().top;
const offset = window.innerHeight / 2 - faq.clientHeight / 2; const offset = window.innerHeight / 2 - faq.clientHeight / 2;
window.scrollTo({ top: window.scrollY + top - offset, behavior: "smooth" }); window.scrollTo({ top: window.scrollY + top - offset, behavior: "smooth" });