Prettified demo page when you use npm start locally

clauderic · Jan 4, 2017 · e1b44fe · e1b44fe
1 parent cced5f5
commit e1b44fe
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -3,6 +3,24 @@
 <head>
     <title>React Sortable</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
+    <style>
+        @import url(https://fonts.googleapis.com/css?family=Montserrat:400);
+
+        html, body, #root {
+            width: 100%;
+            height: 100%;
+        }
+        body {
+            background-color: #f9f9f9;
+            display: table;
+            color: #333;
+            font-family: 'Montserrat', 'Helvetica Neue', Helvetica, arial, sans-serif;
+        }
+        #root {
+            display: table-cell;
+            vertical-align: middle;
+        }
+    </style>
 </head>
 <body>
     <div id="root"></div>

diff --git a/index.js b/index.js
@@ -11,7 +11,8 @@ const SortableItem = SortableElement(({height, value}) => (
         width: '100%',
         display: 'block',
         padding: 20,
-        borderBottom: '1px solid #DEDEDE',
+        backgroundColor: '#FFF',
+        borderBottom: '1px solid #EFEFEF',
         boxSizing: 'border-box',
         WebkitUserSelect: 'none',
         height: height
@@ -21,7 +22,16 @@ const SortableItem = SortableElement(({height, value}) => (
 ));
 
 const SortableList = SortableContainer(({items}) => (
-    <div>
+    <div style={{
+        width: '80%',
+        height: '80vh',
+        maxWidth: '500px',
+        margin: '0 auto',
+        overflow: 'auto',
+        backgroundColor: '#f3f3f3',
+        border: '1px solid #EFEFEF',
+        borderRadius: 3
+    }}>
         {items.map(({height, value}, index) => <SortableItem key={`item-${index}`} index={index} value={value} height={height}/>)}
     </div>
 ));