quantified.uncertainty/metaforecast
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: better question page layout (WIP)

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
package-lock.json generated
View File

@ -61,6 +61,7 @@
"postcss-preset-env": "^7.3.2",
"prisma": "^3.11.1",
"query-string": "^7.1.1",
"re-resizable": "^6.9.9",
"react": "^17.0.2",
"react-component-export-image": "^1.0.6",
"react-compound-slider": "^3.3.1",
@ -37219,6 +37220,15 @@
"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": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
@ -67696,6 +67706,12 @@
"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": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",

1
package.json
View File

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

60
src/web/questions/components/CaptureQuestion.tsx
View File

@ -1,4 +1,5 @@
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 { Button } from "../../common/Button";
@ -118,35 +119,44 @@ export const CaptureQuestion: React.FC<Props> = ({ question }) => {
await exportAsPictureAndCode();
};
return (
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 place-items-center">
<div ref={containerRef}>
<QuestionCard
question={question}
showTimeStamp={true}
showExpandButton={false}
expandFooterToFullWidth={true}
/>
if (imgSrc) {
return (
<div className="flex flex-col items-center space-y-4">
<div>
<img src={imgSrc} />
</div>
<div>
<ImageSource question={question} imgSrc={imgSrc} />
</div>
<div className="justify-self-stretch">
<MetaculusEmbed question={question} />
</div>
<div>
<MetaculusSource question={question} />
</div>
</div>
);
}
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>
{imgSrc ? (
<>
<div>
<img src={imgSrc} />
</div>
<div>
<ImageSource question={question} imgSrc={imgSrc} />
</div>
<div className="justify-self-stretch">
<MetaculusEmbed question={question} />
</div>
<div>
<MetaculusSource question={question} />
</div>
</>
) : null}
</div>
);
};

3
src/web/questions/pages/QuestionPage.tsx
View File

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