From 53630565ac154370b4fe4aa2cb8c7e3e2a0c8784 Mon Sep 17 00:00:00 2001
From: ManUtopiK <emmanuel.salomon@gmail.com>
Date: Wed, 22 Sep 2021 15:09:38 +0200
Subject: [PATCH] refactoring: rename page bottom to page edit
---
components/page/PageContainer.vue | 2 +-
.../page/{PageBottom.vue => PageEdit.vue} | 1 +
components/page/PageFlatPlan.vue | 174 ++++++++++++++++++
pages/faq/index.vue | 2 +-
4 files changed, 177 insertions(+), 2 deletions(-)
rename components/page/{PageBottom.vue => PageEdit.vue} (98%)
create mode 100644 components/page/PageFlatPlan.vue
diff --git a/components/page/PageContainer.vue b/components/page/PageContainer.vue
index edb93c04..e3a95d77 100644
--- a/components/page/PageContainer.vue
+++ b/components/page/PageContainer.vue
@@ -12,7 +12,7 @@
>
<slot name="sidebar" />
- <PageBottom :document="document" class="w-full border-t my-10 pt-2" />
+ <PageEdit :document="document" class="w-full border-t my-10 pt-2" />
</div>
</div>
diff --git a/components/page/PageBottom.vue b/components/page/PageEdit.vue
similarity index 98%
rename from components/page/PageBottom.vue
rename to components/page/PageEdit.vue
index bc34dec2..8c3fba88 100644
--- a/components/page/PageBottom.vue
+++ b/components/page/PageEdit.vue
@@ -28,6 +28,7 @@
<script>
export default {
+ name: 'PageEdit',
props: {
document: {
type: Object,
diff --git a/components/page/PageFlatPlan.vue b/components/page/PageFlatPlan.vue
new file mode 100644
index 00000000..e2682b40
--- /dev/null
+++ b/components/page/PageFlatPlan.vue
@@ -0,0 +1,174 @@
+<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 {
+ name: 'PageFlatPlan',
+ 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/faq/index.vue b/pages/faq/index.vue
index 1acc76e8..c7ad314b 100644
--- a/pages/faq/index.vue
+++ b/pages/faq/index.vue
@@ -43,7 +43,7 @@
/>
</div>
- <PageBottom :document="documentFAQ" class="w-full border-t my-8 pt-2" />
+ <PageEdit :document="documentFAQ" class="w-full border-t my-8 pt-2" />
</template>
</SearchContainer>
</template>
--
GitLab