example code updates..

carloluis · Dec 26, 2017 · 2a24e36 · 2a24e36
1 parent 7d4b0cf
commit 2a24e36
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 22 deletions.
diff --git a/example/components/ExUpdate.js b/example/components/ExUpdate.js
@@ -61,10 +61,7 @@ class ExUpdate extends React.Component {
 
 		return (
 			<div style={{ padding: '10px 0 160px' }}>
-				<Section
-					title="Suggestor Props"
-					description="Updating props (value, suggestions list)"
-				>
+				<Section title="Suggestor Props" description="Updating props (value, suggestions list)">
 					<SSuggestor
 						value={value}
 						list={suggestions}

diff --git a/example/components/Example.js b/example/components/Example.js
@@ -13,6 +13,7 @@ const Example = () => (
 	<div>
 		<Section title="Code Example">
 			<pre>{`<Suggestor list={['list', 'of', 'suggestions', ...]} style={{width:'100%'}} />`}</pre>
+			<a href="https://codepen.io/carloluis/pen/rjpLYw">CodePen</a>
 		</Section>
 
 		<Section

diff --git a/example/components/Section.js b/example/components/Section.js
@@ -1,22 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const PADDING_STYLE = { padding: '10px 0' };
-
 const Section = ({ title, description = '', children }) => (
-	<div style={PADDING_STYLE}>
-		<h4>
-			{title}
-		</h4>
-		<div>
-			{children}
-		</div>
-		{
-			!!description &&
-			<p style={PADDING_STYLE}>
-				{description}
-			</p>
-		}
+	<div style={{ padding: '10px 0' }}>
+		<h4>{title}</h4>
+		<div>{children}</div>
+		{!!description && <p style={{ padding: '10px' }}>{description}</p>}
 	</div>
 );
 

diff --git a/example/index.html b/example/index.html
@@ -12,6 +12,7 @@
 	<style>
 		:root {
 			--light-blue: #5EBDF7;
+			--blue: #1187B9;
 			--grey: #eaeaea;
 			--white: #FFF;
 		}
@@ -23,7 +24,7 @@
 		}
 
 		header {
-			background-color: var(--light-blue);
+			background-color: var(--blue);
 		}
 
 		header .container {
@@ -39,10 +40,10 @@
 			padding: 10px;
 		}
 
-		@media only screen and (max-width: 640px) {
+		@media only screen and (max-width: 720px) {
 			.container {
 				padding: 24px 4px 0;
-				max-width: 95%;
+				max-width: 90%;
 			}
 		}
 	</style>