From 58b5c67d0c2a19286537c69a127bbef8f739bfba Mon Sep 17 00:00:00 2001
From: nguyen van thai <nguyenvanthailtv@gmail.com>
Date: Mon, 3 Jun 2024 21:53:23 +0700
Subject: [PATCH] thainv-dev: fix ui

---
 assets/styles/style.scss                      | 10 +++----
 .../templates/other/breadcrumb/Default.vue    | 27 ++++++++++++-------
 .../other/copyLinks/ArticleButton.vue         | 13 ++++++++-
 .../templates/other/details/default.vue       | 16 ++++++-----
 .../templates/other/details/emagazine.vue     | 21 ++++++++++-----
 .../templates/other/details/infographics.vue  | 22 ++++++++-------
 stores/dynamic-page.ts                        | 18 ++++++++++++-
 7 files changed, 87 insertions(+), 40 deletions(-)

diff --git a/assets/styles/style.scss b/assets/styles/style.scss
index 21174f1..01e458b 100644
--- a/assets/styles/style.scss
+++ b/assets/styles/style.scss
@@ -17,11 +17,11 @@ div[layout="ARTICLE_DETAIL_EMAGAZINE"] {
         @apply lg:max-w-640px mx-auto;
     }
 
-    @at-root .section_layout{
+    // @at-root .section_layout{
 
-        & div[layout="BREADCRUM_DEFAULT"] {
-            @apply lg:max-w-640px mx-auto;
-        }
-    }
+    //     & div[layout="BREADCRUM_DEFAULT"] {
+    //         @apply lg:max-w-640px mx-auto;
+    //     }
+    // }
 
 }
\ No newline at end of file
diff --git a/components/dynamic-page/page-component/templates/other/breadcrumb/Default.vue b/components/dynamic-page/page-component/templates/other/breadcrumb/Default.vue
index a89d103..086f648 100644
--- a/components/dynamic-page/page-component/templates/other/breadcrumb/Default.vue
+++ b/components/dynamic-page/page-component/templates/other/breadcrumb/Default.vue
@@ -1,16 +1,23 @@
 <script setup lang="ts">
-import isEmpty from "lodash/isEmpty";
-const emit = defineEmits(['dropData', 'selectComponent'])
 
