Merge pull request #178 from brendo/improve-path-styling

quangkhoa · web-flow · commit 4b7329b57fec · 2017-07-17T11:12:14.000+10:00
Update path styling, including responsive
diff --git a/docs/demo/demo.b13313c0a7d166929de3.js b/docs/demo/demo.b13313c0a7d166929de3.js
diff --git a/docs/demo/demo.d73ff4397f0035ac6394.js b/docs/demo/demo.d73ff4397f0035ac6394.js
diff --git a/docs/demo/index.html b/docs/demo/index.html
@@ -5,5 +5,5 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
-  <body><script type="text/javascript" src="manifest.81c1f8c28d950ee22175.js"></script><script type="text/javascript" src="vendor.5e42313e188f293e0550.js"></script><script type="text/javascript" src="demo.d73ff4397f0035ac6394.js"></script></body>
+  <body><script type="text/javascript" src="manifest.5c1a17bfabe9dba82773.js"></script><script type="text/javascript" src="vendor.5e42313e188f293e0550.js"></script><script type="text/javascript" src="demo.b13313c0a7d166929de3.js"></script></body>
 </html>
diff --git a/docs/demo/manifest.5c1a17bfabe9dba82773.js b/docs/demo/manifest.5c1a17bfabe9dba82773.js
diff --git a/src/components/BodySchema/BodySchema.styles.js b/src/components/BodySchema/BodySchema.styles.js
@@ -34,6 +34,10 @@ export const styles = createSheet(({ backgrounds, borders, sizes }) => ({
       borderLeft: `1px solid ${borders.default}`
     },
 
+    [`& > td > table`]: {
+      marginLeft: '12px'
+    },
+
     [`.${property.classes.last} + & > td`]: {
       borderLeft: 'none'
     }
@@ -43,13 +47,14 @@ export const styles = createSheet(({ backgrounds, borders, sizes }) => ({
     fontFamily: 'monospace',
     padding: '5px 10px'
   },
+
   'hasTabs': {
     borderTopLeftRadius: 0
   },
 
   [`@media (max-width: ${sizes.breakpoint})`]: {
     'bodySchema': {
-      paddingRight: '10px',
+      paddingRight: '22px',
       fontSize: '0.8rem'
     }
   },
diff --git a/src/components/Endpoints/Endpoint.js b/src/components/Endpoints/Endpoint.js
@@ -15,7 +15,7 @@ export default class Endpoint extends PureComponent {
 
     return (
       <div className={classes.endpoint}>
-        {description && <div><label>{description}</label></div>}
+        {description && <div>{description}</div>}
         <input className={classes.readonly} defaultValue={url} readOnly onFocus={this.handleFocus} />
       </div>
     )
diff --git a/src/components/Endpoints/Endpoint.style.js b/src/components/Endpoints/Endpoint.style.js
@@ -2,10 +2,18 @@ import { createSheet } from '../../theme'
 
 export const styles = createSheet(({borders, text, sizes}) => ({
   endpoint: {
-    lineHeight: '200%'
+    lineHeight: '1.4',
+    '& + &': {
+      marginTop: '.5rem'
+    }
   },
   readonly: {
+    fontSize: '.8rem',
+    fontFamily: 'monospace',
+    lineHeight: '1.4',
+    padding: '.25rem',
     width: '100%',
+    boxSizing: 'border-box',
     '&:focus': {
       outline: 'none'
     }
diff --git a/src/components/Endpoints/Endpoints.style.js b/src/components/Endpoints/Endpoints.style.js
@@ -3,8 +3,17 @@ import c from 'color'
 
 export const styles = createSheet(({borders, backgrounds, text, sizes}) => ({
   endpoints: {
-    minWidth: '300px',
-    backgroundColor: `${c(backgrounds.schema).darken(0.1)}`,
-    padding: '15px'
+    minWidth: '30rem',
+    backgroundColor: `${c(backgrounds.schema)}`,
+    padding: '.5rem',
+    boxShadow: '2px 2px 1rem rgba(0,0,0,0.25)',
+    borderRadius: '.5rem'
+  },
+
+  [`@media (max-width: ${sizes.breakpoint})`]: {
+    'endpoints': {
+      minWidth: 'auto',
+      width: '100%'
+    }
   }
 }))
diff --git a/src/components/Indicator/Indicator.styles.js b/src/components/Indicator/Indicator.styles.js
@@ -12,6 +12,10 @@ export const styles = createSheet(({ shades }) => ({
       marginLeft: '1em'
     },
 
+    '&:hover': {
+      cursor: 'pointer'
+    },
+
     '&$up img': { transform: 'rotate(180deg)' },
     '&$right img': { transform: 'rotate(-90deg)' }
   },
diff --git a/src/components/Method/Method.styles.js b/src/components/Method/Method.styles.js
@@ -9,15 +9,15 @@ export const styles = createSheet(({ borders, text, sizes }) => ({
 
     '& > h3': {
       display: 'inline-block',
-      marginBottom: '15px'
+      margin: '0 1.5rem .5rem 0'
     },
 
     '& h4': {
       fontSize: 'smaller',
       textTransform: 'uppercase',
       color: `${c(text.default).lighten(0.5)}`,
       borderBottom: `1px solid ${borders.default}`,
-      marginTop: '20px'
+      marginTop: '1rem'
     }
   },
 
diff --git a/src/components/Method/MethodEndpoints.js b/src/components/Method/MethodEndpoints.js
@@ -26,7 +26,7 @@ export default class MethodEndpoints extends PureComponent {
     }
 
     return (
-      <div className={classNames(classes.methodPath)}>
+      <div className={classNames(classes.methodEndpoints)}>
         <div onClick={this.onClickPath}>
           <span className={classNames(type, 'methodType')}>{type}</span>
           <span className='path'>{path}</span>
diff --git a/src/components/Method/MethodEndpoints.styles.js b/src/components/Method/MethodEndpoints.styles.js
@@ -1,12 +1,17 @@
 import { createSheet } from '../../theme'
 
 export const styles = createSheet(({borders, text, sizes}) => ({
-  methodPath: {
+  methodEndpoints: {
     display: 'inline-block',
     fontFamily: 'monospace',
-    marginLeft: '30px',
+    fontSize: '1.2rem',
+    margin: '0 0 .5rem',
     position: 'relative',
 
+    '&:hover': {
+      textDecoration: 'underline'
+    },
+
     '& .methodType': {
       textTransform: 'uppercase',
       marginRight: '10px',
@@ -31,9 +36,19 @@ export const styles = createSheet(({borders, text, sizes}) => ({
     display: 'none'
   },
   expanded: {
-    // outline: '1px solid red',
     display: 'block',
     position: 'absolute',
-    backgroundColor: 'white'
+    top: '1.6rem',
+    left: '0',
+    zIndex: '5'
+  },
+
+  [`@media (max-width: ${sizes.breakpoint})`]: {
+    'methodEndpoints': {
+      display: 'block'
+    },
+    expanded: {
+      width: 'calc(100% - 1rem)'
+    }
   }
 }))

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ export default class Endpoint extends PureComponent {`
`15`	`15`
`16`	`16`	`return (`
`17`	`17`	`<div className={classes.endpoint}>`
`18`		`- {description && <div><label>{description}</label></div>}`
	`18`	`+ {description && <div>{description}</div>}`
`19`	`19`	`<input className={classes.readonly} defaultValue={url} readOnly onFocus={this.handleFocus} />`
`20`	`20`	`</div>`
`21`	`21`	`)`
Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@ export default class MethodEndpoints extends PureComponent {`
`26`	`26`	`}`
`27`	`27`
`28`	`28`	`return (`
`29`		`- <div className={classNames(classes.methodPath)}>`
	`29`	`+ <div className={classNames(classes.methodEndpoints)}>`
`30`	`30`	`<div onClick={this.onClickPath}>`
`31`	`31`	`<span className={classNames(type, 'methodType')}>{type}</span>`
`32`	`32`	`<span className='path'>{path}</span>`