From 69e5a6ece5ebd5d0ebd5b64d08f170a78ae0886b Mon Sep 17 00:00:00 2001
From: Vyacheslav Matyukhin <me@berekuk.ru>
Date: Mon, 30 May 2022 18:56:38 +0300
Subject: [PATCH] feat: better question page layout (WIP)

---
 package-lock.json                             | 16 +++++
 package.json                                  |  1 +
 .../questions/components/CaptureQuestion.tsx  | 60 +++++++++++--------
 src/web/questions/pages/QuestionPage.tsx      |  3 +
 4 files changed, 55 insertions(+), 25 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index bd2247f..c92c2ad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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",
diff --git a/package.json b/package.json
index 80e9ced..adb6c02 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/web/questions/components/CaptureQuestion.tsx b/src/web/questions/components/CaptureQuestion.tsx
index c33cfe6..8167322 100644
--- a/src/web/questions/components/CaptureQuestion.tsx
+++ b/src/web/questions/components/CaptureQuestion.tsx
@@ -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>
   );
 };
diff --git a/src/web/questions/pages/QuestionPage.tsx b/src/web/questions/pages/QuestionPage.tsx
index 25b5efd..6b08379 100644
--- a/src/web/questions/pages/QuestionPage.tsx
+++ b/src/web/questions/pages/QuestionPage.tsx
@@ -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>