oceanprotocol/docs
1
0
Fork 0
mirror of https://github.com/oceanprotocol/docs.git synced 2024-11-26 19:49:26 +01:00
Code Releases Activity

color concept for method names

Browse Source
This commit is contained in:
Matthias Kretschmann 2018-11-28 14:27:33 +01:00
parent 97477945d5
commit 25b6e388bb
Signed by: m
GPG Key ID: 606EEEF3C479A91F
2 changed files with 54 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/templates/ApiSwagger.jsx
View File

@ -23,6 +23,23 @@ const toc = api => {
return `<ul>${items}</ul>` return `<ul>${items}</ul>`
} }
const Method = ({ keyName, value }) => (
<div className={styles.method}>
<h3 className={styles.pathMethod} data-type={keyName}>
{keyName}
</h3>
<p>{value['summary']}</p>
{value['description'] && <p>{value['description']}</p>}
</div>
)
Method.propTypes = {
keyName: PropTypes.string,
value: PropTypes.object
}
export default class ApiSwaggerTemplate extends Component { export default class ApiSwaggerTemplate extends Component {
static propTypes = { static propTypes = {
data: PropTypes.object.isRequired, data: PropTypes.object.isRequired,
@ -83,9 +100,8 @@ export default class ApiSwaggerTemplate extends Component {
{Object.entries(api.paths).map( {Object.entries(api.paths).map(
([key, value]) => ( ([key, value]) => (
<> <div key={key}>
<h2 <h2
key={key}
id={slugify(key)} id={slugify(key)}
className={styles.pathName} className={styles.pathName}
> >
@ -94,35 +110,14 @@ export default class ApiSwaggerTemplate extends Component {
{Object.entries(value).map( {Object.entries(value).map(
([key, value]) => ( ([key, value]) => (
<> <Method
<h3 key={key}
key={key} keyName={key}
className={ value={value}
styles.pathMethod />
}
>
<code>{key}</code>
</h3>
<p>
{value['summary']}
</p>
{value[
'description'
] && (
<p>
{
value[
'description'
]
}
</p>
)}
</>
) )
)} )}
</> </div>
) )
)} )}
</article> </article>

31
src/templates/ApiSwagger.module.scss
View File

@ -2,8 +2,37 @@
.pathName { .pathName {
font-size: $font-size-h2; font-size: $font-size-h2;
border-bottom: 1px solid $brand-grey-lighter;
padding-bottom: $spacer / 2;
margin-bottom: $spacer / 2;
} }
.pathMethod { .pathMethod {
font-size: $font-size-h5; font-size: $font-size-base;
font-family: $font-family-monospace;
margin-bottom: $spacer / 4;
display: inline-block;
padding: $spacer / 8 $spacer / 4;
border-radius: $border-radius;
&[data-type='get'] {
background: rgba($green, .4);
}
&[data-type='post'] {
background: rgba($brand-blue, .4);
}
&[data-type='put'] {
background: rgba($brand-violet, .3);
}
&[data-type='delete'] {
background: rgba($red, .4);
}
}
.method {
padding-top: $spacer / 4;
padding-bottom: $spacer / 4;
} }