Improved header and footer.

source/index.html.haml

@@ -1,7 +1,7 @@
 %form#api_selector
-  %li= text_field_tag :baseUrl, :placeholder => "http://example.com/api", :id => 'input_baseUrl'
-  %li= text_field_tag :apiKey, :placeholder => "api_key", :id => 'input_apiKey'
-  %li= link_to('Explore', "#", :id => "explore")
+  .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

source/javascripts/swagger-ui.js

@@ -24,6 +24,22 @@ jQuery(function($) {
       }
 
       $("a#explore").click(this.showApi);
+
+      this.adaptToScale();
+      $(window).resize(function() {
+      	apiSelectionController.adaptToScale();
+      });
+
+    },
+    
+    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);
     },
 
     slapOn: function() {
@@ -315,8 +331,9 @@ jQuery(function($) {
 
   });
 
-
+  // Attach controller to window
   window.apiSelectionController = ApiSelectionController.init();
+  
   if (this.baseUrl) {
     window.resourceListController = ResourceListController.init({
       baseUrl: this.baseUrl,

source/layout.haml

@@ -16,4 +16,8 @@
     %script{:src => "javascripts/swagger-ui.js", :type => "text/javascript"}
     
   %body
-    = yield
+    = yield
+    
+    %p#colophon
+      Sexy API documentation from
+      = link_to("Swagger", "http://swagger.wordnik.com") + "."

source/stylesheets/screen.css.sass

@@ -24,16 +24,17 @@ $main_column_margin_right: 30px
 
 body
   font-family: "Droid Sans", sans-serif
-  margin: 20px
-  
+
   #content_message
-    margin: 10px 0
+    margin: 10px 15px
     font-style: italic
     color: #999
   
   form#api_selector
+    background-color: $main_color_light
+    padding: 15px
     @include no_float
-    li
+    .input
       @include float_left
       margin: 0 10px 0 0
       input
@@ -42,7 +43,7 @@ body
       input#input_baseUrl
         width: 500px
       input#input_apiKey
-        width: 150px
+        width: 250px
       a#explore
         display: block
         text-decoration: none
@@ -50,12 +51,25 @@ body
         padding: 8px 8px
         font-size: .9em
         color: white
-        background-color: $main_color_light
+        background-color: $main_color_dark
         @include border-radius(4px)
         &:hover
           background-color: $main_color_dark
+  
+  p#colophon
+    margin: 0 15px 40px 15px
+    padding: 10px 0
+    font-size: .8em
+    border-top: 1px solid #DDD
+    @include droid_sans
+    color: #999
+    font-style: italic
+    a
+      text-decoration: none
+      color: $main_color_dark      
 
   ul#resources
+    padding: 0 15px
     font-family: "Droid Sans", sans-serif
     font-size: .9em