fix style

chakkun1121 · Feb 1, 2024 · 584810e · 584810e
1 parent 4caa55e
commit 584810e
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 110 deletions.
diff --git a/app/(app)/app/layout.tsx b/app/(app)/app/layout.tsx
@@ -5,13 +5,13 @@ import { Metadata } from "next";
 
 export default function AppLayout({ children }: { children: ReactNode }) {
   return (
-    <div className="h-screen">
+    <>
       <Header />
       <div className="flex mt-20">
         <LeftBar />
         <div className="flex-1 md:w-auto">{children}</div>
       </div>
-    </div>
+    </>
   );
 }
 export const metadata: Metadata = {

diff --git a/app/(app)/flashCard/_card/card.tsx b/app/(app)/flashCard/_card/card.tsx
@@ -91,10 +91,7 @@ export default function FlashCard({
   );
 
   return (
-    <div
-      className="flex-1 flex flex-col p-4 w-full max-w-7xl mx-auto gap-4"
-      {...handles}
-    >
+    <div className="h-full p-4 w-full max-w-7xl mx-auto " {...handles}>
       {currentQuestion && (
         <CardMain
           currentQuestion={currentQuestion as fileType["content"][0]}
@@ -110,16 +107,16 @@ export default function FlashCard({
           isAnswerWithKeyboard={flashCardSettings.isAnswerWithKeyboard}
         />
       )}
-      <nav className="flex-none flex items-stretch gap-4">
+      <nav className="flex w-full max-w-7xl bottom-2 fixed p-4 right-0 left-0 mx-auto">
         <button
           onClick={back}
-          className="p-2 rounded-full bg-gray-100 hover:bg-gray-200 aspect-square"
+          className="p-2 rounded-l-full bg-gray-100 hover:bg-gray-200 w-12 h-12 flex-none grid items-center justify-center"
           title="戻る"
         >
           <IoChevronBackSharp />
         </button>
         <div
-          className="flex-1 border p-2 rounded flex items-center justify-center"
+          className="flex-1 border h-12 flex items-center justify-center"
           style={{
             background: `linear-gradient(to right, #dbb946 ${
               ((questionIndex + 1) / questionList.length) * 100
@@ -132,7 +129,7 @@ export default function FlashCard({
         </div>
         <button
           onClick={next}
-          className="p-2 rounded-full bg-gray-100 hover:bg-gray-200 aspect-square"
+          className="p-2 rounded-r-full bg-gray-100 hover:bg-gray-200 w-12 h-12 grid items-center justify-center flex-none"
           title="次へ"
         >
           <IoChevronBackSharp className="transform rotate-180" />

diff --git a/app/(app)/flashCard/_card/main.tsx b/app/(app)/flashCard/_card/main.tsx
@@ -17,7 +17,7 @@ export function CardMain({
   isAnswerWithKeyboard: boolean;
 }) {
   return (
-    <div className="flex-1 w-full flex flex-col gap-4 justify-center  ">
+    <div className="w-full flex flex-col gap-4 justify-center fixed inset-0 m-auto p-4 max-w-7xl">
       <div className="mx-auto bg-gray-100 rounded w-full grid gap-4 p-4">
         <div className="flex items-center gap-4">
           <p className="md:text-heading-S p-4 bg-gray-200 rounded flex-1">

diff --git a/app/(app)/flashCard/cardResult.tsx b/app/(app)/flashCard/cardResult.tsx
@@ -11,66 +11,60 @@ export default function CardResult({
   currentProblemIdList: string[];
 }) {
   return (
-    <div className="flex-1 flex flex-col p-4 w-full max-w-7xl mx-auto gap-4">
-      <div className="">
-        <table className="w-full rounded">
-          <caption className="text-heading-S">結果</caption>
-          <thead className="bg-gray-200">
-            <tr>
-              <th className="px-4 py-6"></th>
-              <th className="px-4 py-6">英文</th>
-              <th className="px-4 py-6">日本語訳</th>
-              {/* <th className="px-4"></th> */}
-              <th className="px-4 py-6 w-20">
-                英語→
-                <br />
-                日本語
-              </th>
-              <th className="px-4 py-6 w-20">
-                日本語
-                <br />
-                →英語
-              </th>
-            </tr>
-          </thead>
-          <tbody className="overflow-y-scroll">
-            {currentProblemIdList.map((id, i) => {
-              const currentQuestion = fileContent.content.find(
-                (c) => c.id === id
-              ) as fileType["content"][0];
+    <div className="grid p-4 w-full max-w-7xl mx-auto gap-4">
+      <table className="w-full rounded">
+        <caption className="text-heading-S">結果</caption>
+        <thead className="bg-gray-200">
+          <tr>
+            <th className="px-4 py-6"></th>
+            <th className="px-4 py-6">英文</th>
+            <th className="px-4 py-6">日本語訳</th>
+            {/* <th className="px-4"></th> */}
+            <th className="px-4 py-6 w-20">
+              英語→
+              <br />
+              日本語
+            </th>
+            <th className="px-4 py-6 w-20">
+              日本語
+              <br />
+              →英語
+            </th>
+          </tr>
+        </thead>
+        <tbody className="overflow-y-scroll">
+          {currentProblemIdList.map((id, i) => {
+            const currentQuestion = fileContent.content.find(
+              (c) => c.id === id
+            ) as fileType["content"][0];
 
-              return (
-                <tr key={currentQuestion.id} className="even:bg-gray-100">
-                  <td className="text-center py-5">{i + 1}</td>
-                  <td className="py-5">{currentQuestion.en}</td>
-                  <td className="py-5">{currentQuestion.ja}</td>
-                  {/* <td className="text-center">{result ? "○" : "×"}</td> */}
-                  <td className="py-5 text-center">
-                    <input
-                      type="checkbox"
-                      checked={
-                        !!results.check?.["ja-en"]?.find((r) => r === id)
-                      }
-                      disabled
-                      className="w-4 h-4 bg-primary-500"
-                    />
-                  </td>
-                  <td className="text-center py-5">
-                    <input
-                      type="checkbox"
-                      checked={
-                        !!results.check?.["en-ja"]?.find((r) => r === id)
-                      }
-                      disabled
-                      className="w-4 h-4 bg-primary-500"
-                    />
-                  </td>
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
-      </div>
+            return (
+              <tr key={currentQuestion.id} className="even:bg-gray-100">
+                <td className="text-center py-5">{i + 1}</td>
+                <td className="py-5">{currentQuestion.en}</td>
+                <td className="py-5">{currentQuestion.ja}</td>
+                {/* <td className="text-center">{result ? "○" : "×"}</td> */}
+                <td className="py-5 text-center">
+                  <input
+                    type="checkbox"
+                    checked={!!results.check?.["ja-en"]?.find((r) => r === id)}
+                    disabled
+                    className="w-4 h-4 bg-primary-500"
+                  />
+                </td>
+                <td className="text-center py-5">
+                  <input
+                    type="checkbox"
+                    checked={!!results.check?.["en-ja"]?.find((r) => r === id)}
+                    disabled
+                    className="w-4 h-4 bg-primary-500"
+                  />
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
       <nav className="flex-none flex gap-4">
         <button
           onClick={() => window.location.reload()}

diff --git a/app/(app)/flashCard/main.tsx b/app/(app)/flashCard/main.tsx
@@ -103,8 +103,8 @@ export default function Card({ fileId }: { fileId: string }) {
       .join(".")} | フラッシュカード | VocabPhrase | chakkun1121`
   );
   return (
-    <div className="flex flex-col h-screen">
-      <header className="flex items-center md:justify-between justify-center p-4 bg-primary-200">
+    <>
+      <header className="flex px-4 flex-none bg-primary-200 h-20 fixed top-0 z-10 left-0 right-0 justify-between items-center">
         <div className="hidden md:block">
           <h1>VocabPhrase</h1>
         </div>
@@ -113,42 +113,42 @@ export default function Card({ fileId }: { fileId: string }) {
         </p>
         <HeaderRight mode={mode} setMode={setMode} />
       </header>
-      {loading ? (
-        <div className="flex flex-col gap-4 h-full p-4 select-none">
-          loading...
-        </div>
-      ) : (
-        fileContent && (
-          <>
-            {mode === "home" && (
-              <FlashCardHome
-                fileContent={fileContent}
-                setMode={setMode}
-                flashCardSettings={flashCardSettings}
-                setFlashCardSettings={setFlashCardSettings}
-                checked={results.check}
-              />
-            )}
-            {mode === "cards" && (
-              <FlashCard
-                fileContent={fileContent}
-                flashCardSettings={flashCardSettings}
-                setMode={setMode}
-                cardResult={results}
-                setResults={setResults}
-                setCurrentProblemIdList={setCurrentProblemIdList}
-              />
-            )}
-            {mode === "result" && (
-              <CardResult
-                results={results}
-                fileContent={fileContent}
-                currentProblemIdList={currentProblemIdList}
-              />
-            )}
-          </>
-        )
-      )}
-    </div>
+      <main className="mt-20 h-full">
+        {loading ? (
+          <div className="h-full p-4 select-none">loading...</div>
+        ) : (
+          fileContent && (
+            <>
+              {mode === "home" && (
+                <FlashCardHome
+                  fileContent={fileContent}
+                  setMode={setMode}
+                  flashCardSettings={flashCardSettings}
+                  setFlashCardSettings={setFlashCardSettings}
+                  checked={results.check}
+                />
+              )}
+              {mode === "cards" && (
+                <FlashCard
+                  fileContent={fileContent}
+                  flashCardSettings={flashCardSettings}
+                  setMode={setMode}
+                  cardResult={results}
+                  setResults={setResults}
+                  setCurrentProblemIdList={setCurrentProblemIdList}
+                />
+              )}
+              {mode === "result" && (
+                <CardResult
+                  results={results}
+                  fileContent={fileContent}
+                  currentProblemIdList={currentProblemIdList}
+                />
+              )}
+            </>
+          )
+        )}
+      </main>
+    </>
   );
 }
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -70,7 +70,7 @@ export default function RootLayout({
       <NextAuthProvider>
         <RecoilProvider>
           <HelpKeyShortCut />
-          <body className="min-h-screen">{children}</body>
+          <body>{children}</body>
         </RecoilProvider>
       </NextAuthProvider>
     </html>