style: reorder components for responsive design

CSSLab · Nov 6, 2024 · 89750cd · 89750cd
1 parent 74c7555
commit 89750cd
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 41 deletions.
diff --git a/src/pages/analysis/[...id].tsx b/src/pages/analysis/[...id].tsx
@@ -414,13 +414,13 @@ const Analysis: React.FC<Props> = ({
   const mobileLayout = (
     <>
       <div className="flex h-full flex-1 flex-col justify-center gap-1">
-        <div className="mt-16 flex w-full flex-col items-start justify-start gap-1">
+        <div className="flex w-full flex-col items-start justify-start gap-1">
           <div className="flex h-auto w-full flex-col gap-1">
             <div className="w-screen">
               <GameInfo
                 {...analyzedGame}
+                showId={false}
                 type={analyzedGame.gameType}
-                showId={true}
                 instructionsType="analysis"
               />
             </div>
@@ -437,33 +437,9 @@ const Analysis: React.FC<Props> = ({
             />
           </div>
           <div className="flex h-auto w-full flex-col gap-1">
-            <div className="!h-[50px] w-screen !flex-grow-0">
+            <div className="w-screen !flex-grow-0">
               <BoardController setCurrentMove={setCurrentMove} />
             </div>
-            <div className="flex">
-              <div className="h-[20vh] max-h-[200px] w-screen !flex-none">
-                <MovePlot
-                  data={data}
-                  onMove={setCurrentMove}
-                  onMouseEnter={showArrow}
-                  onMouseLeave={() => setMovePlotHover(null)}
-                />
-              </div>
-              <div
-                style={{
-                  background:
-                    'linear-gradient(0deg, rgb(36, 36, 36) 0%, rgb(255, 137, 70) 100%)',
-                }}
-                className="-mt-1 h-full w-1"
-              />
-            </div>
-            <div
-              style={{
-                background:
-                  'linear-gradient(90deg, rgb(36, 36, 36) 0%, rgb(83, 167, 162) 100%)',
-              }}
-              className="-mt-1 h-1 w-full"
-            />
             <div className="flex-none">
               <div className="flex w-full flex-col overflow-hidden rounded">
                 <div className="flex items-center justify-center bg-background-1 py-2">
@@ -495,6 +471,30 @@ const Analysis: React.FC<Props> = ({
               </div>
               <BlunderMeter {...blunderMeter} />
             </div>
+            <div className="flex">
+              <div className="h-[20vh] max-h-[200px] w-screen !flex-none">
+                <MovePlot
+                  data={data}
+                  onMove={setCurrentMove}
+                  onMouseEnter={showArrow}
+                  onMouseLeave={() => setMovePlotHover(null)}
+                />
+              </div>
+              <div
+                style={{
+                  background:
+                    'linear-gradient(0deg, rgb(36, 36, 36) 0%, rgb(255, 137, 70) 100%)',
+                }}
+                className="-mt-1 h-full w-1"
+              />
+            </div>
+            <div
+              style={{
+                background:
+                  'linear-gradient(90deg, rgb(36, 36, 36) 0%, rgb(83, 167, 162) 100%)',
+              }}
+              className="-mt-1 h-1 w-full"
+            />
             <div className="relative bottom-0 h-full flex-1 overflow-auto">
               <MovesContainer
                 game={analyzedGame}

diff --git a/src/pages/train.tsx b/src/pages/train.tsx
@@ -424,9 +424,9 @@ const Train: React.FC<Props> = ({
   const mobileLayout = (
     <>
       <div className="flex h-full flex-1 flex-col justify-center gap-1">
-        <div className="mt-2 flex h-full flex-col items-start justify-start gap-2">
+        <div className="mt-2 flex h-full flex-col items-start justify-start gap-1">
           <div className="flex h-auto w-full flex-col gap-2">
-            <div className="w-screen">
+            {/* <div className="w-screen">
               <GameInfo
                 {...trainingGame}
                 whitePlayer={
@@ -449,15 +449,7 @@ const Train: React.FC<Props> = ({
                 showId={false}
                 instructionsType="train"
               />
-            </div>
-            <div className="flex w-full">
-              <button
-                onClick={launchContinue}
-                className="flex w-full flex-1 items-center rounded bg-human-3 px-4 py-2 transition duration-200 hover:bg-human-4"
-              >
-                Continue Against Maia
-              </button>
-            </div>
+            </div> */}
           </div>
           <div className="relative flex aspect-square h-[100vw] w-screen">
             <GameBoard
@@ -470,6 +462,9 @@ const Train: React.FC<Props> = ({
             />
           </div>
           <div className="flex h-auto w-full flex-col gap-1">
+            <div className="flex-none">
+              <BoardController setCurrentMove={setCurrentMove} />
+            </div>
             <div className="flex flex-1 flex-col items-stretch">
               <Feedback
                 status={status}
@@ -481,6 +476,7 @@ const Train: React.FC<Props> = ({
                 getNewGame={getNewGame}
               />
             </div>
+            <StatsDisplay stats={stats} />
             <div className="flex">
               <div className="flex h-[20vh] w-screen flex-none [&>div]:h-[inherit] [&>div]:max-h-[inherit] [&>div]:max-w-[inherit]">
                 <MovePlot
@@ -511,10 +507,15 @@ const Train: React.FC<Props> = ({
             <div className="w-full flex-none">
               <PositionEvaluationContainer moveEvaluation={moveEvaluation} />
             </div>
-            <div className="flex-none">
-              <BoardController setCurrentMove={setCurrentMove} />
+
+            <div className="flex w-full">
+              <button
+                onClick={launchContinue}
+                className="flex w-full flex-1 items-center rounded bg-human-3 px-4 py-2 transition duration-200 hover:bg-human-4"
+              >
+                Continue Against Maia
+              </button>
             </div>
-            <StatsDisplay stats={stats} />
           </div>
         </div>
       </div>