From d315aba5daed28403f74e08219d2fd327162433e Mon Sep 17 00:00:00 2001
From: Josiah Neuberger <josiah@wikimylife.org>
Date: Thu, 23 Nov 2017 16:23:13 -0500
Subject: [PATCH] Adjust question prompt in full screen to be same size as
stage and centered.
---
src/components/stage/stage.css | 6 +++++-
src/components/stage/stage.jsx | 19 +++++++++++++------
2 files changed, 18 insertions(+), 7 deletions(-)
diff --git a/src/components/stage/stage.css b/src/components/stage/stage.css
index 13c832508..425ebde1f 100644
--- a/src/components/stage/stage.css
+++ b/src/components/stage/stage.css
@@ -59,7 +59,11 @@
justify-content: center;
}
-.monitor-wrapper, .color-picker-wrapper {
+.question-wrapper {
+ position: absolute;
+}
+
+.monitor-wrapper, .color-picker-wrapper, .queston-wrapper {
position: absolute;
top: 0;
left: 0;
diff --git a/src/components/stage/stage.jsx b/src/components/stage/stage.jsx
index 6d4ee24bd..ed21d930b 100644
--- a/src/components/stage/stage.jsx
+++ b/src/components/stage/stage.jsx
@@ -78,12 +78,19 @@ const StageComponent = props => {
<Box className={styles.monitorWrapper}>
<MonitorList />
</Box>
- {question === null ? null : (
- <Question
- question={question}
- onQuestionAnswered={onQuestionAnswered}
- />
- )}
+ <div className={styles.stageOverlayContent}>
+ <div
+ className={styles.questionWrapper}
+ style={{width: widthCorrectedAspect}}
+ >
+ {question === null ? null : (
+ <Question
+ question={question}
+ onQuestionAnswered={onQuestionAnswered}
+ />
+ )}
+ </div>
+ </div>
</Box>
</div>
);
--
GitLab