Merge pull request #2 from brandonmwest/master

SendGrid styling

.gitignore

@@ -3,3 +3,4 @@ node_modules/*
 config.json
 logs/*
 pids/*
+dump.rdb

public/data/apiconfig.json

@@ -45,13 +45,14 @@
    },
    "sendgrid":{
       "name":"SendGrid",
+      "logo":"/images/sendgrid.png",
       "protocol":"https",
       "baseURL":"sendgrid.com",
       "publicPath":"/api",
       "auth":"key",
       "keyParam":"api_user",
-      "keyLabel":"API Key (username)",
+      "keyLabel":"Username",
       "secretParam":"api_key",
-      "secretLabel":"API Secret (password)"
+      "secretLabel":"Password"
    }
 }

public/stylesheets/style.css

@@ -114,7 +114,7 @@ html {
 }
 
 a:link {
-  -webkit-tap-highlight-color: #ff5e99;
+  -webkit-tap-highlight-color: #8394A9;
 }
 
 a:hover,
@@ -277,7 +277,7 @@ html {
   height: 100%;
 }
 
-body {
+#body-container {
   width: 960px;
   margin: 15px auto;
   padding-bottom: 20px;
@@ -309,9 +309,50 @@ li {
   margin-left: 0;
 }
 
+#header {
+	background:url(/images/sendgrid-header-bg.png) repeat 0 0;
+	height:80px;
+}
+
+#header-logo {
+  width: 960px;
+  margin: 0 auto;
+  padding-top:14px;
+  padding-bottom: 20px;
+}
+
+#sub-header {
+  width: 100%;
+  margin: 0 auto;
+  background: url(/images/sendgrid-subheader-bg.png) repeat-x 0 0;
+  height: 62px;
+}
+
+#sub-header-links {
+  width: 960px;
+  margin: 0 auto;
+  padding-top:14px;
+  padding-bottom: 20px;	
+}
+
+#sub-header a {
+	font-size:14px;
+	padding:3px 25px 15px 5px;
+	font-weight: bolder;
+	color: #333;
+	text-decoration: none;
+	display: block;
+	line-height: 18px;
+	text-transform: uppercase;
+	text-rendering: optimizelegibility;
+	float: left;
+	margin-right: 1%;
+
+}
+
 .credentials {
-  background-color: #f4f4e1;
-  border: 1px solid #cbcb71;
+  background-color: #E7F0F7;
+  border: 1px solid #029DE7;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   -o-border-radius: 5px;
@@ -386,7 +427,7 @@ li {
 .endpoint {
   margin: 0;
   background-color: #f9f9f9;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid #C9C9C9;
   overflow: hidden;
   *zoom: 1;
   -moz-transition-property: background-color;
@@ -417,11 +458,13 @@ li {
 .endpoint > .title .name {
   font-size: 18px;
   float: left;
+  color: #029DE7;
 }
 
 .endpoint > .title .name:hover {
   cursor: pointer;
   text-decoration: underline;
+  color: #0072A8;
 }
 
 .endpoint > .title .actions {
@@ -637,11 +680,11 @@ li {
 
 .get {
   background: #e7f0f7;
-  border-color: #aecce4;
+  border-color: #029DE7;
 }
 
 .get .http-method {
-  background-color: #0061ac;
+  background-color: #029DE7;
 }
 
 .get th, .get td {

views/api.jade

@@ -1,10 +1,8 @@
-h1=apiInfo.name 
 - if (session.authed && apiInfo.oauth && apiInfo.oauth.type =='three-legged')
     - var authed ='authed'
 - else
     - var authed =''
 
-
 form#credentials
     input(type='hidden', name='apiName', value=apiName)
     - if (apiInfo.auth) 
@@ -13,7 +11,7 @@ form#credentials
              span Authenticated with OAuth
              img(src='/images/accept.png')
          - else
-             h2 API Credentials
+             h2=apiInfo.name + " Credentials"
                img(src='/images/key.png')
 
              - if (apiInfo.oauth)
@@ -37,7 +35,7 @@ form#credentials
              div
                  - if (apiInfo.oauth || apiInfo.signature || apiInfo.secretParam)
                      - if (apiInfo.secretLabel)
-                          label(for="secret')=apiInfo.secretLabel
+                          label(for='secret')=apiInfo.secretLabel
                      - else
                           label(for='secret') Shared Secret
                      input(id='secret', name='secret', value=defaultSecret, style='color=#EEEEEE', type='password')

views/layout.jade

@@ -10,15 +10,30 @@ html
         link(rel='stylesheet', href='/stylesheets/style.css')
 
     body
-        !{body}
-        div(id='io-footer')
-           div(class='f-left') ©  
-              a(href='http://mashery.com/io') Mashery, Inc.
-           div(class='f-right') Powered by 
-              a(href='https://github.com/mashery/iodocs') I/O Docs
-        script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js')
-        script(src='/javascripts/json2.js')
-        script(src='/javascripts/prettify.js')
-        script(src='/javascripts/utilities.js')
-        script(src='/javascripts/livedocs.js')
-        script(src='/javascripts/docs.js')
+        div(id='header')
+            div(id='header-logo')
+                - if (apiInfo.logo)
+                    a(href='http://www.sendgrid.com/') 
+                        img(src=apiInfo.logo) 
+                - else
+                    h2=apiInfo.name
+
+        div(id="sub-header")
+            div(id="sub-header-links")
+                a(href="http://www.sendgrid.com") Home
+                a(href="http://docs.sendgrid.com") Documentation
+                a(href="http://sendgrid.com/pricing.html") Pricing
+
+        div(id='body-container')
+            !{body}
+            div(id='io-footer')
+               div(class='f-left') ©  
+                  a(href='http://mashery.com/io') Mashery, Inc.
+               div(class='f-right') Powered by 
+                  a(href='https://github.com/mashery/iodocs') I/O Docs
+            script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js')
+            script(src='/javascripts/json2.js')
+            script(src='/javascripts/prettify.js')
+            script(src='/javascripts/utilities.js')
+            script(src='/javascripts/livedocs.js')
+            script(src='/javascripts/docs.js')