UI improvements for parameters (input and read-only) and model description.

Uses changes to swagger.js (swagger-client).
This commit is contained in:
Pepijn de Geus
2013-02-27 17:01:25 +01:00
parent 1a017d46a5
commit d205753044
8 changed files with 91 additions and 56 deletions

View File

@@ -133,9 +133,15 @@ div.heading_with_menu ul {
margin-top: 10px;
}
input.parameter {
width: 300px;
border: 1px solid #aaa;
}
.body-textarea {
width: 300px;
height: 100px;
border: 1px solid #aaa;
}
p {
@@ -1509,12 +1515,24 @@ body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operatio
font-size: 1em;
line-height: 1.5em;
}
.model-signature .description span {
.model-signature .description div {
font-size: 0.9em;
line-height: 1.5em;
margin-left: 1em;
}
.model-signature .description span:nth-child(odd) { color:#333; }
.model-signature .description span:nth-child(even) { color:#C5862B; }
.model-signature .description .strong {
font-weight: bold;
color: #000;
font-size: .9em;
}
.model-signature .description .stronger {
font-weight: bold;
color: #000;
}
.model-signature .signature-nav a {
text-decoration: none;
color: #AAA;
@@ -1551,24 +1569,16 @@ body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operatio
}
.model-signature ul.signature-nav {
float: none;
clear: both;
overflow: hidden;
display: block;
margin: 0;
padding: 0;
display: block;
clear: none;
float: right;
margin-right: 5px;
margin-bottom: 5px;
}
.model-signature ul.signature-nav li {
float: left;
clear: none;
margin: 0;
padding: 2px 10px;
border-right: 1px solid #dddddd;
margin: 0 5px 5px 0;
padding: 2px 5px 2px 0;
border-right: 1px solid #ddd;
}
.model-signature ul.signature-nav li:last-child {
@@ -1576,10 +1586,29 @@ body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operatio
border-right: none;
}
.model-signature .propName {
font-weight: bold;
}
.model-signature .propType {
color: #5555aa;
}
.model-signature .propOptKey {
font-style: italic;
}
.model-signature .propOpt {
color: #555;
}
pre code {
background: none;
}
.content pre {
font-size: 12px;
margin-top: 5px;
padding: 5px;
}
.content > .content-type > div > label {
clear: both;
display: block;
@@ -1588,3 +1617,27 @@ pre code {
margin: 0;
padding: 15px 0 5px 0px;
}
.swagger-ui-wrap {
max-width: 960px;
margin-left: auto;
margin-right: auto;
}
.icon-btn {
cursor: pointer;
}
#message-bar {
min-height: 30px;
text-align: center;
padding-top: 10px;
}
.message-success {
color: #89BF04;
}
.message-fail {
color: #cc0000;
}

View File

@@ -16,32 +16,6 @@
<script src='swagger-ui.js' type='text/javascript'></script>
<script src='lib/highlight.7.3.pack.js' type='text/javascript'></script>
<style type="text/css">
.swagger-ui-wrap {
max-width: 960px;
margin-left: auto;
margin-right: auto;
}
.icon-btn {
cursor: pointer;
}
#message-bar {
min-height: 30px;
text-align: center;
padding-top: 10px;
}
.message-success {
color: #89BF04;
}
.message-fail {
color: #cc0000;
}
</style>
<script type="text/javascript">
$(function () {
window.swaggerUi = new SwaggerUi({

View File

@@ -47,7 +47,7 @@
{{/if}}
{{#if errorResponses}}
<div style='margin:0;padding:0;display:inline'></div>
<h4>Status Codes</h4>
<h4>Error Status Codes</h4>
<table class='fullwidth'>
<thead>
<tr>

View File

@@ -15,9 +15,9 @@
{{/if}}
{{else}}
{{#if defaultValue}}
<input minlength='0' name='{{name}}' placeholder='' type='text' value='{{defaultValue}}'/>
<input class='parameter' minlength='0' name='{{name}}' placeholder='' type='text' value='{{defaultValue}}'/>
{{else}}
<input minlength='0' name='{{name}}' placeholder='' type='text' value=''/>
<input class='parameter' minlength='0' name='{{name}}' placeholder='' type='text' value=''/>
{{/if}}
{{/if}}

View File

@@ -1,6 +1,6 @@
<td class='code'>{{name}}</td>
<td>
<select name='{{name}}'>
<select class='parameter' name='{{name}}'>
{{#if required}}
{{else}}
{{#if defaultValue}}

View File

@@ -3,7 +3,11 @@
{{#if isBody}}
<textarea class='body-textarea' readonly='readonly' name='{{name}}'>{{defaultValue}}</textarea>
{{else}}
{{#if defaultValue}}
{{defaultValue}}
{{else}}
(empty)
{{/if}}
{{/if}}
</td>
<td>{{{description}}}</td>

View File

@@ -3,7 +3,11 @@
{{#if isBody}}
<textarea class='body-textarea' readonly='readonly' placeholder='(required)' name='{{name}}'>{{defaultValue}}</textarea>
{{else}}
{{#if defaultValue}}
{{defaultValue}}
{{else}}
(empty)
{{/if}}
{{/if}}
</td>
<td>{{{description}}}</td>

View File

@@ -14,12 +14,12 @@
{{/if}}
{{else}}
{{#if isFile}}
<input class='required' type='file' name='{{name}}'/>
<input class='parameter' class='required' type='file' name='{{name}}'/>
{{else}}
{{#if defaultValue}}
<input class='required' minlength='1' name='{{name}}' placeholder='(required)' type='text' value='{{defaultValue}}'/>
<input class='parameter' class='required' minlength='1' name='{{name}}' placeholder='(required)' type='text' value='{{defaultValue}}'/>
{{else}}
<input class='required' minlength='1' name='{{name}}' placeholder='(required)' type='text' value=''/>
<input class='parameter' class='required' minlength='1' name='{{name}}' placeholder='(required)' type='text' value=''/>
{{/if}}
{{/if}}
{{/if}}