-const _props = defineProps<{
-  dataResult?: any[]
-}>()
-
-const SETTING_OPTIONS = {
-  MAX_ELEMENT: 3
+import { useDynamicPageStore } from "~/stores/dynamic-page"; 
+if(!localStorage.getItem('step')) {
+  localStorage.setItem('step', 0)
 }
+useDynamicPageStore().step = localStorage.getItem('step') ?? 0
+function increase() {
+  useDynamicPageStore().step = Number(useDynamicPageStore().step) + 2
+  localStorage.setItem('step', useDynamicPageStore().step)
+}
+
+function decrease() {
+  useDynamicPageStore().step = Number(useDynamicPageStore().step) - 2
+  localStorage.setItem('step', useDynamicPageStore().step)
+}
+
 </script>
 <template>
+
   <div class="flex justify-between items-center">
     <ul class="flex gap-6 items-center text-md">
       <li class="first:text-primary-600 font-semibold">
@@ -19,11 +26,11 @@ const SETTING_OPTIONS = {
     </ul>
 
     <div class="flex gap-1">
-      <div class="w-8 h-8 bg-slate-100 rounded-full relative cursor-pointer hover:bg-primary-100 hover:text-primary-600">
+      <div @click="increase()" class="w-8 h-8 bg-slate-100 rounded-full relative cursor-pointer hover:bg-primary-100 hover:text-primary-600">
         <svg class="text-16px absolute top-50% left-40% translate-y--50% translate-x--45%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11.246 15H4.75416L2.75416 20H0.600098L7.0001 4H9.0001L15.4001 20H13.246L11.246 15ZM10.446 13L8.0001 6.88516L5.55416 13H10.446ZM21.0001 12.5351V12H23.0001V20H21.0001V19.4649C20.4118 19.8052 19.7287 20 19.0001 20C16.791 20 15.0001 18.2091 15.0001 16C15.0001 13.7909 16.791 12 19.0001 12C19.7287 12 20.4118 12.1948 21.0001 12.5351ZM19.0001 18C20.1047 18 21.0001 17.1046 21.0001 16C21.0001 14.8954 20.1047 14 19.0001 14C17.8955 14 17.0001 14.8954 17.0001 16C17.0001 17.1046 17.8955 18 19.0001 18Z"></path></svg>
         <svg  class="absolute right-1 top-1 w-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>
       </div>
-      <div class="w-8 h-8 bg-slate-100 rounded-full relative cursor-pointer hover:bg-primary-100 hover:text-primary-600">
+      <div @click="decrease()" class="w-8 h-8 bg-slate-100 rounded-full relative cursor-pointer hover:bg-primary-100 hover:text-primary-600">
         <svg class="text-16px absolute top-50% left-40% translate-y--50% translate-x--45%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11.246 15H4.75416L2.75416 20H0.600098L7.0001 4H9.0001L15.4001 20H13.246L11.246 15ZM10.446 13L8.0001 6.88516L5.55416 13H10.446ZM21.0001 12.5351V12H23.0001V20H21.0001V19.4649C20.4118 19.8052 19.7287 20 19.0001 20C16.791 20 15.0001 18.2091 15.0001 16C15.0001 13.7909 16.791 12 19.0001 12C19.7287 12 20.4118 12.1948 21.0001 12.5351ZM19.0001 18C20.1047 18 21.0001 17.1046 21.0001 16C21.0001 14.8954 20.1047 14 19.0001 14C17.8955 14 17.0001 14.8954 17.0001 16C17.0001 17.1046 17.8955 18 19.0001 18Z"></path></svg>
         <svg class="absolute right-1 top-1 w-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5 11V13H19V11H5Z"></path></svg>
       </div>
diff --git a/components/dynamic-page/page-component/templates/other/copyLinks/ArticleButton.vue b/components/dynamic-page/page-component/templates/other/copyLinks/ArticleButton.vue
index 683a151..749baf7 100644
--- a/components/dynamic-page/page-component/templates/other/copyLinks/ArticleButton.vue
+++ b/components/dynamic-page/page-component/templates/other/copyLinks/ArticleButton.vue
@@ -3,6 +3,17 @@ const isBookmark = ref(false)
 const onClickBookmark = () => {
   isBookmark.value = !isBookmark.value
 }
+async function copyLink() {
+  try {
+    const url = window.location.href
+    await navigator.clipboard.writeText(url)
+    alert('copy link thành công')
+
+  } catch (error) {
+    alert(error)
+  }
+
+}
 </script>
 <template>
   <div class="py-5 flex flex-wrap justify-between items-center">
@@ -17,7 +28,7 @@ const onClickBookmark = () => {
     </div>
 
     <div class="flex gap-4 items-center">
-      <button title="Copy link" class="w-12 h-3rem rounded-full flex items-center justify-center bg-white border-1px shadow hover:bg-primary-100 hover:text-primary-600 cursor-pointer text-2xl">
+      <button @click="copyLink()" title="Copy link" class="w-12 h-3rem rounded-full flex items-center justify-center bg-white border-1px shadow hover:bg-primary-100 hover:text-primary-600 cursor-pointer text-2xl">
         <Icon name="bi:link-45deg" />
       </button>
     </div>
diff --git a/components/dynamic-page/page-component/templates/other/details/default.vue b/components/dynamic-page/page-component/templates/other/details/default.vue
index fb33191..2ceadb5 100644
--- a/components/dynamic-page/page-component/templates/other/details/default.vue
+++ b/components/dynamic-page/page-component/templates/other/details/default.vue
@@ -1,15 +1,19 @@
 <script setup lang="ts">
+import { breakpoint } from '~/definitions';
+import { useWindowSize } from '@vueuse/core'
+const { width } = useWindowSize()
 import { useArticleStore } from '~/stores/articles';
+import { useDynamicPageStore } from "~/stores/dynamic-page"; 
 const { currentArticle } = storeToRefs(useArticleStore());
+const { step } = storeToRefs(useDynamicPageStore());
+
 </script>
 <template>
     <div class="content" v-if="currentArticle">
-        <h1 v-html="currentArticle?.sub" class="text-xl font-bold opacity-60 pb-1"></h1>
-        <h3 class="text-2xl font-bold sm:text-3xl xl:text-4xl pb-1" v-html="currentArticle?.title"></h3>
-        <div v-if="currentArticle?.intro" v-html="currentArticle?.intro" class="font-semibold text-xl tracking-widest pb-1"></div>
-        <div id="article-detail" :class="'text-[15px] tracking-wider'" v-html="currentArticle.detail"
-                        class="[&_img]:mx-auto">
-                    </div>
+        <h1 id="sub" v-html="currentArticle?.sub"  class=" font-bold opacity-60 pb-1" :style="{ 'font-size': `${16 + Number(step)}px`}"></h1>
+        <h3 id="title" :style="{ 'font-size': width > breakpoint.lg ? `${36 + Number(step)}px` : `${20 + Number(step)}px`}" class="font-bold pb-1" v-html="currentArticle?.title"></h3>
+        <div id="intro" v-if="currentArticle?.intro" v-html="currentArticle?.intro" class="font-semibold tracking-widest pb-1" :style="{'font-size': `${16 + Number(step)}px`}"></div>
+        <div id="article-detail" :class="'tracking-wider'" v-html="currentArticle.detail" class="[&_img]:mx-auto" :style="{ 'font-size': `${16 + Number(step)}px`}"> </div>
     </div>
 </template>
 
diff --git a/components/dynamic-page/page-component/templates/other/details/emagazine.vue b/components/dynamic-page/page-component/templates/other/details/emagazine.vue
index b68c0d7..f2a49e2 100644
--- a/components/dynamic-page/page-component/templates/other/details/emagazine.vue
+++ b/components/dynamic-page/page-component/templates/other/details/emagazine.vue
@@ -1,16 +1,23 @@
 <script setup lang="ts">
 import { useArticleStore } from '~/stores/articles';
+import { breakpoint } from '~/definitions';
+import { useWindowSize } from '@vueuse/core'
+
+const { width } = useWindowSize()
+import { useDynamicPageStore } from "~/stores/dynamic-page"; 
 const { currentArticle } = storeToRefs(useArticleStore());
+const { step } = storeToRefs(useDynamicPageStore());
 
 </script>
 <template>
     <div class="content" v-if="currentArticle">
-        <h1 id="sub" v-html="currentArticle?.sub" class="text-xl font-bold opacity-60 pb-1"></h1>
-        <h3 id="title" class="text-2xl font-bold sm:text-3xl xl:text-4xl pb-1" v-html="currentArticle?.title"></h3>
-        <div id="intro" v-if="currentArticle?.intro" v-html="currentArticle?.intro" class="font-semibold text-xl tracking-widest pb-1"></div>
-        <div id="article-detail" :class="'text-[15px] tracking-wider'" v-html="currentArticle.detail"
-                        class="[&_img]:mx-auto">
-                    </div>
+        <h1 id="sub" v-html="currentArticle?.sub"  class=" font-bold opacity-60 pb-1" :style="{ 'font-size': `${16 + Number(step)}px`}"></h1>
+        <h3 id="title" :style="{ 'font-size': width > breakpoint.lg ? `${36 + Number(step)}px` : `${20 + Number(step)}px`}" class="font-bold pb-1" v-html="currentArticle?.title"></h3>
+        <div id="intro" v-if="currentArticle?.intro" v-html="currentArticle?.intro" class="font-semibold tracking-widest pb-1" :style="{'font-size': `${16 + Number(step)}px`}"></div>
+        <div id="article-detail" :class="' tracking-wider'" v-html="currentArticle.detail" class="[&_img]:mx-auto" :style="{ 'font-size': `${16 + Number(step)}px`}"> </div>
     </div>
 </template>
-<style lang="scss"></style>
\ No newline at end of file
+
+<style lang="scss" scoped>
+#title {}
+</style>
\ No newline at end of file
diff --git a/components/dynamic-page/page-component/templates/other/details/infographics.vue b/components/dynamic-page/page-component/templates/other/details/infographics.vue
index ca2c73f..ccd0384 100644
--- a/components/dynamic-page/page-component/templates/other/details/infographics.vue
+++ b/components/dynamic-page/page-component/templates/other/details/infographics.vue
@@ -1,22 +1,24 @@
 <script setup lang="ts">
 import { useArticleStore } from '~/stores/articles';
-const emit = defineEmits(['dropData', 'selectComponent'])
-const { currentArticle } = storeToRefs(useArticleStore());
+import { breakpoint } from '~/definitions';
+import { useWindowSize } from '@vueuse/core'
 
-const _props = defineProps<{
-  dataResult?: any[]
-}>()
+const { width } = useWindowSize()
+import { useDynamicPageStore } from "~/stores/dynamic-page"; 
+const { currentArticle } = storeToRefs(useArticleStore());
+const { step } = storeToRefs(useDynamicPageStore());
 
 
 </script>
 <template>
     <div class="content" v-if="currentArticle">
-        <h3 class="text-2xl font-bold sm:text-3xl xl:text-4xl pb-1" v-html="currentArticle?.title"></h3>
+        <h1 id="sub" v-html="currentArticle?.sub"  class=" font-bold opacity-60 pb-1" :style="{ 'font-size': `${16 + Number(step)}px`}"></h1>
+        <h3 id="title" :style="{ 'font-size': width > breakpoint.lg ? `${36 + Number(step)}px` : `${20 + Number(step)}px`}" class="font-bold pb-1" v-html="currentArticle?.title"></h3>
+
         <!-- <div class="author">Tác giả - Thời gian tạo</div> -->
-        <div v-if="currentArticle?.intro" v-html="currentArticle?.intro" class="font-semibold text-xl tracking-widest pb-1"></div>
-        <div id="article-detail" :class="'text-[15px] tracking-wider'" v-html="currentArticle.detail"
-                        class="[&_img]:mx-auto">
-                    </div>
+        <div id="intro" v-if="currentArticle?.intro" v-html="currentArticle?.intro" class="font-semibold tracking-widest pb-1" :style="{'font-size': `${16 + Number(step)}px`}"></div>
+        <div id="article-detail" :class="'text-[16px] tracking-wider'" v-html="currentArticle.detail" class="[&_img]:mx-auto" :style="{ 'font-size': `${16 + Number(step)}px`}"> </div>
+
     </div>
 </template>
 
diff --git a/stores/dynamic-page.ts b/stores/dynamic-page.ts
index ac4dc4e..78f9665 100644
--- a/stores/dynamic-page.ts
+++ b/stores/dynamic-page.ts
@@ -1,9 +1,11 @@
 import { defineStore, acceptHMRUpdate } from "pinia";
-
+import { useLocalStorage } from "@vueuse/core";
 export const useDynamicPageStore = defineStore("dynamicPageStore", () => {
     const currentPage = ref<any>({});
     const sectionPublished = ref<any[]>([]);
     const componentPublished = ref<any[]>([]);
+    const step = ref<number>(0)
+
 
     async function fetchPageByCode(slug: any) {
       try {
@@ -61,16 +63,30 @@ export const useDynamicPageStore = defineStore("dynamicPageStore", () => {
         setComponentPublished();
     };
 
+
+    function increaseStep(increase: number) {
+      step.value += increase
+      return step.value
+    }
+
+    function decreaseStep(decrease: number) {
+      step.value -= decrease
+      return step.value
+    }
     return {
         currentPage,
         sectionPublished,
         componentPublished,
+        step,
 
         fetchPageByCode,
         fetchPageById,
         setSectionPublished,
         setComponentPublished,
         setDataQuery,
+
+        increaseStep,
+        decreaseStep,
     };
 });