mirror of
https://github.com/Redocly/redoc.git
synced 2024-11-10 19:06:34 +03:00
Added some styling
This commit is contained in:
parent
a2fe4c9ca4
commit
ff437c9b00
|
@ -2,6 +2,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>ReDoc prototype</title>
|
||||
<link rel="stylesheet" href="main.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- The wrapper component -->
|
||||
|
|
6
demo/main.css
Normal file
6
demo/main.css
Normal file
|
@ -0,0 +1,6 @@
|
|||
body {
|
||||
font-family: Verdana, Geneva, sans-serif;
|
||||
font-size: 14px;
|
||||
padding: 10px 20px;
|
||||
color: #333;
|
||||
}
|
|
@ -2,7 +2,7 @@
|
|||
<p *ng-if="data.description"> {{data.description}} </p>
|
||||
<p>
|
||||
<!-- TODO: create separate components for contact and license ? -->
|
||||
<span *ng-if="data.contact"> Contatct:
|
||||
<span *ng-if="data.contact"> Contact:
|
||||
<a *ng-if="data.contact.url" href="{{data.contact.url}}">
|
||||
{{data.contact.name || data.contact.url}}</a>
|
||||
<a *ng-if="data.contact.email" href="mailto:{{data.contact.email}}">
|
||||
|
|
44
lib/components/Method/method.css
Normal file
44
lib/components/Method/method.css
Normal file
|
@ -0,0 +1,44 @@
|
|||
h2 {
|
||||
font-size: 32px;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
h3 > span {
|
||||
padding: 5px 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.http-method {
|
||||
font-size: 13px;
|
||||
color: white;
|
||||
background-color: #1976D3;
|
||||
}
|
||||
|
||||
.http-method.delete {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.http-method.post {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.http-method.patch {
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.http-method.put {
|
||||
background-color: crimson;
|
||||
}
|
||||
|
||||
.http-method.options {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.http-method.head {
|
||||
background-color: darkkhaki;
|
||||
}
|
|
@ -1,7 +1,8 @@
|
|||
<div>
|
||||
<h2>{{data.methodInfo.summary}}</h2>
|
||||
<p> <strong>{{data.method}}</strong> <code>{{data.path}}</code> </p>
|
||||
<p class="description">
|
||||
{{data.methodInfo.description}}
|
||||
</p>
|
||||
</div>
|
||||
<h2>{{data.methodInfo.summary}}</h2>
|
||||
<h3>
|
||||
<span class="http-method" [ng-class]="data.method">{{data.method}}</span>
|
||||
<span class="path">{{data.path}}</span>
|
||||
</h3>
|
||||
<p class="method-summary">
|
||||
{{data.methodInfo.description}}
|
||||
</p>
|
||||
|
|
|
@ -5,7 +5,8 @@ import {RedocComponent, BaseComponent} from '../base';
|
|||
|
||||
@RedocComponent({
|
||||
selector: 'method',
|
||||
templateUrl: './lib/components/Method/method.html'
|
||||
templateUrl: './lib/components/Method/method.html',
|
||||
styleUrls: ['./lib/components/Method/method.css']
|
||||
})
|
||||
export class Method extends BaseComponent {
|
||||
constructor(schemaMgr) {
|
||||
|
|
|
@ -20,5 +20,6 @@ export class MethodsList extends BaseComponent {
|
|||
let pathInfo = this.componentSchema;
|
||||
|
||||
this.data.methods = Object.keys(pathInfo).filter((k) => swaggerMethods.has(k));
|
||||
// TODO: check $ref field
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user