From b89734b0e97c10ce9d53b6410c1c04b98d190a47 Mon Sep 17 00:00:00 2001
From: Evelyn Eastmond <evhan55@gmail.com>
Date: Sun, 5 May 2019 13:35:40 -0400
Subject: [PATCH] Add preliminary fencing div/overlay, with Paul's help.
---
src/components/cards/card.css | 11 ++--
src/components/cards/cards.jsx | 102 ++++++++++++++++-----------------
2 files changed, 56 insertions(+), 57 deletions(-)
diff --git a/src/components/cards/card.css b/src/components/cards/card.css
index 34ae652a0..dd8879482 100644
--- a/src/components/cards/card.css
+++ b/src/components/cards/card.css
@@ -2,6 +2,11 @@
@import "../../css/colors.css";
@import "../../css/z-index.css";
+.card-container-overlay {
+ position: fixed;
+ z-index: $z-index-card;
+}
+
.card-container {
position:absolute;
z-index: $z-index-card;
@@ -9,12 +14,6 @@
min-width: 468px;
}
-.card-container-overlay {
- margin: auto;
- pointer-events: none;
- overflow: hidden;
-}
-
.left-card, .right-card {
height: 90%;
position: absolute;
diff --git a/src/components/cards/cards.jsx b/src/components/cards/cards.jsx
index a3682f4aa..30ae5d4f9 100644
--- a/src/components/cards/cards.jsx
+++ b/src/components/cards/cards.jsx
@@ -3,7 +3,6 @@ import React, {Fragment} from 'react';
import classNames from 'classnames';
import {FormattedMessage} from 'react-intl';
import Draggable from 'react-draggable';
-// import Box from '../box/box.jsx';
import styles from './card.css';
@@ -278,64 +277,65 @@ const Cards = props => {
const steps = content[activeDeckId].steps;
return (
- /* <Box
- // Use static `cards-overlay` class for bounds of draggables
+ <div
className={styles.cardContainerOverlay}
style={{
- width: 500, // props.stageSize.width,
- height: 500 // props.stageSize.height
+ width: `${window.innerWidth + (2 * 300)}px`,
+ height: `${window.innerHeight + (2 * 300)}px`,
+ top: `${-300}px`,
+ left: `${-300}px`
}}
- > */
- <Draggable
- bounds="parent"
- position={{x: x, y: y}}
- onDrag={onDrag}
- onStart={onStartDrag}
- onStop={onEndDrag}
>
- <div className={styles.cardContainer}>
- <div className={styles.card}>
- <CardHeader
- expanded={expanded}
- step={step}
- totalSteps={steps.length}
- onCloseCards={onCloseCards}
- onShowAll={onShowAll}
- onShrinkExpandCards={onShrinkExpandCards}
- />
- <div className={expanded ? styles.stepBody : styles.hidden}>
- {steps[step].deckIds ? (
- <PreviewsStep
- content={content}
- deckIds={steps[step].deckIds}
- onActivateDeckFactory={onActivateDeckFactory}
- onShowAll={onShowAll}
- />
- ) : (
- steps[step].video ? (
- <VideoStep
- dragging={dragging}
- video={translateVideo(steps[step].video, locale)}
+ <Draggable
+ bounds="parent"
+ position={{x: x, y: y}}
+ onDrag={onDrag}
+ onStart={onStartDrag}
+ onStop={onEndDrag}
+ >
+ <div className={styles.cardContainer}>
+ <div className={styles.card}>
+ <CardHeader
+ expanded={expanded}
+ step={step}
+ totalSteps={steps.length}
+ onCloseCards={onCloseCards}
+ onShowAll={onShowAll}
+ onShrinkExpandCards={onShrinkExpandCards}
+ />
+ <div className={expanded ? styles.stepBody : styles.hidden}>
+ {steps[step].deckIds ? (
+ <PreviewsStep
+ content={content}
+ deckIds={steps[step].deckIds}
+ onActivateDeckFactory={onActivateDeckFactory}
+ onShowAll={onShowAll}
/>
) : (
- <ImageStep
- image={translateImage(steps[step].image, locale)}
- title={steps[step].title}
- />
- )
- )}
- {steps[step].trackingPixel && steps[step].trackingPixel}
+ steps[step].video ? (
+ <VideoStep
+ dragging={dragging}
+ video={translateVideo(steps[step].video, locale)}
+ />
+ ) : (
+ <ImageStep
+ image={translateImage(steps[step].image, locale)}
+ title={steps[step].title}
+ />
+ )
+ )}
+ {steps[step].trackingPixel && steps[step].trackingPixel}
+ </div>
+ <NextPrevButtons
+ expanded={expanded}
+ isRtl={isRtl}
+ onNextStep={step < steps.length - 1 ? onNextStep : null}
+ onPrevStep={step > 0 ? onPrevStep : null}
+ />
</div>
- <NextPrevButtons
- expanded={expanded}
- isRtl={isRtl}
- onNextStep={step < steps.length - 1 ? onNextStep : null}
- onPrevStep={step > 0 ? onPrevStep : null}
- />
</div>
- </div>
- </Draggable>
- /* </Box> */
+ </Draggable>
+ </div>
);
};
--
GitLab