diff options
| author | nsfisis <nsfisis@gmail.com> | 2025-03-21 10:55:10 +0900 |
|---|---|---|
| committer | nsfisis <nsfisis@gmail.com> | 2025-03-21 10:55:10 +0900 |
| commit | 4b28b1eb8ee6177a8009b89ac2200b3b753bc5b1 (patch) | |
| tree | 4180285e8270f9daa22ee71d93397bab8b38dd0b /frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx | |
| parent | e31c22dda15a665ffefc13b14a8b377062ef0351 (diff) | |
| download | phperkaigi-2025-albatross-4b28b1eb8ee6177a8009b89ac2200b3b753bc5b1.tar.gz phperkaigi-2025-albatross-4b28b1eb8ee6177a8009b89ac2200b3b753bc5b1.tar.zst phperkaigi-2025-albatross-4b28b1eb8ee6177a8009b89ac2200b3b753bc5b1.zip | |
feat(frontend): support mobile layout
Diffstat (limited to 'frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx')
| -rw-r--r-- | frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx | 34 |
1 files changed, 22 insertions, 12 deletions
diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx index ce12dca..a17b301 100644 --- a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx +++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx @@ -66,18 +66,20 @@ export default function GolfWatchAppGaming1v1({ return ( <div className="min-h-screen bg-gray-100 flex flex-col"> <div className={`text-white ${topBg} grid grid-cols-3 px-4 py-2`}> - <div className="font-bold flex justify-between my-auto"> + <div className="font-bold flex gap-4 justify-start md:justify-between items-center my-auto"> <div className="flex gap-6 items-center"> - {playerProfileA?.iconPath && ( + {playerProfileB?.iconPath && ( <UserIcon - iconPath={playerProfileA.iconPath} - displayName={playerProfileA.displayName} + iconPath={playerProfileB.iconPath} + displayName={playerProfileB.displayName} className="w-12 h-12 my-auto" /> )} - <div className="text-4xl">{playerProfileA?.displayName}</div> + <div className="hidden md:block text-4xl"> + {playerProfileB?.displayName} + </div> </div> - <div className="text-6xl">{scoreA}</div> + <div className="text-2xl md:text-6xl">{scoreB}</div> </div> <div className="font-bold text-center"> <div className="text-gray-100">{gameDisplayName}</div> @@ -93,10 +95,12 @@ export default function GolfWatchAppGaming1v1({ <LeftTime sec={leftTimeSeconds} /> )} </div> - <div className="font-bold flex justify-between my-auto"> - <div className="text-6xl">{scoreB}</div> + <div className="font-bold flex gap-4 justify-end md:justify-between items-center my-auto"> + <div className="text-2xl md:text-6xl">{scoreB}</div> <div className="flex gap-6 items-center text-end"> - <div className="text-4xl">{playerProfileB?.displayName}</div> + <div className="hidden md:block text-4xl"> + {playerProfileB?.displayName} + </div> {playerProfileB?.iconPath && ( <UserIcon iconPath={playerProfileB.iconPath} @@ -114,21 +118,27 @@ export default function GolfWatchAppGaming1v1({ bgB="bg-purple-400" /> <ThreeColumnLayout> - <TitledColumn title={<SubmitStatusLabel status={statusA} />}> + <TitledColumn + title={<SubmitStatusLabel status={statusA} />} + className="order-2 md:order-1" + > <FoldableBorderedContainerWithCaption caption={`コードサイズ: ${codeSizeA}`} > <CodeBlock code={codeA} language="php" /> </FoldableBorderedContainerWithCaption> </TitledColumn> - <TitledColumn title={problemTitle}> + <TitledColumn title={problemTitle} className="order-1 md:order-2"> <ProblemColumnContent description={problemDescription} sampleCode={sampleCode} /> <RankingTable /> </TitledColumn> - <TitledColumn title={<SubmitStatusLabel status={statusB} />}> + <TitledColumn + title={<SubmitStatusLabel status={statusB} />} + className="order-3" + > <FoldableBorderedContainerWithCaption caption={`コードサイズ: ${codeSizeB}`} > |