fix bugs

wevisdemo · Dec 14, 2023 · 857eb59 · 857eb59
1 parent 5d7a740
commit 857eb59
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 14 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -26,7 +26,7 @@ export default function IndexPage() {
         <SectionPart1 />
         <SectionPart2 />
         <SectionPart3 />
-        <div className="pointer-events-auto bg-black">
+        <div id="chart24" className="pointer-events-auto bg-black">
           <SectionPartEnd />
         </div>
       </div>

diff --git a/components/ChartGroup.tsx b/components/ChartGroup.tsx
@@ -29,6 +29,7 @@ export default function ChartGroup() {
     interactable,
     suggests,
     mode,
+    showChart,
     getBarDataByYear,
     getStackDataByYear,
   } = useChart();
@@ -134,7 +135,7 @@ export default function ChartGroup() {
             </div>
             {guideYears.includes(i) && (
               <div className="absolute inset-x-0 bottom-0 flex flex-col items-center justify-end">
-                <div className="wv-h11 inline-flex items-center gap-1 rounded-t-md bg-highlight p-1 font-bold text-black lg:px-3">
+                <div className="wv-h11 inline-flex max-w-[85%] items-center justify-center gap-1 rounded-t-md bg-highlight p-1 font-bold text-black md:px-3">
                   <CustomImg
                     src="/images/icon_star_2.webp"
                     className="w-3 lg:w-5"
@@ -289,7 +290,10 @@ export default function ChartGroup() {
     <>
       <div
         id="chart"
-        className="fixed inset-0 mx-auto flex max-w-[1108px] flex-col justify-center gap-3 lg:gap-4"
+        className={twMerge(
+          'fixed inset-0 mx-auto flex max-w-[1108px] flex-col justify-center gap-3 lg:gap-4',
+          !showChart && 'opacity-0',
+        )}
       >
         <div className="flex flex-col gap-1 p-4 pb-0 lg:gap-4">
           <div className="wv-h5 wv-kondolar font-black">

diff --git a/components/SectionIntro.tsx b/components/SectionIntro.tsx
@@ -54,11 +54,11 @@ export default function SectionIntro() {
                 </div>
               </BorderBox>
               <div className="wv-h11 text-grey1">ข้ามไปสำรวจ</div>
-              <div className="rounded-sm border border-white lg:flex">
+              <div className="-mt-4 rounded-sm border border-white lg:flex">
                 {menuTabs.map((i) => (
                   <button
                     key={i.id}
-                    className="wv-h11 flex w-[200px] items-center gap-2 border-b border-white p-2 text-start last:border-0 hover:bg-white/20 lg:w-[290px] lg:border-b-0 lg:border-r"
+                    className="wv-h11 flex w-[200px] items-center gap-2 border-b border-white bg-black px-3 py-2 text-start last:border-0 hover:bg-white/20 lg:w-[300px] lg:border-b-0 lg:border-r"
                     onClick={() => goToSection('/', i.id)}
                   >
                     <IconWithBg

diff --git a/components/SectionLanding.tsx b/components/SectionLanding.tsx
@@ -98,17 +98,17 @@ export default function SectionLanding() {
           “คำวินิจฉัยในเรื่องการตรวจสอบ สถาบันทางการเมือง”
         </span>{' '}
         เพราะเป็นการวินิจฉัยต่อบุคคล หรือสถาบันที่มาจากการเลือกตั้งโดยประชาชน
-        และหลาย คำวินิจฉัยก็ปรากฎให้เห็นถึงนัยซ่อนเร้นทางการเมืองที่ส่งผล
-        โดยตรงต่อภาพลักษณ์ความเป็นกลางของศาลรัฐธรรมนูญ
+        และหลายคำวินิจฉัยก็ปรากฎให้เห็นถึงนัยซ่อนเร้นทางการเมืองที่ส่งผลโดยตรงต่อภาพลักษณ์ความเป็น
+        กลางของศาลรัฐธรรมนูญ
       </SectionBox>
       <div className="screen"></div>
       <SectionBox id="chart4" boxCls="p-5 md:p-8 wv-h9">
         ในส่วนของ{' '}
         <span className="bg-freedom font-bold">
-          “คำวินิจฉัยในเรื่องการคุ้มครองสิทธิเสรีภาพ ของประชาชน
+          “คำวินิจฉัยในเรื่องการคุ้มครองสิทธิเสรีภาพของประชาชน
           และความมั่นคงของรัฐ”
         </span>{' '}
-        นั้น เป็นคำวินิจฉัย ที่กระทบสิทธิและเสรีภาพของประชาชนโดยตรง
+        นั้น เป็นคำวินิจฉัยที่กระทบสิทธิและเสรีภาพของประชาชนโดยตรง
         จึงเป็นประเภทคำวินิจฉัยที่ถือว่าใกล้ตัว และมีส่วนได้เสียกับ “เรา”
         ในฐานะประชาชนมากที่สุด
       </SectionBox>

diff --git a/components/SectionPart1.tsx b/components/SectionPart1.tsx
@@ -108,7 +108,7 @@ export default function SectionPart1() {
                 ตลอดช่วงการบังคับใช้รัฐธรรมนูญ 2540 ศาลรัฐธรรมนูญ
                 มีบทบาทอย่างแข็งขันในการวินิจฉัยชี้ขาดกรณีที่พรรคการเมืองใดทำผิด
                 พ.ร.ป. ว่าด้วยพรรคการเมืองฯ{' '}
-                <span className="bg-politics font-bold">
+                <span className="bg-politics font-bold leading-8">
                   มีผลทำให้พรรคการเมืองขนาดเล็ก จำนวน 76
                   พรรคถูกยุบพรรคลงเพราะไม่สามารถปฏิบัติตามเงื่อนไข
                   ให้ถูกต้องตามกฎหมายได้

diff --git a/components/SectionWhat.tsx b/components/SectionWhat.tsx
@@ -31,7 +31,9 @@ export default function SectionWhat() {
             className="mx-auto my-7 w-[330px]"
           />
           <div className="wv-h9">
-            ผลของคำวินิจฉัยจึงส่งผลกระทบต่อประชาชนทุกคน ทั้งทางตรงและทางอ้อม
+            ผลของคำวินิจฉัยจึงส่งผลกระทบต่อประชาชนทุกคน
+            <br />
+            ทั้งทางตรงและทางอ้อม
             <div className="font-bold">
               ทำให้ประชาชนเป็นผู้มีส่วนได้เสียจากคำวินิจฉัย
             </div>

diff --git a/components/SituationDetail.tsx b/components/SituationDetail.tsx
@@ -52,7 +52,7 @@ export default function SituationDetail({
             indicator={({ isOpen }) => (
               <CustomImg
                 src="/images/icon_arrow_up.webp"
-                className={twMerge('w-4', isOpen && '-rotate-90')}
+                className={twMerge('w-4 rotate-180', isOpen && 'rotate-90')}
               />
             )}
           >

diff --git a/hooks/useChart.tsx b/hooks/useChart.tsx
@@ -860,6 +860,7 @@ export const useChart = () => {
   const [interactable, setInteractable] = useState(false);
   const [suggests, setChartSuggests] = useState<TChartSuggest[] | null>(null);
   const [mode, setMode] = useState<TChartMode>('stack');
+  const [showChart, setShowChart] = useState(true);
 
   const resetChart = (mode: TChartMode) => {
     setHighlightKeys([]);
@@ -876,7 +877,7 @@ export const useChart = () => {
 
   useEffect(() => {
     const handleScroll = throttle(() => {
-      for (let index = 1; index <= 23; index++) {
+      for (let index = 1; index <= 24; index++) {
         const elm = document.getElementById(`chart${index}`);
         if (isInView(elm)) {
           if (index === 1) {
@@ -985,6 +986,10 @@ export const useChart = () => {
             setChartSuggests(freedomSuggests);
             setGroup(groupData[6]);
             setInteractable(true);
+            setShowChart(true);
+          }
+          if (index === 24) {
+            setShowChart(false);
           }
         }
       }
@@ -1008,6 +1013,7 @@ export const useChart = () => {
     interactable,
     suggests,
     mode,
+    showChart,
     getBarDataByYear,
     getStackDataByYear,
   };

diff --git a/public/data/data-sheet.json b/public/data/data-sheet.json
@@ -1499,7 +1499,7 @@
     "เลขคำวินิจฉัย": "28/2543",
     "รัฐธรรมนูญ": 2540,
     "เรื่อง_ชื่อเต็ม": "คณะกรรมการป้องกันและปราบปรามการทุจริตแห่งชาติขอให้ศาลรัฐธรรมนูญวินิจฉัยชี้ขาดตามรัฐธรรมนูญ มาตรา 295 กรณีนายมะฮูเซ็น มะสุยี จงใจไม่ยื่นบัญชีแสดงรายการทรัพย์สินและหนี้สินและเอกสารประกอบ",
-    "เรื่อง_ชื่อย่อ": "คำินิจฉัยกรณีนายมะฮูเซ็น มะสุยี จงใจไม่ยื่นบัญชีแสดงรายการทรัพย์สินและหนี้สินและเอกสารประกอบ",
+    "เรื่อง_ชื่อย่อ": "คำวินิจฉัยกรณีนายมะฮูเซ็น มะสุยี จงใจไม่ยื่นบัญชีแสดงรายการทรัพย์สินและหนี้สินและเอกสารประกอบ",
     "วันที่": "06/07/2543",
     "ผู้ร้อง": "คณะกรรมการป้องกันและปราบปรามการทุจริตแห่งชาติ",
     "ผู้ถูกร้อง": "นายมะฮูเซ็น มะสุยี",