Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2024-11-11 03:16:48 +03:00
Code Issues Packages Projects Releases Wiki Activity

update parameters design

Browse Source
This commit is contained in:
Roman Hotsiy 2015-11-17 01:12:42 +02:00
parent 1d5aedfdc4
commit 7195c1c9e4
3 changed files with 112 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
demo/main.css
View File

@ -7,6 +7,10 @@ body {
padding-top: 50px;
}
p {
margin: 0;
}
nav input, nav button {
font-size: 16px;
line-height: 28px;

118
lib/components/ParamsList/params-list.css
View File

@ -1,58 +1,92 @@
h4 {
font-size: 16px;
font-weight: 200;
color: black;
h2 {
border-bottom: 1px solid #999;
font-size: 18px;
padding: 0.2em 0;
margin: 0.5em 0;
color: #253137;
}
table {
.params-wrap {
display: table;
}
.param-name {
display: table-cell;
padding: 0 5px;
font-weight: bold;
}
.param-info {
display: table-cell;
width: 100%;
border-spacing: 0;
border: 2px solid #053361;
padding: 0 5px;
}
td.param-name {
width: 20%;
.param {
display: table-row;
}
td.param-description {
width: 30%;
}
thead tr:first-child {
background: #053361;
color: #fff;
border: none;
}
thead tr:last-child th {
border-bottom: 3px solid #ddd;
}
tbody tr:last-child td {
border: none;
}
tbody td {
border-bottom: 1px solid #ddd;
}
td, th {
vertical-align: top;
padding: 10px 10px;
.param-required {
color: red;
font-weight: bold;
font-size: 12px;
}
th {
text-align: left;
.param-description {
padding: 0.5em 0;
border-bottom: 1px solid #999;
}
.param-type {
background-color: #EAEAEA;
border: silver 1px solid;
padding: 5px 10px;
line-height: 14px;
font-family: monospace;
text-transform: capitalize;
color: #999;
font-weight: bold;
font-size: 12px;
}
.body-schema {
display: inline-block;
.param-name {
border-left: 2px solid #7D97CE;
white-space: nowrap;
position: relative;
}
/* tree */
.param-name > span:before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
background-color: #7D97CE;
margin: 0 5px;
top: -1px;
position: relative;
}
.param-name > span:after {
content: "";
position: absolute;
border-top: 2px solid #7D97CE;
width: 10px;
left: 0;
top: 10px;
}
.param:first-of-type .param-name:before {
content: "";
display: block;
position: absolute;
left: -2px;
width: 2px;
background-color: white;
height: 10px;
}
.param:last-of-type .param-name:after {
content: "";
display: block;
position: absolute;
left: -2px;
width: 2px;
top: 18px;
background-color: white;
bottom: 0;
}

37
lib/components/ParamsList/params-list.html
View File

@ -1,5 +1,31 @@
<h2 *ng-if="data.params.length"> Parameters </h2>
<div class="params-wrap">
<div *ng-for="#param of data.params" class="param">
<div class="param-name">
<span> {{param.name}} </span>
</div>
<div class="param-info">
<div>
<span class="param-type" [ng-class]="param.type">{{param.type}}</span>
<span *ng-if="param.required" class="param-required">Required</span>
</div>
<div class="param-description" inner-html="{{param.description | marked}}"></div>
</div>
</div>
</div>
<div *ng-if="data.bodyParam">
<h2 *ng-if="data.bodyParam"> Request Body </h2>
<div class="body-param-description" inner-html="{{data.bodyParam.description | marked}}"></div>
<div>
<schema class="body-schema param-type" pointer="{{data.bodyParam.pointer}}/schema">
</schema>
</div>
</div>
<!--
<table class="inline">
<!-- No params -->
<!- No params ->
<tr *ng-if="data.noParams">
<td colspan="3">
<small class="no-params" > No parameters </small>
@ -17,17 +43,17 @@
</tr>
</thead>
<tbody>
<!-- General parameters -->
<!- General parameters ->
<tr *ng-for="#param of data.params">
<!--<div class="param">-->
<!-<div class="param">->
<td class="param-name">{{param.name}}</td>
<td class="param-description" inner-html="{{param.description | marked}}"></td>
<td>
<span class="type" [ng-class]="param.type">{{param.type}}</span>
</td>
<!--</div>-->
<!-</div>->
</tr>
<!-- in-body parameter -->
<!- in-body parameter ->
<tr class="param body-param" *ng-if="data.bodyParam">
<td class="param-name">{{data.bodyParam.name}}</td>
<td class="param-description" inner-html="{{data.bodyParam.description | marked}}"></td>
@ -38,3 +64,4 @@
</tr>
</tbody>
</table>
-->