kyy/swagger-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Built a fresh version

Browse Source
This commit is contained in:
zeke
2011-08-09 16:24:37 -07:00
parent 41f1c6d528
commit eefd173d9a
4 changed files with 70 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
build/index.html
View File

@@ -13,15 +13,17 @@
<script src='javascripts/swagger-ui.js' type='text/javascript'></script>
</head>
<body>
<form id='api_selector'>
<div class='input'><input placeholder="http://example.com/api" id="input_baseUrl" name="baseUrl" type="text" /></div>
<div class='input'><input placeholder="api_key" id="input_apiKey" name="apiKey" type="text" /></div>
<div class='input'><a id="explore" href="#">Explore</a></div>
</form>
<div id='header'>
<a id="logo" href="http://swagger.wordnik.com">swagger</a>
<form id='api_selector'>
<div class='input'><input placeholder="http://example.com/api" id="input_baseUrl" name="baseUrl" type="text" /></div>
<div class='input'><input placeholder="api_key" id="input_apiKey" name="apiKey" type="text" /></div>
<div class='input'><a id="explore" href="#">Explore</a></div>
</form>
</div>
<div class='container' id='resources_container'>
<ul id='resources'></ul>
</div>
<div id='content_message'></div>
<script id="resourceTemplate" type="text/x-jquery-tmpl"><li class='resource' id='resource_${name}'>
<div class='heading'>
<h2>
@@ -152,7 +154,13 @@
<td width='500'>${description}</td>
</tr>
</script>
<p id='colophon'>
<div id='content_message'>
Enter the base URL of the API that you wish to explore, or try
<a onclick="$('#input_baseUrl').val('http://swagr.api.wordnik.com/v4'); apiSelectionController.showApi(); return false;" href="#">swagr.api.wordnik.com/v4</a>
or
<a onclick="$('#input_baseUrl').val('http://petstore.swagger.wordnik.com/api'); apiSelectionController.showApi(); return false;" href="#">petstore.swagger.wordnik.com/api</a>.
</div>
<p id='colophon' style='display:none'>
Sexy API documentation from
<a href="http://swagger.wordnik.com">Swagger</a>.
</p>

25
build/javascripts/swagger-ui.js
View File

@@ -1,7 +1,9 @@
jQuery(function($) {
// this.baseUrl = "http://swagr.api.wordnik.com/v4";
// this.apiKey = "my-api-key";
// this.baseUrl = "http://swagr.api.wordnik.com/v4";
// this.baseUrl = "http://petstore.swagger.wordnik.com/api";
// this.apiKey = "special-key";
var ApiSelectionController = Spine.Controller.create({
proxied: ["showApi"],
@@ -33,17 +35,19 @@ jQuery(function($) {
},
adaptToScale: function() {
var form_width = $('form#api_selector').width();
var inputs_width = 0;
$('form#api_selector div.input').each( function(){ inputs_width += $(this).outerWidth(); });
// Update with of baseUrl input
var free_width = form_width - inputs_width;
$('#input_baseUrl').width($('#input_baseUrl').width() + free_width - 50);
// var form_width = $('form#api_selector').width();
// var inputs_width = 0;
// $('form#api_selector div.input').each( function(){ inputs_width += $(this).outerWidth(); });
//
// // Update with of baseUrl input
// var free_width = form_width - inputs_width;
// $('#input_baseUrl').width($('#input_baseUrl').width() + free_width - 50);
},
slapOn: function() {
messageController.showMessage("Please enter the base URL of the API that you wish to explore.");
// messageController.showMessage("Please enter the base URL of the API that you wish to explore.");
$("#content_message").show();
$("#resources_container").hide();
this.showApi();
},
@@ -174,6 +178,7 @@ jQuery(function($) {
render: function() {
$(this.templateName).tmpl(this.item).appendTo(this.container);
$('#colophon').fadeIn();
},
renderApi: function(api) {

70
build/stylesheets/screen.css
View File

@@ -283,41 +283,49 @@ body {
margin: 10px 15px;
font-style: italic;
color: #999999; }
body form#api_selector {
body #header {
background-color: #89bf04;
padding: 15px;
float: none;
clear: both;
overflow: hidden;
display: block; }
body form#api_selector .input {
padding: 14px; }
body #header a#logo {
font-size: 1.5em;
font-weight: bold;
text-decoration: none;
background: transparent url(http://swagger.wordnik.com/images/logo_small.png) no-repeat left center;
padding: 20px 0 20px 40px;
color: white; }
body #header form#api_selector {
display: block;
clear: none;
float: left;
margin: 0 10px 0 0; }
body form#api_selector .input input {
font-size: 1em;
padding: 3px; }
body form#api_selector .input input#input_baseUrl {
width: 500px; }
body form#api_selector .input input#input_apiKey {
width: 250px; }
body form#api_selector .input a#explore {
float: right; }
body #header form#api_selector .input {
display: block;
text-decoration: none;
font-weight: bold;
padding: 8px 8px;
font-size: 0.9em;
color: white;
background-color: #547f00;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px; }
body form#api_selector .input a#explore:hover {
background-color: #547f00; }
clear: none;
float: left;
margin: 0 10px 0 0; }
body #header form#api_selector .input input {
font-size: 0.9em;
padding: 3px;
margin: 0; }
body #header form#api_selector .input input#input_baseUrl {
width: 400px; }
body #header form#api_selector .input input#input_apiKey {
width: 200px; }
body #header form#api_selector .input a#explore {
display: block;
text-decoration: none;
font-weight: bold;
padding: 6px 8px;
font-size: 0.9em;
color: white;
background-color: #547f00;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px; }
body #header form#api_selector .input a#explore:hover {
background-color: #547f00; }
body p#colophon {
margin: 0 15px 40px 15px;
padding: 10px 0;

2
source/stylesheets/screen.css.sass
View File

@@ -38,7 +38,7 @@ body
font-size: 1.5em
font-weight: bold
text-decoration: none
background: transparent image_url('http://local.wordnik.com:3000/images/logo_small.png') no-repeat left center
background: transparent image_url('http://swagger.wordnik.com/images/logo_small.png') no-repeat left center
padding: 20px 0 20px 40px
color: white