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

Uses changes to swagger.js (swagger-client).

src/main/html/css/screen.css

@@ -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;
+}

src/main/html/index.html

@@ -16,35 +16,9 @@
     <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({
+	$(function () {
+	    window.swaggerUi = new SwaggerUi({
                 discoveryUrl:"http://petstore.swagger.wordnik.com/api/api-docs.json",
                 apiKey:"special-key",
                 dom_id:"swagger-ui-container",

src/main/template/operation.handlebars

@@ -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>

src/main/template/param.handlebars

@@ -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}}
 

src/main/template/param_list.handlebars

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

src/main/template/param_readonly.handlebars

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

src/main/template/param_readonly_required.handlebars

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

src/main/template/param_required.handlebars

@@ -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}}