♻️refactor: remove collapse classname (#1015)

OpenUp-LabTakizawa · Oct 1, 2024 · d9a9fe7 · d9a9fe7
1 parent 3d46d7d
commit d9a9fe7
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 6 deletions.
diff --git a/app/history/page.tsx b/app/history/page.tsx
@@ -27,14 +27,14 @@ export default function History(): JSX.Element {
       </h2>
       {HIROSHIMA_HISTORY.map((history) => (
         <section key={history.date} className="space-y-4">
-          <details className="collapse collapse-arrow">
-            <summary className="bg-amber-50 collapse-title font-bold font-zenMaruGothic text-2xl">
+          <details className={`rounded-2xl w-full ${styles.details}`}>
+            <summary className="block bg-amber-50 font-bold font-zenMaruGothic p-4 relative text-2xl w-full">
               <p className="absolute outline outline-offset-2 rounded text-rose-400 text-xs -rotate-45">
                 大好評で
                 <br />
                 開催終了
               </p>
-              <span className="ml-12">{history.title}</span>
+              <span className="ml-4 sm:ml-0">{history.title}</span>
             </summary>
             <Programs programs={history.programs} />
             <PictureTile
@@ -44,7 +44,7 @@ export default function History(): JSX.Element {
             />
             <Link
               href={`${HISTORY.pathname}/movie${HIROSHIMA.pathname}/${history.date}`}
-              className={`bg-sky-400 btn mt-2 mx-auto rounded-2xl shadow-lg text-lg text-white w-max ${styles.blueShine}`}
+              className={`bg-sky-400 btn mt-2 mx-auto rounded-2xl shadow-lg text-lg text-white w-fit ${styles.blueShine}`}
             >
               イベントの様子はこちら！
               <ArrowTopRightOnSquareIcon

diff --git a/app/history/styles.module.css b/app/history/styles.module.css
@@ -8,6 +8,27 @@
   animation: shine 20s infinite linear;
 }
 
+.details summary {
+  transition: background-color 0.2s ease-out;
+  &::after {
+    position: absolute;
+    display: block;
+    height: .5rem;
+    width: .5rem;
+    transition: all .2s ease-out;
+    top: 1.9rem;
+    inset-inline-end: 1.4rem;
+    content: "";
+    transform: translateY(-100%) rotate(45deg);
+    transform-origin: 75% 75%;
+    box-shadow: 2px 2px;
+    pointer-events: none;
+  }
+}
+.details[open] summary::after {
+  transform: translateY(-50%) rotate(225deg);
+}
+
 @keyframes arrow-top-right {
   0%,
   40% {

diff --git a/app/kanto_event/qAndA.module.css b/app/kanto_event/qAndA.module.css
@@ -0,0 +1,20 @@
+.details summary {
+  transition: background-color 0.2s ease-out;
+  &::after {
+    position: absolute;
+    display: block;
+    height: .5rem;
+    width: .5rem;
+    transition: all .2s ease-out;
+    top: 1.2rem;
+    inset-inline-end: 1.4rem;
+    content: "";
+    transform: translateY(-100%) rotate(45deg);
+    transform-origin: 75% 75%;
+    box-shadow: 2px 2px;
+    pointer-events: none;
+  }
+}
+.details[open] summary::after {
+  transform: translateY(-50%) rotate(225deg);
+}
diff --git a/app/kanto_event/qAndA.tsx b/app/kanto_event/qAndA.tsx
@@ -5,6 +5,7 @@ import type { QandA } from "@/app/interfaces/qAndA"
 import { Q_AND_A } from "@/app/lib/constant"
 import Image from "next/image"
 import type { JSX } from "react"
+import styles from "./qAndA.module.css"
 
 export function QA({
   qAndAs,
@@ -23,9 +24,9 @@ export function QA({
           <details
             key={qAndA.title}
             open={index === 0}
-            className="collapse collapse-arrow"
+            className={`rounded-2xl w-full ${styles.details}`}
           >
-            <summary className="bg-sky-50 collapse-title min-h-0 pl-16 rounded-2xl text-center">
+            <summary className="block bg-sky-50 p-2 relative rounded-2xl text-base text-center">
               {qAndA.title}
             </summary>
             <div className="bg-sky-50 chat chat-start flex items-center mt-2 rounded-t-2xl">