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. 306
      apps/block_scout_web/lib/block_scout_web/templates/api_docs/_action_tile.html.eex
  3. 114
      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;
}

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

@ -19,198 +19,190 @@
<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> <span class="text-danger">
<th scope="row"> * <small>required</small>
module </span>
<span class="text-danger"> </div>
* <small>required</small> <span class="text-muted">string <em>(query)</em></span>
</span> </dd>
<span class="row col font-weight-light">string</span> <dd class="col-sm-8 col-md-10">
<em class="row col text-muted">(query)</em>
</th>
<td>
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
* <small>required</small> <span class="text-danger">
</span> * <small>required</small>
<span class="row col font-weight-light">string</span> </span>
<em class="row col text-muted">(query)</em> </div>
</th> <span class="text-muted">string <em>(query)</em></span>
<td> </dd>
<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">
<%= required_param.key %> <div class="">
<span class="align-text-bottom text-danger"> <%= required_param.key %>
* <small>required</small> <span class="align-text-bottom text-danger">
</span> * <small>required</small>
<span class="row col font-weight-light"><%= required_param.type %></span> </span>
<em class="row col text-muted">(query)</em> </div>
</th> <span class="text-muted"><%= required_param.type %> <em>(query)</em></span>
<td> </dd>
<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">
<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>
<div class="btn-group m-1 d-flex" role="group"> </div>
<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> <div class="col-sm-2 col-md-2">
<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> <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> <!-- /btn-group --> </div>
</div>
</div> <!-- /table-responsive --> <!-- /btn-group -->
</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>
<h5>Request URL</h5> <div class="mb-3">
<div class="card card-body bg-dark rounded p-0"> <h5>Request URL</h5>
<pre data-selector="<%= "#{@module_name}-#{@action.name}-request-url" %>" class="text-white m-2"></pre> <div class="tile tile-muted p-1">
<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> <h5 class="">Response Body</h5>
<tr> <div class="tile-muted card-server-response-body">
<td data-selector="<%= "#{@module_name}-#{@action.name}-server-response-code" %>"> <pre data-selector="<%= "#{@module_name}-#{@action.name}-server-response-body" %>" class="m-2"></pre>
</td> </div>
<td> </dd>
<h5 class="">Response Body</h5> </dl>
<div class="card card-body bg-dark rounded p-0 card-server-response-body"> </div>
<pre data-selector="<%= "#{@module_name}-#{@action.name}-server-response-body" %>" class="text-white m-2"></pre>
</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> <%= for {response, index} <- Enum.with_index(@action.responses) do %>
</tr> <dl class="row">
</thead> <dd class="col-sm-4 col-md-2">
<tbody> <%= response.code %>
<%= for {response, index} <- Enum.with_index(@action.responses) do %> </dd>
<tr> <dd class="col-sm-8 col-md-10">
<td> <div class="">
<%= response.code %> <pre class="m-2"><strong><%= response.description %></strong></pre>
</td> </div>
<td>
<div class="card card-body bg-dark rounded p-0"> <ul class="nav nav-pills mb-3" role="tablist">
<pre class="text-white m-2"><em><%= response.description %></em></pre> <li class="nav-item">
</div> <a class="nav-link api-doc-tab active"
id="<%= "#{@module_name}-#{@action.name}-example-value-tab" %>"
<ul class="nav nav-pills mb-3" role="tablist"> data-toggle="pill"
href="#<%= "#{@module_name}-#{@action.name}-example-value" %>"
role="tab"
aria-controls="<%= "#{@module_name}-#{@action.name}-example-value" %>"
aria-selected="true">
Example Value
</a>
</li>
<%= if index == 0 do %>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" <a class="nav-link api-doc-tab"
id="<%= "#{@module_name}-#{@action.name}-example-value-tab" %>" id="<%= "#{@module_name}-#{@action.name}-model-tab" %>"
data-toggle="pill" data-toggle="pill"
href="#<%= "#{@module_name}-#{@action.name}-example-value" %>" href="#<%= "#{@module_name}-#{@action.name}-model" %>"
role="tab" role="tab"
aria-controls="<%= "#{@module_name}-#{@action.name}-example-value" %>" aria-controls="<%= "#{@module_name}-#{@action.name}-model" %>"
aria-selected="true"> aria-selected="false">
Example Value Model
</a> </a>
</li> </li>
<% end %>
<%= if index == 0 do %> </ul>
<li class="nav-item"> <div class="tab-content">
<a class="nav-link" <div class="tab-pane fade show active"
id="<%= "#{@module_name}-#{@action.name}-model-tab" %>" id="<%= "#{@module_name}-#{@action.name}-example-value" %>"
data-toggle="pill" role="tabpanel"
href="#<%= "#{@module_name}-#{@action.name}-model" %>" aria-labelledby="<%= "#{@module_name}-#{@action.name}-example-value-tab" %>">
role="tab" <div class="tile-muted">
aria-controls="<%= "#{@module_name}-#{@action.name}-model" %>" <pre class="m-2" data-json='<%= response.example_value %>'></pre>
aria-selected="false"> </div>
Model </div> <!-- /tab-pane -->
</a>
</li> <%= if index == 0 do %>
<% end %> <div class="tab-pane fade"
</ul> id="<%= "#{@module_name}-#{@action.name}-model" %>"
<div class="tab-content">
<div class="tab-pane fade show active"
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}-model-tab" %>">
<div class="card card-body bg-dark rounded p-0"> <%= render "_model_table.html", model: response.model %>
<pre class="text-white m-2" data-json='<%= response.example_value %>'></pre>
</div>
</div> <!-- /tab-pane --> </div> <!-- /tab-pane -->
<% end %>
</div> <!-- /tab-content -->
</dd>
</dl>
<% end %>
<%= if index == 0 do %>
<div class="tab-pane fade"
id="<%= "#{@module_name}-#{@action.name}-model" %>"
role="tabpanel"
aria-labelledby="<%= "#{@module_name}-#{@action.name}-model-tab" %>">
<%= render "_model_table.html", model: response.model %>
</div> <!-- /tab-pane -->
<% end %>
</div> <!-- /tab-content -->
</td>
</tr>
<% end %>
</tbody>
</table>
</div> </div>
</div> </div>

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

