Starting to play with Draggable for cards.

src/components/cards/card.css

@@ -9,6 +9,12 @@
     min-width: 468px;
 }
 
+.card-container-overlay {
+    margin: auto;
+    pointer-events: none;
+    overflow: hidden;
+}
+
 .left-card, .right-card {
     height: 90%;
     position: absolute;

src/components/cards/cards.jsx

@@ -3,6 +3,7 @@ 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';
 
@@ -277,55 +278,64 @@ const Cards = props => {
     const steps = content[activeDeckId].steps;
 
     return (
-        <Draggable
-            bounds="parent"
-            position={{x: x, y: y}}
-            onDrag={onDrag}
-            onStart={onStartDrag}
-            onStop={onEndDrag}
+        <Box
+            // Use static `cards-overlay` class for bounds of draggables
+            className={styles.cardContainerOverlay}
+            style={{
+                width: 500, // props.stageSize.width,
+                height: 500 // props.stageSize.height
+            }}
         >
-            <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>
+            </Draggable>
+        </Box>
     );
 };
 

src/reducers/cards.js

@@ -31,6 +31,8 @@ const reducer = function (state, action) {
             visible: false
         });
     case SHRINK_EXPAND_CARDS:
+        // Set new position here based on bounds
+        console.log('TODO: set new position based on bounds');
         return Object.assign({}, state, {
             expanded: !state.expanded
         });