diff --git a/components/app/AppFlatPlan.vue b/components/app/AppFlatPlan.vue deleted file mode 100644 index 6a8e0f054aa443da692a6635094c5613629c70d2..0000000000000000000000000000000000000000 --- a/components/app/AppFlatPlan.vue +++ /dev/null @@ -1,173 +0,0 @@ -<template> - <nav> - <nuxt-link - v-if="showNext && nextPage" - class="text-3xl pb-3 mb-3 block group" - :to="nextPage.to" - > - <span class="opacity-75">Page suivante</span> - <fa icon="arrow-right" class="mx-4"></fa> - <span class="font-semibold group-hover:underline"> - {{ nextPage.title }} - </span> - </nuxt-link> - - <section - class="section-flatplan gap-6 grid lg:grid-cols-4 md:grid-cols-2 group" - > - <nuxt-link - v-for="(section, i) in sections" - :key="i" - :to="section.to" - class="bg-blue-100 dark:bg-blue-900 px-4 py-4 pb-3 rounded transition hover:shadow-xl transform hover:-translate-y-0.5" - :class=" - showNext && - (nextPage && nextPage.to === section.to - ? 'ring-4 ring-blue-200 dark:ring-blue-800' - : 'bg-opacity-80 dark:bg-opacity-80 group-hover:bg-opacity-100') - " - > - <div class="flex items-center justify-between"> - <h2 class="font-semibold text-lg">{{ section.title }}</h2> - <fa icon="arrow-right" class="ml-4"></fa> - </div> - <ul class="mt-1 font-light list-flatplan"> - <li v-for="(item, ii) in section.children" :key="ii"> - {{ item }} - </li> - </ul> - </nuxt-link> - </section> - </nav> -</template> - -<script> -export default { - props: { - plan: { - type: String, - required: true, - }, - showNext: { - type: Boolean, - default: false, - }, - }, - data() { - return { - sections: [], - } - }, - async fetch() { - const document = await this.$content(this.plan).fetch() - - // This is ugly, but I don't found another way to extract title, link and li elements. - // It's work with 'content:file:beforeParse' nuxt-content hook. See in config.nuxt.js - this.sections = document.body.children - .filter((item) => item.tag === 'section') - .map((item) => { - const title = item.children.filter((item) => item.type === 'element')[0] - .children[1] - const children = item.children - .filter((item) => item.type === 'element')[1] - .children.filter((item) => item.type === 'element') - .map((li) => li.children[0].value) - return { - children, - title: title.children[0].value, - to: title.props.to, - } - }) - }, - computed: { - nextPage() { - const index = this.sections.findIndex( - (index) => index.to === this.$route.fullPath - ) - return this.sections[index + 1] ? this.sections[index + 1] : null - }, - }, -} -</script> - -<style lang="postcss" scoped> -.list-flatplan > li { - position: relative; - padding-left: 1.75em; - margin: 0.5em 0; - line-height: 1.2em; -} -.list-flatplan > li::before { - content: ''; - position: absolute; - background-color: #3b82f6; - border-radius: 50%; - width: 0.375em; - height: 0.375em; - top: 0.375em; - left: 0.25em; -} - -.section-flatplan .svg-inline--fa { - animation: shake 10s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite; - animation-delay: 5s; -} -.section-flatplan > a:nth-child(2) .svg-inline--fa { - animation-delay: 5.5s; -} -.section-flatplan > a:nth-child(3) .svg-inline--fa { - animation-delay: 6s; -} -.section-flatplan > a:nth-child(4) .svg-inline--fa { - animation-delay: 6.5s; -} -@keyframes shake { - 0% { - -webkit-transform: translate(2px, 1px) rotate(0deg); - } - - 1% { - -webkit-transform: translate(-1px, -2px) rotate(-3deg); - } - - 2% { - -webkit-transform: translate(-3px, 0px) rotate(3deg); - } - - 3% { - -webkit-transform: translate(0px, 2px) rotate(0deg); - } - - 4% { - -webkit-transform: translate(1px, -1px) rotate(3deg); - } - - 5% { - -webkit-transform: translate(-1px, 2px) rotate(-3deg); - } - - 6% { - -webkit-transform: translate(-3px, 1px) rotate(0deg); - } - - 7% { - -webkit-transform: translate(2px, 1px) rotate(-3deg); - } - - 8% { - -webkit-transform: translate(-1px, -1px) rotate(3deg); - } - - 9% { - -webkit-transform: translate(2px, 2px) rotate(0deg); - } - - 10% { - -webkit-transform: translate(1px, -2px) rotate(-3deg); - } - - 11% { - transform: translate(0, 0) rotate(0deg); - } -} -</style> diff --git a/pages/_slug.vue b/pages/_slug.vue index b460a21d1998bcfaa060d1328f712ec910123ec8..18cd52205a1ad602f48938dd06fdbc32e3e9d63a 100644 --- a/pages/_slug.vue +++ b/pages/_slug.vue @@ -10,7 +10,7 @@ </template> <template #footer> - <AppFlatPlan + <PageFlatPlan v-if="document.plan" :plan="document.plan" class="border-t mt-20 py-6" diff --git a/pages/index.vue b/pages/index.vue index ee53c3037299b046e2cf2ea47beb881858696fec..7ab591aa23a591f93b1c6fb5b1a64aa04d4c1aab 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -2,7 +2,7 @@ <div> <HomeHero :document="hero" /> - <AppFlatPlan class="container mb-12" plan="ui/main-flatplan" /> + <PageFlatPlan class="container mb-12" plan="ui/main-flatplan" /> <HomeSearchInput />