Style API Playground

Aurélio A. Heckert · Rodrigo Souto
1 parent 1a8ddee7
Showing 4 changed files with 65 additions and 13 deletions Show diff stats
app/views/api/playground.html.erb
public/javascripts/api-playground.js
public/stylesheets/api-playground.scss
public/stylesheets/application.scss
@@ -16,11 +16,17 @@ end.flatten.compact.sort{|a,b| a[:path]==&#39;/api/v1/login&#39; ? -1:1}.to_json %&gt;;
 </script>
 <form id="api-form">
-  <label>Endpoint: <select name="endpoint" onchange="playground.selEndpoint()"></select></label> &nbsp;
-  <label>Token: <input id="api-token" size="32" style="font-family:monospace"></label>
+  <label id="endpoint">Endpoint:
+    <select name="endpoint" onchange="playground.selEndpoint()"></select>
+  </label>
+  <label id="api-token">Token:
+    <%= tag :input, size: 32, placeholder: _('Use the login endpoint') %>
+  </label>
 </form>
-<button onclick="playground.addFormParam()"><%=_('Add parameter')%></button>
-<button onclick="playground.run()" style="font-weight:bold">&nbsp; <%=_('Run')%> &nbsp;</button>
-<pre id="api-response"></pre>
+<div id="playground-ctrl">
+  <button onclick="playground.addFormParam()"><%=_('Add parameter')%></button>
+  <button onclick="playground.run()" style="font-weight:bold">&nbsp; <%=_('Run')%> &nbsp;</button>
+</div>
+<pre id="api-response" class="empty"></pre>
 <script src="/javascripts/api-playground.js"></script>
@@ -6,11 +6,11 @@ for (var endpoint,i=0; endpoint=endpoints[i]; i++) {
 var playground = {
   getToken: function() {
-    return jQuery('#api-token').val();
+    return jQuery('#api-token input').val();
   },
   setToken: function(token) {
-    jQuery('#api-token').val(token);
+    jQuery('#api-token input').val(token);
   },
   getEndpoint: function() {
@@ -39,8 +39,8 @@ var playground = {
   addFormParam: function(name) {
     if (!name) name = '';
     jQuery('<div class="api-param">'+
-    '<label>name: <input name="name[]" value="'+name+'"></label> &nbsp; '+
-    '<label>value: <input name="value[]"></label>'+
+    '<label class="param-nane">name: <input name="name[]" value="'+name+'"></label>'+
+    '<label class="param-value">value: <input name="value[]"></label>'+
     '</div>').appendTo('#api-form');
   },
@@ -54,7 +54,7 @@ var playground = {
     if ( endpoint.path != '/api/v1/login' ) {
       data.private_token = this.getToken();
     }
-    jQuery('#api-response').empty();
+    jQuery('#api-response').empty()[0].className = 'empty';
     var url = endpoint.path;
     var pathParameters = endpoint.path.match(/:[^/]+/g);
     if ( pathParameters ) {
@@ -68,16 +68,18 @@ var playground = {
       method: endpoint.method,
       data: data,
       success: function(data, textStatus, jqXHR) {
-        jQuery('#api-response').text( JSON.stringify(data, null, '  ') );
+        jQuery('#api-response').text(
+          JSON.stringify(data, null, '  ')
+        )[0].className = 'full';
         if ( endpoint.path == '/api/v1/login' ) {
-          playground.setToken(data.private_token);
+          playground.setToken(data.private_token)
         }
       },
       error: function(jqXHR, textStatus, errorThrown) {
         jQuery('#api-response').html(
           '<h2>'+textStatus+'</h2>' +
           'Request to '+url+' fail.\n\n' + errorThrown
-        );
+        )[0].className = 'fail';
       }
     });
   }
@@ -0,0 +1,42 @@
+.action-api-playground {
+
+   #api-token {
+     margin-left: 10px;
+     
+     input {
+       font-family: monospace;
+     }
+   }
+
+   .api-param {
+     margin: 5px 0;
+
+     .param-value {
+       margin-left: 10px;
+     }
+   }
+
+   #playground-ctrl {
+     * {
+       vertical-align: middle;
+     }
+   }
+
+   #api-response {
+     color: #000;
+     border: 1px solid rgba(0,0,0,0.3);
+     padding: 10px 15px;
+     box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
+     &.empty {
+       border: none;
+       Xbox-shadow: none;
+     }
+     &.full {
+       background: #E0E8EF;
+     }
+     &.fail {
+       background: #EDD;
+     }
+   }
+
+}
@@ -16,6 +16,8 @@
  *= require search
  */
+@import "api-playground";
+
 /* browser fixes */
 img:-moz-broken {
@@ -0,0 +1,42 @@		@@ -0,0 +1,42 @@
	1	+.action-api-playground {
	2	+
	3	+ #api-token {
	4	+ margin-left: 10px;
	5	+
	6	+ input {
	7	+ font-family: monospace;
	8	+ }
	9	+ }
	10	+
	11	+ .api-param {
	12	+ margin: 5px 0;
	13	+
	14	+ .param-value {
	15	+ margin-left: 10px;
	16	+ }
	17	+ }
	18	+
	19	+ #playground-ctrl {
	20	+ * {
	21	+ vertical-align: middle;
	22	+ }
	23	+ }
	24	+
	25	+ #api-response {
	26	+ color: #000;
	27	+ border: 1px solid rgba(0,0,0,0.3);
	28	+ padding: 10px 15px;
	29	+ box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
	30	+ &.empty {
	31	+ border: none;
	32	+ Xbox-shadow: none;
	33	+ }
	34	+ &.full {
	35	+ background: #E0E8EF;
	36	+ }
	37	+ &.fail {
	38	+ background: #EDD;
	39	+ }
	40	+ }
	41	+
	42	+}
	@@ -16,6 +16,8 @@		@@ -16,6 +16,8 @@
16	*= require search	16	*= require search
17	*/	17	*/
18		18
		19	+@import "api-playground";
		20	+
19	/* browser fixes */	21	/* browser fixes */
20		22
21	img:-moz-broken {	23	img:-moz-broken {