update: ExamPage>データの仮置きをしてUIの調整をした

スクロールバーを変えたり
watasuke102 · Jan 6, 2024 · 45f8838 · 45f8838
1 parent 40539a2
commit 45f8838
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 16 deletions.
diff --git a/src/app/exam/_components/ExamPage/ExamPage.module.scss b/src/app/exam/_components/ExamPage/ExamPage.module.scss
@@ -7,14 +7,14 @@
 @import '../../../../components/common/variable';
 .exam_area_wrapper {
   margin: -16px;
-  display: grid;
-  grid-template-columns: 200px 1fr;
+  display: flex;
   width: 100dvw;
   height: calc(100dvh - 48px);
 }
 
 .exam_status {
   padding: 0px 8px;
+  min-width: 172px;
   max-height: 100%;
   overflow-y: scroll;
   display: flex;
@@ -35,25 +35,41 @@
   display: grid;
   // prettier-ignore
   grid-template:
-    'gap question  question' auto
-    'gap answer    result'   1fr
-    'button button button'   auto / 12px 1fr 1fr;
-  margin-top: 8px;
+    'question question' auto
+    'answer   result'   1fr
+    'button   button'   auto / 1fr 1fr;
+  max-height: calc(100dvh - 48px);
 }
 .question {
   grid-area: question;
+  padding: 4px 8px;
   font-size: 1.7em;
   white-space: pre-wrap;
+  word-wrap: break-word;
   border-bottom: 2px solid $color-fg;
 }
 .answer {
   grid-area: answer;
+  padding: 4px 8px;
   font-size: 1.5em;
   white-space: pre-wrap;
+  word-wrap: break-word;
 }
 .result {
   grid-area: result;
+  padding: 4px 12px;
   white-space: pre-wrap;
+  word-wrap: break-word;
+}
+.scroll_area {
+  overflow-y: scroll;
+  scrollbar-color: $color-fg transparent;
+  ::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: $color-fg;
+  }
 }
 .button_container {
   grid-area: button;

diff --git a/src/app/exam/_components/ExamPage/ExamPage.tsx b/src/app/exam/_components/ExamPage/ExamPage.tsx
@@ -4,13 +4,13 @@
 // Email  : <[email protected]>
 // Twitter: @Watasuke102
 // This software is released under the MIT or MIT SUSHI-WARE License.
+'use client';
 import css from './ExamPage.module.scss';
 import React from 'react';
 import Exam from '@mytypes/Exam';
 import Button from '@/common/Button/Button';
 import ArrowLeftIcon from '@assets/arrow-left.svg';
 import ArrowRightIcon from '@assets/arrow-right.svg';
-import Head from 'next/head';
 
 type Props = {
   title: string;
@@ -40,23 +40,54 @@ export function ExamPage(props: Props): JSX.Element {
 
   return (
     <>
-      <Head>
-        <title>{}</title>
-      </Head>
       <div className={css.exam_area_wrapper}>
-        <section className={css.exam_status}>
+        <section className={`${css.exam_status} ${css.scroll_area}`}>
           <div className={css.current_index_status}>{`${index + 1} / ${props.exam.length}`}</div>
           {[...Array(1000)].map((e, i) => (
             <span key={i}>{`00${i}`.slice(-3)}：1000問正解</span>
           ))}
         </section>
         <section className={css.exam_area}>
-          <div className={css.question}>{props.exam[index].question}</div>
-          <div className={css.answer}>answer</div>
-          <div className={css.result}>result</div>
+          <div className={css.question}>
+            {props.exam[index].question}
+            {'00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000'}
+          </div>
+          <div className={`${css.answer} ${css.scroll_area}`}>
+            {[...Array(100)].map((e, i) => (
+              <>
+                <span key={i}>
+                  {`00${i}`.slice(-3)}:{'0000000000000000000000000000000000000000000000000000' + i * i * i}
+                </span>
+                <br />
+              </>
+            ))}
+            answer
+          </div>
+          <div className={`${css.result} ${css.scroll_area}`}>
+            {[...Array(100)].map((e, i) => (
+              <>
+                <span key={i}>
+                  {`00${i}`.slice(-3)}:
+                  {'0000000000000000000012345678901234500000000000000000000000000000000' + i * i * i}
+                </span>
+                <br />
+              </>
+            ))}
+            result
+          </div>
           <div className={css.button_container}>
-            <Button type='material' text='戻る' OnClick={() => handle_index_update_button('prev')} icon={<ArrowLeftIcon />} />
-            <Button type='material' text='次へ' OnClick={() => handle_index_update_button('next')} icon={<ArrowRightIcon />} />
+            <Button
+              type='material'
+              text='戻る'
+              OnClick={() => handle_index_update_button('prev')}
+              icon={<ArrowLeftIcon />}
+            />
+            <Button
+              type='material'
+              text='次へ'
+              OnClick={() => handle_index_update_button('next')}
+              icon={<ArrowRightIcon />}
+            />
           </div>
         </section>
       </div>

diff --git a/src/app/exam/loading.tsx b/src/app/exam/loading.tsx
@@ -0,0 +1,9 @@
+// TAGether - Share self-made exam for classmates
+// CopyRight (c) 2020-2023 watasuke
+//
+// Email  : <[email protected]>
+// Twitter: @Watasuke102
+// This software is released under the MIT or MIT SUSHI-WARE License.
+import Loading from '@/common/Loading/Loading';
+
+export default Loading;