CipherLabs
/
blockscout
mirror of https://github.com/blockscout/blockscout
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

API Doc clean up WIP

Browse Source
pull/559/head
katibest 6 years ago committed by Stamates
parent 2981b11116
commit 18d436604d
3 changed files with 209 additions and 221 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 10
      apps/block_scout_web/assets/css/components/_nav_tabs.scss
  2. 198
      apps/block_scout_web/lib/block_scout_web/templates/api_docs/_action_tile.html.eex
  3. 64
      apps/block_scout_web/lib/block_scout_web/templates/api_docs/_model_table.html.eex

10
apps/block_scout_web/assets/css/components/_nav_tabs.scss
Unescape View File

@ -29,3 +29,13 @@
background-color: darken($primary, 10%); background-color: darken($primary, 10%);
border-color: darken($primary, 10%); border-color: darken($primary, 10%);
} }
.api-doc-tab {
padding-bottom: 5px;
color: $primary !important;
background-color: transparent !important;
}
.api-doc-tab.active {
border-bottom: 1px solid $primary;
}

198
apps/block_scout_web/lib/block_scout_web/templates/api_docs/_action_tile.html.eex
Unescape View File

@ -19,148 +19,143 @@
<button data-selector="<%= "#{@module_name}-#{@action.name}-btn-try-api-cancel" %>" role="button" class="collapse btn btn-sm btn-outline-secondary float-right" style="width: 8rem" data-module="<%= @module_name %>" data-action="<%= @action.name %>">Cancel</button> <button data-selector="<%= "#{@module_name}-#{@action.name}-btn-try-api-cancel" %>" role="button" class="collapse btn btn-sm btn-outline-secondary float-right" style="width: 8rem" data-module="<%= @module_name %>" data-action="<%= @action.name %>">Cancel</button>
</h4> </h4>
<div class="table-responsive"> <div class="mb-4">
<table class="table"> <dl class="row">
<thead> <dt class="col-sm-4 col-md-2 text-muted">Name</dt>
<tr> <dt class="col-sm-8 col-md-10 text-muted">Description</dt>
<th scope="col">Name</th> </dl>
<th scope="col">Description</th> <dl class="row">
</tr> <dd class="col-sm-4 col-md-2">
</thead> <div class="">
<tbody> Module
<tr>
<th scope="row">
module
<span class="text-danger"> <span class="text-danger">
* <small>required</small> * <small>required</small>
</span> </span>
<span class="row col font-weight-light">string</span> </div>
<em class="row col text-muted">(query)</em> <span class="text-muted">string <em>(query)</em></span>
</th> </dd>
<td> <dd class="col-sm-8 col-md-10">
A string with the name of the module to be invoked. A string with the name of the module to be invoked.
<em>Must be set to:</em> <%= @module_name %> <em>Must be set to:</em> <%= @module_name %>
</td> </dd>
</tr> </dl>
<tr> <dl class="row">
<th scope="row"> <dd class="col-sm-4 col-md-2">
action <div class="">
<span class="align-text-bottom text-danger"> Action
<span class="text-danger">
* <small>required</small> * <small>required</small>
</span> </span>
<span class="row col font-weight-light">string</span> </div>
<em class="row col text-muted">(query)</em> <span class="text-muted">string <em>(query)</em></span>
</th> </dd>
<td> <dd class="col-sm-8 col-md-10">
A string with the name of the action to be invoked. A string with the name of the action to be invoked.
<em>Must be set to:</em> <%= @action.name %> <em>Must be set to:</em> <%= @action.name %>
</td> </dd>
</tr> </dl>
<tr> <dl class="row">
<%= for required_param <- @action.required_params do %> <%= for required_param <- @action.required_params do %>
<th scope="row"> <dd class="col-sm-4 col-md-2">
<div class="">
<%= required_param.key %> <%= required_param.key %>
<span class="align-text-bottom text-danger"> <span class="align-text-bottom text-danger">
* <small>required</small> * <small>required</small>
</span> </span>
<span class="row col font-weight-light"><%= required_param.type %></span> </div>
<em class="row col text-muted">(query)</em> <span class="text-muted"><%= required_param.type %> <em>(query)</em></span>
</th> </dd>
<td> <dd class="col-sm-8 col-md-10">
<%= required_param.description %> <%= required_param.description %>
<div class="form-group has-danger"> <div class="form-group has-danger">
<input data-selector="<%= "#{@module_name}-#{@action.name}-try-api-ui" %>" data-required="true" type="text" class="collapse form-control form-control-danger is-invalid" placeholder="<%= input_placeholder(required_param) %>" data-parameter-key="<%= required_param.key %>"> <input data-selector="<%= "#{@module_name}-#{@action.name}-try-api-ui" %>" data-required="true" type="text" class="collapse form-control form-control-danger is-invalid" placeholder="<%= input_placeholder(required_param) %>" data-parameter-key="<%= required_param.key %>">
</div> </div>
</td> </dd>
</tr> </dl>
<% end %> <% end %>
<%= for optional_param <- @action.optional_params do %> <%= for optional_param <- @action.optional_params do %>
<th scope="row"> <dl class="row">
<%= optional_param.key %> <dd class="col-sm-4 col-md-2">
<span class="row col font-weight-light"><%= optional_param.type %></span> <div><%= optional_param.key %></div>
<em class="row col text-muted">(query)</em> <span class="text-muted"><%= optional_param.type %> <em>(query)</em></span>
</th>
<td> </dd>
<dd class="col-sm-8 col-md-10">
<%= optional_param.description %> <%= optional_param.description %>
<input data-selector="<%= "#{@module_name}-#{@action.name}-try-api-ui" %>" type="text" class="collapse form-control" placeholder="<%= input_placeholder(optional_param) %>" data-parameter-key="<%= optional_param.key %>"> <input data-selector="<%= "#{@module_name}-#{@action.name}-try-api-ui" %>" type="text" class="collapse form-control" placeholder="<%= input_placeholder(optional_param) %>" data-parameter-key="<%= optional_param.key %>">
</td> </dd>
</tr> </dl>
<% end %> <% end %>
</tbody> <div class="row">
</table> <div class="col-sm-2 offset-sm-4 col-md-2 offset-md-2">
<div class="btn-group m-1 d-flex" role="group">
<button data-selector="<%= "#{@module_name}-#{@action.name}-try-api-ui" %>" data-try-api-ui-button-type="execute" role="button" class="collapse btn btn-primary w-100" data-module="<%= @module_name %>" data-action="<%= @action.name %>">Execute</button> <button data-selector="<%= "#{@module_name}-#{@action.name}-try-api-ui" %>" data-try-api-ui-button-type="execute" role="button" class="collapse btn btn-primary w-100" data-module="<%= @module_name %>" data-action="<%= @action.name %>">Execute</button>
<button role="button" class="collapse btn btn-outline-secondary w-100" data-selector="<%= "#{@module_name}-#{@action.name}-btn-try-api-clear" %>" data-module="<%= @module_name %>" data-action="<%= @action.name %>">Clear</button> </div>
</div> <!-- /btn-group --> <div class="col-sm-2 col-md-2">
<button role="button" class="collapse btn btn-outline-secondary" data-selector="<%= "#{@module_name}-#{@action.name}-btn-try-api-clear" %>" data-module="<%= @module_name %>" data-action="<%= @action.name %>">Clear</button>
</div>
</div>
<!-- /btn-group -->
</div> <!-- /table-responsive --> </div> <!-- /Descriptor container -->
<h4 class="text-primary mt-4">Responses</h4> <h4 class="text-primary mt-4">Responses</h4>
<div data-selector="<%= "#{@module_name}-#{@action.name}-try-api-ui-result" %>" class="collapse"> <div data-selector="<%= "#{@module_name}-#{@action.name}-try-api-ui-result" %>" class="collapse">
<div class="mb-3">
<h5>Curl</h5> <h5 class="">Curl</h5>
<div class="card card-body bg-dark rounded p-0"> <div class="tile tile-muted p-1">
<pre data-selector="<%= "#{@module_name}-#{@action.name}-curl" %>" class="text-white m-2"></pre> <pre data-selector="<%= "#{@module_name}-#{@action.name}-curl" %>" class="m-2"></pre>
</div>
</div> </div>
<div class="mb-3">
<h5>Request URL</h5> <h5>Request URL</h5>
<div class="card card-body bg-dark rounded p-0"> <div class="tile tile-muted p-1">
<pre data-selector="<%= "#{@module_name}-#{@action.name}-request-url" %>" class="text-white m-2"></pre> <pre data-selector="<%= "#{@module_name}-#{@action.name}-request-url" %>" class="m-2"></pre>
</div> </div>
</div>
<div class="mb-3">
<h5>Server Response</h5> <h5>Server Response</h5>
<div>
<div class="table-responsive"> <dl class="row">
<table class="table"> <dt class="col-sm-4 col-md-2">Code</dt>
<thead> <dt class="col-sm-8 col-md-10">Details</dt>
<tr> </dl>
<th scope="col">Code</th> <dl class="row">
<th scope="col">Details</th> <dd class="col-sm-4 col-md-2" data-selector="<%= "#{@module_name}-#{@action.name}-server-response-code" %>">
</tr> </dd>
</thead> <dd class="col-sm-8 col-md-10">
<tbody>
<tr>
<td data-selector="<%= "#{@module_name}-#{@action.name}-server-response-code" %>">
</td>
<td>
<h5 class="">Response Body</h5> <h5 class="">Response Body</h5>
<div class="card card-body bg-dark rounded p-0 card-server-response-body"> <div class="tile-muted card-server-response-body">
<pre data-selector="<%= "#{@module_name}-#{@action.name}-server-response-body" %>" class="text-white m-2"></pre> <pre data-selector="<%= "#{@module_name}-#{@action.name}-server-response-body" %>" class="m-2"></pre>
</div>
</dd>
</dl>
</div> </div>
</td>
</tr>
</tbody>
</table>
</div> </div>
<h5>Responses</h5> <h5>Responses</h5>
</div> <!-- /*-try-api-ui-result --> </div> <!-- /*-try-api-ui-result -->
<div class="table-responsive"> <div>
<table class="table"> <dl class="row">
<thead> <dt class="col-sm-4 col-md-4">Code</dt>
<tr> <dt class="col-sm-8 col-md-8">Description</dt>
<th scope="col">Code</th> </dl>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<%= for {response, index} <- Enum.with_index(@action.responses) do %> <%= for {response, index} <- Enum.with_index(@action.responses) do %>
<tr> <dl class="row">
<td> <dd class="col-sm-4 col-md-2">
<%= response.code %> <%= response.code %>
</td> </dd>
<td> <dd class="col-sm-8 col-md-10">
<div class="card card-body bg-dark rounded p-0"> <div class="">
<pre class="text-white m-2"><em><%= response.description %></em></pre> <pre class="m-2"><strong><%= response.description %></strong></pre>
</div> </div>
<ul class="nav nav-pills mb-3" role="tablist"> <ul class="nav nav-pills mb-3" role="tablist">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" <a class="nav-link api-doc-tab active"
id="<%= "#{@module_name}-#{@action.name}-example-value-tab" %>" id="<%= "#{@module_name}-#{@action.name}-example-value-tab" %>"
data-toggle="pill" data-toggle="pill"
href="#<%= "#{@module_name}-#{@action.name}-example-value" %>" href="#<%= "#{@module_name}-#{@action.name}-example-value" %>"
@ -173,7 +168,7 @@
<%= if index == 0 do %> <%= if index == 0 do %>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" <a class="nav-link api-doc-tab"
id="<%= "#{@module_name}-#{@action.name}-model-tab" %>" id="<%= "#{@module_name}-#{@action.name}-model-tab" %>"
data-toggle="pill" data-toggle="pill"
href="#<%= "#{@module_name}-#{@action.name}-model" %>" href="#<%= "#{@module_name}-#{@action.name}-model" %>"
@ -190,8 +185,8 @@
id="<%= "#{@module_name}-#{@action.name}-example-value" %>" id="<%= "#{@module_name}-#{@action.name}-example-value" %>"
role="tabpanel" role="tabpanel"
aria-labelledby="<%= "#{@module_name}-#{@action.name}-example-value-tab" %>"> aria-labelledby="<%= "#{@module_name}-#{@action.name}-example-value-tab" %>">
<div class="card card-body bg-dark rounded p-0"> <div class="tile-muted">
<pre class="text-white m-2" data-json='<%= response.example_value %>'></pre> <pre class="m-2" data-json='<%= response.example_value %>'></pre>
</div> </div>
</div> <!-- /tab-pane --> </div> <!-- /tab-pane -->
@ -203,14 +198,11 @@
<%= render "_model_table.html", model: response.model %> <%= render "_model_table.html", model: response.model %>
</div> <!-- /tab-pane --> </div> <!-- /tab-pane -->
<% end %> <% end %>
</div> <!-- /tab-content --> </div> <!-- /tab-content -->
</dd>
</td> </dl>
</tr>
<% end %> <% end %>
</tbody>
</table>
</div> </div>
</div> </div>

64
apps/block_scout_web/lib/block_scout_web/templates/api_docs/_model_table.html.eex
Unescape View File

@ -1,16 +1,12 @@
<div class="card card-body bg-light rounded p-0"> <div class="tile-muted p-3">
<div class="m-2">
<h3><strong><%= @model.name %></strong> {</h3> <h3><strong><%= @model.name %></strong> {</h3>
<div class="table-responsive">
<table class="table table-borderless table-sm bg-light">
<tbody>
<%= for {key, details} <- @model.fields do %> <%= for {key, details} <- @model.fields do %>
<tr> <dl class="row">
<th scope="row"> <dt class="col-md-2">
<%= key %> <%= key %>
</th> </dt>
<td> <dd class="col-md-10">
<span class="row text-primary"> <span>
<%= details.type %> <%= details.type %>
<%= if details[:definition] do %> <%= if details[:definition] do %>
<i class="fas fa-info-circle ml-2" <i class="fas fa-info-circle ml-2"
@ -21,50 +17,40 @@
<% end %> <% end %>
</span> </span>
<%= if details[:type] == "array" do %> <%= if details[:type] == "array" do %>
<span class="row"> <span>
[<strong><%= details.array_type.name %></strong>] [<strong><%= details.array_type.name %></strong>]
</span> </span>
<% end %> <% end %>
<%= if details[:enum] do %> <%= if details[:enum] do %>
<span class="row">enum: <%= details.enum %></span> <span>enum: <%= details.enum %></span>
<dl class="row">
<table class="table table-bordered bg-light"> <dt class="col-md-2"> <strong>enum</strong></th>
<thead> <dt class="col-md-10"><strong>interpretation</strong></th>
<tr> </dl>
<th scope="col">enum</th>
<th scope="col">interpretation</th>
</tr>
</thead>
<tbody>
<%= for {enum, interpretation} <- details[:enum_interpretation] do %> <%= for {enum, interpretation} <- details[:enum_interpretation] do %>
<tr> <dl class="row">
<td scope="row"> <dd class="col-md-2">
"<%= enum %>" "<%= enum %>"
</td> </dd>
<td> <dd class="col-md-10">
<%= interpretation %> <%= interpretation %>
</td> </dd>
</tr> </dl>
<% end %> <% end %>
</tbody>
</table>
<% end %> <% end %>
<%= if details[:example] do %> <%= if details[:example] do %>
<span class="row">example: <%= details.example %></span> <span>example: <%= details.example %></span>
<% end %> <% end %>
<%= if details[:description] do %> <%= if details[:description] do %>
<span class="row">description: <%= details.description %></span> <span>description: <%= details.description %></span>
<% end %> <% end %>
</td> </dd>
<td></td>
</tr> </dl>
<% end %> <% end %>
</tbody>
</table>
</div> <!-- /table-responsive -->
<h3>}</h3> <h3>}</h3>
</div> </div> <!-- /table-responsive -->
</div>
<%= if @model.fields[:result][:type] == "array" do %> <%= if @model.fields[:result][:type] == "array" do %>
<%= render "_model_table.html", model: @model.fields[:result].array_type %> <%= render "_model_table.html", model: @model.fields[:result].array_type %>

Write Preview
Loading…
Cancel
Save