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

Added a logo to the build; Added some suggested base URLs for first-time visitors.

Browse Source
This commit is contained in:
zeke
2011-08-09 16:20:18 -07:00
parent f126a73d99
commit 41f1c6d528
4 changed files with 65 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
source/index.html.haml
View File

@@ -1,13 +1,6 @@
%form#api_selector
.input= text_field_tag :baseUrl, :placeholder => "http://example.com/api", :id => 'input_baseUrl'
.input= text_field_tag :apiKey, :placeholder => "api_key", :id => 'input_apiKey'
.input= link_to('Explore', "#", :id => "explore")
#resources_container.container #resources_container.container
%ul#resources %ul#resources
#content_message
= jquery_template :resourceTemplate do = jquery_template :resourceTemplate do
%li.resource{:id => "resource_${name}"} %li.resource{:id => "resource_${name}"}
.heading .heading

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

@@ -1,7 +1,9 @@
jQuery(function($) { jQuery(function($) {
// this.baseUrl = "http://swagr.api.wordnik.com/v4"; // this.baseUrl = "http://swagr.api.wordnik.com/v4";
// this.apiKey = "my-api-key";
// this.baseUrl = "http://petstore.swagger.wordnik.com/api";
// this.apiKey = "special-key";
var ApiSelectionController = Spine.Controller.create({ var ApiSelectionController = Spine.Controller.create({
proxied: ["showApi"], proxied: ["showApi"],
@@ -33,17 +35,19 @@ jQuery(function($) {
}, },
adaptToScale: function() { adaptToScale: function() {
var form_width = $('form#api_selector').width(); // var form_width = $('form#api_selector').width();
var inputs_width = 0; // var inputs_width = 0;
$('form#api_selector div.input').each( function(){ inputs_width += $(this).outerWidth(); }); // $('form#api_selector div.input').each( function(){ inputs_width += $(this).outerWidth(); });
//
// Update with of baseUrl input // // Update with of baseUrl input
var free_width = form_width - inputs_width; // var free_width = form_width - inputs_width;
$('#input_baseUrl').width($('#input_baseUrl').width() + free_width - 50); // $('#input_baseUrl').width($('#input_baseUrl').width() + free_width - 50);
}, },
slapOn: function() { 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(); $("#resources_container").hide();
this.showApi(); this.showApi();
}, },
@@ -174,6 +178,7 @@ jQuery(function($) {
render: function() { render: function() {
$(this.templateName).tmpl(this.item).appendTo(this.container); $(this.templateName).tmpl(this.item).appendTo(this.container);
$('#colophon').fadeIn();
}, },
renderApi: function(api) { renderApi: function(api) {

17
source/layout.haml
View File

@@ -16,8 +16,23 @@
%script{:src => "javascripts/swagger-ui.js", :type => "text/javascript"} %script{:src => "javascripts/swagger-ui.js", :type => "text/javascript"}
%body %body
#header
= link_to("swagger", "http://swagger.wordnik.com", :id => "logo")
%form#api_selector
.input= text_field_tag :baseUrl, :placeholder => "http://example.com/api", :id => 'input_baseUrl'
.input= text_field_tag :apiKey, :placeholder => "api_key", :id => 'input_apiKey'
.input= link_to('Explore', "#", :id => "explore")
= yield = yield
%p#colophon #content_message
Enter the base URL of the API that you wish to explore, or try
= link_to("swagr.api.wordnik.com/v4", "#", :onclick => "$('#input_baseUrl').val('http://swagr.api.wordnik.com/v4'); apiSelectionController.showApi(); return false;")
or
= link_to("petstore.swagger.wordnik.com/api", "#", :onclick => "$('#input_baseUrl').val('http://petstore.swagger.wordnik.com/api'); apiSelectionController.showApi(); return false;") + "."
%p#colophon{:style => 'display:none'}
Sexy API documentation from Sexy API documentation from
= link_to("Swagger", "http://swagger.wordnik.com") + "." = link_to("Swagger", "http://swagger.wordnik.com") + "."

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

@@ -30,31 +30,42 @@ body
font-style: italic font-style: italic
color: #999 color: #999
form#api_selector #header
background-color: $main_color_light background-color: $main_color_light
padding: 15px padding: 14px
@include no_float
.input a#logo
@include float_left font-size: 1.5em
margin: 0 10px 0 0 font-weight: bold
input text-decoration: none
font-size: 1em background: transparent image_url('http://local.wordnik.com:3000/images/logo_small.png') no-repeat left center
padding: 3px padding: 20px 0 20px 40px
input#input_baseUrl color: white
width: 500px
input#input_apiKey form#api_selector
width: 250px @include float_right
a#explore .input
display: block @include float_left
text-decoration: none margin: 0 10px 0 0
font-weight: bold input
padding: 8px 8px font-size: .9em
font-size: .9em padding: 3px
color: white margin: 0
background-color: $main_color_dark input#input_baseUrl
@include border-radius(4px) width: 400px
&:hover input#input_apiKey
width: 200px
a#explore
display: block
text-decoration: none
font-weight: bold
padding: 6px 8px
font-size: .9em
color: white
background-color: $main_color_dark background-color: $main_color_dark
@include border-radius(4px)
&:hover
background-color: $main_color_dark
p#colophon p#colophon
margin: 0 15px 40px 15px margin: 0 15px 40px 15px