mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-25 15:15:47 +00:00
eeeacc9b03
Add max-w-9xl mx-auto to section/container wrappers across the website so layout stays centered and capped at 96rem on screens wider than 1536px. ## Summary <!-- One sentence describing what changed and why. --> ## Changes - **What**: <!-- Core functionality added/modified --> - **Breaking**: <!-- Any breaking changes (if none, remove this line) --> - **Dependencies**: <!-- New dependencies (if none, remove this line) --> ## Review Focus <!-- Critical design decisions or edge cases that need attention --> <!-- If this PR fixes an issue, uncomment and update the line below --> <!-- Fixes #ISSUE_NUMBER --> ## Screenshots (if applicable) <!-- Add screenshots or video recording to help explain your changes --> Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
110 lines
2.9 KiB
Vue
110 lines
2.9 KiB
Vue
<script setup lang="ts">
|
||
import { cn } from '@comfyorg/tailwind-utils'
|
||
import { computed, reactive } from 'vue'
|
||
|
||
import type { Locale, TranslationKey } from '../../i18n/translations'
|
||
|
||
import { t } from '../../i18n/translations'
|
||
|
||
const {
|
||
locale = 'en',
|
||
headingKey,
|
||
faqPrefix,
|
||
faqCount
|
||
} = defineProps<{
|
||
locale?: Locale
|
||
headingKey: TranslationKey
|
||
faqPrefix: string
|
||
faqCount: number
|
||
}>()
|
||
|
||
const faqKeys: Array<{ q: TranslationKey; a: TranslationKey }> = Array.from(
|
||
{ length: faqCount },
|
||
(_, i) => ({
|
||
q: `${faqPrefix}.${i + 1}.q` as TranslationKey,
|
||
a: `${faqPrefix}.${i + 1}.a` as TranslationKey
|
||
})
|
||
)
|
||
|
||
const faqs = computed(() =>
|
||
faqKeys.map(({ q, a }) => ({
|
||
question: t(q, locale),
|
||
answer: t(a, locale)
|
||
}))
|
||
)
|
||
|
||
const expanded = reactive(faqKeys.map(() => false))
|
||
|
||
function toggle(index: number) {
|
||
expanded[index] = !expanded[index]
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<section class="max-w-9xl mx-auto px-4 py-24 md:px-20 md:py-40">
|
||
<div class="flex flex-col gap-6 md:flex-row md:gap-16">
|
||
<!-- Left heading -->
|
||
<div
|
||
class="bg-primary-comfy-ink sticky top-20 z-10 w-full shrink-0 self-start py-4 md:top-28 md:w-80 md:py-0"
|
||
>
|
||
<h2 class="text-primary-comfy-canvas text-4xl font-light md:text-5xl">
|
||
{{ t(headingKey, locale) }}
|
||
</h2>
|
||
</div>
|
||
|
||
<!-- Right FAQ list -->
|
||
<div class="flex-1">
|
||
<div
|
||
v-for="(faq, index) in faqs"
|
||
:key="index"
|
||
class="border-primary-comfy-canvas/20 border-b"
|
||
>
|
||
<button
|
||
:id="`faq-trigger-${index}`"
|
||
type="button"
|
||
:aria-expanded="expanded[index]"
|
||
:aria-controls="`faq-panel-${index}`"
|
||
:class="
|
||
cn(
|
||
'flex w-full cursor-pointer items-center justify-between text-left',
|
||
index === 0 ? 'pb-6' : 'py-6'
|
||
)
|
||
"
|
||
@click="toggle(index)"
|
||
>
|
||
<span
|
||
:class="
|
||
cn(
|
||
'text-lg font-light md:text-xl',
|
||
expanded[index]
|
||
? 'text-primary-comfy-yellow'
|
||
: 'text-primary-comfy-canvas'
|
||
)
|
||
"
|
||
>
|
||
{{ faq.question }}
|
||
</span>
|
||
<span
|
||
class="text-primary-comfy-yellow ml-4 shrink-0 text-2xl"
|
||
aria-hidden="true"
|
||
>
|
||
{{ expanded[index] ? '−' : '+' }}
|
||
</span>
|
||
</button>
|
||
<section
|
||
v-show="expanded[index]"
|
||
:id="`faq-panel-${index}`"
|
||
role="region"
|
||
:aria-labelledby="`faq-trigger-${index}`"
|
||
class="pb-6"
|
||
>
|
||
<p class="text-primary-comfy-canvas/70 text-sm whitespace-pre-line">
|
||
{{ faq.answer }}
|
||
</p>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|