diff --git a/source/index.html.haml b/source/index.html.haml
index c7fe263d..0e235e93 100644
--- a/source/index.html.haml
+++ b/source/index.html.haml
@@ -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
%ul#resources
-#content_message
-
= jquery_template :resourceTemplate do
%li.resource{:id => "resource_${name}"}
.heading
diff --git a/source/javascripts/swagger-ui.js b/source/javascripts/swagger-ui.js
index 2ecc5a7c..c93d7bd1 100644
--- a/source/javascripts/swagger-ui.js
+++ b/source/javascripts/swagger-ui.js
@@ -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) {
diff --git a/source/layout.haml b/source/layout.haml
index 615f4b35..a02f65e4 100644
--- a/source/layout.haml
+++ b/source/layout.haml
@@ -16,8 +16,23 @@
%script{:src => "javascripts/swagger-ui.js", :type => "text/javascript"}
%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
- %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
= link_to("Swagger", "http://swagger.wordnik.com") + "."
\ No newline at end of file
diff --git a/source/stylesheets/screen.css.sass b/source/stylesheets/screen.css.sass
index b4beace4..64617909 100644
--- a/source/stylesheets/screen.css.sass
+++ b/source/stylesheets/screen.css.sass
@@ -30,31 +30,42 @@ body
font-style: italic
color: #999
- form#api_selector
+ #header
background-color: $main_color_light
- padding: 15px
- @include no_float
- .input
- @include float_left
- margin: 0 10px 0 0
- input
- font-size: 1em
- padding: 3px
- input#input_baseUrl
- width: 500px
- input#input_apiKey
- width: 250px
- a#explore
- display: block
- text-decoration: none
- font-weight: bold
- padding: 8px 8px
- font-size: .9em
- color: white
- background-color: $main_color_dark
- @include border-radius(4px)
- &:hover
+ padding: 14px
+
+ a#logo
+ 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
+ padding: 20px 0 20px 40px
+ color: white
+
+ form#api_selector
+ @include float_right
+ .input
+ @include float_left
+ margin: 0 10px 0 0
+ input
+ font-size: .9em
+ padding: 3px
+ margin: 0
+ input#input_baseUrl
+ width: 400px
+ 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
+ @include border-radius(4px)
+ &:hover
+ background-color: $main_color_dark
p#colophon
margin: 0 15px 40px 15px