@ -1,70 +1,56 @@
<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"> <%= for {key, details} <- @model.fields do %>
<table class="table table-borderless table-sm bg-light"> <dl class="row">
<tbody> <dt class="col-md-2">
<%= for {key, details} <- @model.fields do %> <%= key %>
<tr> </dt>
<th scope="row"> <dd class="col-md-10">
<%= key %> <span>
</th> <%= details.type %>
<td> <%= if details[:definition] do %>
<span class="row text-primary"> <i class="fas fa-info-circle ml-2"
<%= details.type %> data-toggle="tooltip"
<%= if details[:definition] do %> data-placement="right"
<i class="fas fa-info-circle ml-2" data-html="true"
data-toggle="tooltip" title="<%= model_type_definition(details.definition) %>"></i>
data-placement="right" <% end %>
data-html="true" </span>
title="<%= model_type_definition(details.definition) %>"></i> <%= if details[:type] == "array" do %>
<% end %> <span>
</span> [<strong><%= details.array_type.name %></strong>]
<%= if details[:type] == "array" do %> </span>
<span class="row"> <% end %>
[<strong><%= details.array_type.name %></strong>] <%= if details[:enum] do %>
</span> <span>enum: <%= details.enum %></span>
<% end %> <dl class="row">
<%= if details[:enum] do %> <dt class="col-md-2"> <strong>enum</strong></th>
<span class="row">enum: <%= details.enum %></span> <dt class="col-md-10"><strong>interpretation</strong></th>
</dl>
<%= for {enum, interpretation} <- details[:enum_interpretation] do %>
<dl class="row">
<dd class="col-md-2">
"<%= enum %>"
</dd>
<dd class="col-md-10">
<%= interpretation %>
</dd>
</dl>
<% end %>
<table class="table table-bordered bg-light"> <% end %>
<thead> <%= if details[:example] do %>
<tr> <span>example: <%= details.example %></span>
<th scope="col">enum</th> <% end %>
<th scope="col">interpretation</th> <%= if details[:description] do %>
</tr> <span>description: <%= details.description %></span>
</thead> <% end %>
<tbody> </dd>
<%= for {enum, interpretation} <- details[:enum_interpretation] do %>
<tr> </dl>
<td scope="row"> <% end %>
"<%= enum %>" <h3>}</h3>
</td>
<td>
<%= interpretation %>
</td>
</tr>
<% end %>
</tbody>
</table>
<% end %>
<%= if details[:example] do %>
<span class="row">example: <%= details.example %></span>
<% end %>
<%= if details[:description] do %>
<span class="row">description: <%= details.description %></span>
<% end %>
</td>
<td></td>
</tr>
<% end %>
</tbody>
</table>
</div> <!-- /table-responsive --> </div> <!-- /table-responsive -->
<h3>}</h3>
</div>
</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