feat: better question page layout (WIP)

This commit is contained in:
Vyacheslav Matyukhin 2022-05-30 18:56:38 +03:00
parent 8fac309bf3
commit 69e5a6ece5
No known key found for this signature in database
GPG Key ID: 3D2A774C5489F96C
4 changed files with 55 additions and 25 deletions

16
package-lock.json generated
View File

@ -61,6 +61,7 @@
"postcss-preset-env": "^7.3.2", "postcss-preset-env": "^7.3.2",
"prisma": "^3.11.1", "prisma": "^3.11.1",
"query-string": "^7.1.1", "query-string": "^7.1.1",
"re-resizable": "^6.9.9",
"react": "^17.0.2", "react": "^17.0.2",
"react-component-export-image": "^1.0.6", "react-component-export-image": "^1.0.6",
"react-compound-slider": "^3.3.1", "react-compound-slider": "^3.3.1",
@ -37219,6 +37220,15 @@
"rc": "cli.js" "rc": "cli.js"
} }
}, },
"node_modules/re-resizable": {
"version": "6.9.9",
"resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.9.9.tgz",
"integrity": "sha512-l+MBlKZffv/SicxDySKEEh42hR6m5bAHfNu3Tvxks2c4Ah+ldnWjfnVRwxo/nxF27SsUsxDS0raAzFuJNKABXA==",
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/react": { "node_modules/react": {
"version": "17.0.2", "version": "17.0.2",
"resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
@ -67696,6 +67706,12 @@
"strip-json-comments": "~2.0.1" "strip-json-comments": "~2.0.1"
} }
}, },
"re-resizable": {
"version": "6.9.9",
"resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.9.9.tgz",
"integrity": "sha512-l+MBlKZffv/SicxDySKEEh42hR6m5bAHfNu3Tvxks2c4Ah+ldnWjfnVRwxo/nxF27SsUsxDS0raAzFuJNKABXA==",
"requires": {}
},
"react": { "react": {
"version": "17.0.2", "version": "17.0.2",
"resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",

View File

@ -79,6 +79,7 @@
"postcss-preset-env": "^7.3.2", "postcss-preset-env": "^7.3.2",
"prisma": "^3.11.1", "prisma": "^3.11.1",
"query-string": "^7.1.1", "query-string": "^7.1.1",
"re-resizable": "^6.9.9",
"react": "^17.0.2", "react": "^17.0.2",
"react-component-export-image": "^1.0.6", "react-component-export-image": "^1.0.6",
"react-compound-slider": "^3.3.1", "react-compound-slider": "^3.3.1",

View File

@ -1,4 +1,5 @@
import domtoimage from "dom-to-image"; // https://github.com/tsayen/dom-to-image import domtoimage from "dom-to-image"; // https://github.com/tsayen/dom-to-image
import { Resizable } from "re-resizable";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { Button } from "../../common/Button"; import { Button } from "../../common/Button";
@ -118,21 +119,9 @@ export const CaptureQuestion: React.FC<Props> = ({ question }) => {
await exportAsPictureAndCode(); await exportAsPictureAndCode();
}; };
if (imgSrc) {
return ( return (
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 place-items-center"> <div className="flex flex-col items-center space-y-4">
<div ref={containerRef}>
<QuestionCard
question={question}
showTimeStamp={true}
showExpandButton={false}
expandFooterToFullWidth={true}
/>
</div>
<div>
<Button onClick={onCaptureButtonClick}>{mainButtonText}</Button>
</div>
{imgSrc ? (
<>
<div> <div>
<img src={imgSrc} /> <img src={imgSrc} />
</div> </div>
@ -145,8 +134,29 @@ export const CaptureQuestion: React.FC<Props> = ({ question }) => {
<div> <div>
<MetaculusSource question={question} /> <MetaculusSource question={question} />
</div> </div>
</> </div>
) : null} );
}
return (
<div className="flex flex-col items-center space-y-4">
<Resizable
minWidth={320}
bounds="parent"
enable={{ right: true, left: true }}
>
<div ref={containerRef}>
<QuestionCard
question={question}
showTimeStamp={true}
showExpandButton={false}
expandFooterToFullWidth={true}
/>
</div>
</Resizable>
<div>
<Button onClick={onCaptureButtonClick}>{mainButtonText}</Button>
</div>
</div> </div>
); );
}; };

View File

@ -83,6 +83,7 @@ const LargeQuestionCard: React.FC<{
</Card> </Card>
); );
}; };
const QuestionScreen: React.FC<{ question: QuestionWithHistoryFragment }> = ({ const QuestionScreen: React.FC<{ question: QuestionWithHistoryFragment }> = ({
question, question,
}) => ( }) => (
@ -93,6 +94,8 @@ const QuestionScreen: React.FC<{ question: QuestionWithHistoryFragment }> = ({
<h1>Capture</h1> <h1>Capture</h1>
</LineHeader> </LineHeader>
<CaptureQuestion question={question} /> <CaptureQuestion question={question} />
</div>
<div className="space-y-4">
<LineHeader> <LineHeader>
<h1>Embed</h1> <h1>Embed</h1>
</LineHeader> </LineHeader>