other examples

react-dnd · May 18, 2015 · c7c7164 · c7c7164
1 parent d3d5622
commit c7c7164
Show file tree

Hide file tree

Showing 11 changed files with 34 additions and 29 deletions.
diff --git a/examples/04 Sortable/Cancel on Drop Outside/Card.js b/examples/04 Sortable/Cancel on Drop Outside/Card.js
@@ -4,9 +4,9 @@ import { DragSource, DropTarget } from 'react-dnd';
 
 const style = {
   border: '1px dashed gray',
+  padding: '0.5rem 1rem',
+  marginBottom: '.5rem',
   backgroundColor: 'white',
-  padding: '0.5rem',
-  margin: '0.5rem',
   cursor: 'move'
 };
 

diff --git a/examples/04 Sortable/Simple/Card.js b/examples/04 Sortable/Simple/Card.js
@@ -4,10 +4,9 @@ import { DragSource, DropTarget } from 'react-dnd';
 
 const style = {
   border: '1px dashed gray',
+  padding: '0.5rem 1rem',
+  marginBottom: '.5rem',
   backgroundColor: 'white',
-  padding: '0.5rem',
-  margin: '0.5rem',
-  maxWidth: '20em',
   cursor: 'move'
 };
 

diff --git a/examples/04 Sortable/Simple/Container.js b/examples/04 Sortable/Simple/Container.js
@@ -4,6 +4,10 @@ import Card from './Card';
 import { DragDropContext } from 'react-dnd';
 import HTML5Backend from 'react-dnd/modules/backends/HTML5';
 
+const style = {
+  width: 400
+};
+
 @DragDropContext(HTML5Backend)
 export default class Container extends Component {
   constructor(props) {
@@ -57,7 +61,7 @@ export default class Container extends Component {
     const { cards } = this.state;
 
     return (
-      <div>
+      <div style={style}>
         {cards.map(card => {
           return (
             <Card key={card.id}

diff --git a/examples/04 Sortable/Stress Test/Card.js b/examples/04 Sortable/Stress Test/Card.js
@@ -4,10 +4,9 @@ import { DragSource, DropTarget } from 'react-dnd';
 
 const style = {
   border: '1px dashed gray',
+  padding: '0.5rem 1rem',
+  marginBottom: '.5rem',
   backgroundColor: 'white',
-  padding: '0.5rem',
-  margin: '0.5rem',
-  width: 400,
   cursor: 'move'
 };
 

diff --git a/examples/04 Sortable/Stress Test/Container.js b/examples/04 Sortable/Stress Test/Container.js
@@ -5,6 +5,10 @@ import Card from './Card';
 import { DragDropContext } from 'react-dnd';
 import HTML5Backend from 'react-dnd/modules/backends/HTML5';
 
+const style = {
+  width: 400
+};
+
 @DragDropContext(HTML5Backend)
 export default class Container extends Component {
   constructor(props) {
@@ -71,7 +75,7 @@ export default class Container extends Component {
     const { cardsByIndex } = this.state;
 
     return (
-      <div>
+      <div style={style}>
         {cardsByIndex.map(card => {
           return (
             <Card key={card.id}

diff --git a/examples/05 Customize/Drop Effects/Container.js b/examples/05 Customize/Drop Effects/Container.js
@@ -8,12 +8,12 @@ import TargetBox from './TargetBox';
 export default class Container extends Component {
   render() {
     return (
-      <div style={{ height: 200 }}>
-        <div style={{ float: 'left', marginTop: 20 }}>
+      <div style={{ overflow: 'hidden', clear: 'both', marginTop: '1.5rem' }}>
+        <div style={{ float: 'left' }}>
           <SourceBox showCopyIcon />
           <SourceBox />
         </div>
-        <div style={{ float: 'left', marginLeft: 100 }}>
+        <div style={{ float: 'left' }}>
           <TargetBox />
         </div>
       </div>

diff --git a/examples/05 Customize/Drop Effects/SourceBox.js b/examples/05 Customize/Drop Effects/SourceBox.js
@@ -5,9 +5,9 @@ import { DragSource } from 'react-dnd';
 const style = {
   border: '1px dashed gray',
   backgroundColor: 'white',
-  padding: '0.5rem',
-  margin: '0.5rem',
-  width: '15rem',
+  padding: '0.5rem 1rem',
+  marginRight: '1rem',
+  marginBottom: '1rem',
   cursor: 'move'
 };
 

diff --git a/examples/05 Customize/Drop Effects/TargetBox.js b/examples/05 Customize/Drop Effects/TargetBox.js
@@ -3,12 +3,11 @@ import ItemTypes from './ItemTypes';
 import { DropTarget } from 'react-dnd';
 
 const style = {
-  height: '12rem',
-  width: '12rem',
-  color: '#222',
+  border: '1px solid gray',
+  height: '15rem',
+  width: '15rem',
   padding: '2rem',
-  textAlign: 'center',
-  backgroundColor: '#eee'
+  textAlign: 'center'
 };
 
 const boxTarget = {

diff --git a/examples/05 Customize/Handles and Previews/BoxWithHandle.js b/examples/05 Customize/Handles and Previews/BoxWithHandle.js
@@ -4,9 +4,9 @@ import { DragSource } from 'react-dnd';
 
 const style = {
   border: '1px dashed gray',
+  padding: '0.5rem 1rem',
+  marginBottom: '.5rem',
   backgroundColor: 'white',
-  padding: '0.5rem',
-  margin: '0.5rem',
   width: '20rem'
 };
 
@@ -15,7 +15,7 @@ const handleStyle = {
   width: '1rem',
   height: '1rem',
   display: 'inline-block',
-  marginRight: '0.5rem',
+  marginRight: '0.75rem',
   cursor: 'move'
 };
 

diff --git a/examples/05 Customize/Handles and Previews/BoxWithImage.js b/examples/05 Customize/Handles and Previews/BoxWithImage.js
diff --git a/examples/05 Customize/Handles and Previews/Container.js b/examples/05 Customize/Handles and Previews/Container.js
@@ -9,7 +9,7 @@ export default class Container extends Component {
   render() {
     return (
       <div>
-        <div style={{ marginTop: '2rem' }}>
+        <div style={{ marginTop: '1.5rem' }}>
           <BoxWithHandle />
           <BoxWithImage />
         </div>