From e4bda238b63ffeec44e0d371bfc0eec4bf6419a7 Mon Sep 17 00:00:00 2001
From: Josiah Neuberger <josiah@wikimylife.org>
Date: Wed, 20 Sep 2017 20:37:14 -0400
Subject: [PATCH] fixed aspect ratio when stage is zoomed fullscreen
---
src/components/stage/stage.css | 16 ++++++++++++++--
src/components/stage/stage.jsx | 13 ++++++++++---
src/containers/stage.jsx | 2 ++
3 files changed, 26 insertions(+), 5 deletions(-)
diff --git a/src/components/stage/stage.css b/src/components/stage/stage.css
index bcd69a17b..a773f8980 100644
--- a/src/components/stage/stage.css
+++ b/src/components/stage/stage.css
@@ -23,9 +23,21 @@
left: 0;
right: 0;
bottom: 0;
- width: 100% !important;
- height: 100% !important;
z-index: 999;
+ background-color: rgba(255, 255, 255, 1);
+}
+
+.stage-overlay-content {
+ outline: none;
+ margin: auto;
+ border: 3px solid rgb(126, 133, 151);
+ padding: 0;
+ border-radius: $space;
+
+ overflow: hidden;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
.monitor-wrapper {
diff --git a/src/components/stage/stage.jsx b/src/components/stage/stage.jsx
index afb68e2d0..4055db163 100644
--- a/src/components/stage/stage.jsx
+++ b/src/components/stage/stage.jsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
@@ -13,6 +14,12 @@ const StageComponent = props => {
width,
...boxProps
} = props;
+ let heightCorrectedAspect = window.innerHeight - 40;
+ let widthCorrectedAspect = heightCorrectedAspect + (heightCorrectedAspect / 3);
+ if (widthCorrectedAspect > window.innerWidth) {
+ widthCorrectedAspect = window.innerWidth;
+ heightCorrectedAspect = widthCorrectedAspect * .75;
+ }
return isZoomed === false ? (
<Box className={styles.stageWrapper}>
<Box
@@ -30,11 +37,11 @@ const StageComponent = props => {
) : (
<Box className={styles.stageWrapperOverlay}>
<Box
- className={styles.stage}
+ className={classNames(styles.stage, styles.stageOverlayContent)}
componentRef={canvasRef}
element="canvas"
- height={'100%'}
- width={'100%'}
+ height={heightCorrectedAspect}
+ width={widthCorrectedAspect}
{...boxProps}
/>
<Box className={styles.monitorWrapper}>
diff --git a/src/containers/stage.jsx b/src/containers/stage.jsx
index e80ece5aa..51a60fda7 100644
--- a/src/containers/stage.jsx
+++ b/src/containers/stage.jsx
@@ -212,7 +212,9 @@ class Stage extends React.Component {
return (
<StageComponent
canvasRef={this.setCanvas}
+ height={this.props.height}
isZoomed={this.state.isZoomed}
+ width={this.props.width}
onDoubleClick={this.handleDoubleClick}
{...props}
/>
--
GitLab