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%);
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>
</h4>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
module
<span class="text-danger">
* <small>required</small>
</span>
<span class="row col font-weight-light">string</span>
<em class="row col text-muted">(query)</em>
</th>
<td>
<div class="mb-4">
<dl class="row">
<dt class="col-sm-4 col-md-2 text-muted">Name</dt>
<dt class="col-sm-8 col-md-10 text-muted">Description</dt>
</dl>
<dl class="row">
<dd class="col-sm-4 col-md-2">
<div class="">
Module
<span class="text-danger">
* <small>required</small>
</span>
</div>
<span class="text-muted">string <em>(query)</em></span>
</dd>
<dd class="col-sm-8 col-md-10">
A string with the name of the module to be invoked.
<em>Must be set to:</em> <%= @module_name %>
</td>
</tr>
<tr>
<th scope="row">
action
<span class="align-text-bottom text-danger">
* <small>required</small>
</span>
<span class="row col font-weight-light">string</span>
<em class="row col text-muted">(query)</em>
</th>
<td>
</dd>
</dl>
<dl class="row">
<dd class="col-sm-4 col-md-2">
<div class="">
Action
<span class="text-danger">
* <small>required</small>
</span>
</div>
<span class="text-muted">string <em>(query)</em></span>
</dd>
<dd class="col-sm-8 col-md-10">
A string with the name of the action to be invoked.
<em>Must be set to:</em> <%= @action.name %>
</td>
</tr>
<tr>
</dd>
</dl>
<dl class="row">
<%= for required_param <- @action.required_params do %>
<th scope="row">
<%= required_param.key %>
<span class="align-text-bottom text-danger">
* <small>required</small>
</span>
<span class="row col font-weight-light"><%= required_param.type %></span>
<em class="row col text-muted">(query)</em>
</th>
<td>
<dd class="col-sm-4 col-md-2">
<div class="">
<%= required_param.key %>
<span class="align-text-bottom text-danger">
* <small>required</small>
</span>
</div>
<span class="text-muted"><%= required_param.type %> <em>(query)</em></span>
</dd>
<dd class="col-sm-8 col-md-10">
<%= required_param.description %>
<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 %>">
</div>
</td>
</tr>
</dd>
</dl>
<% end %>
<%= for optional_param <- @action.optional_params do %>
<th scope="row">
<%= optional_param.key %>
<span class="row col font-weight-light"><%= optional_param.type %></span>
<em class="row col text-muted">(query)</em>
</th>
<td>
<dl class="row">
<dd class="col-sm-4 col-md-2">
<div><%= optional_param.key %></div>
<span class="text-muted"><%= optional_param.type %> <em>(query)</em></span>
</dd>
<dd class="col-sm-8 col-md-10">
<%= 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 %>">
</td>
</tr>
</dd>
</dl>
<% end %>
</tbody>
</table>
<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 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> <!-- /btn-group -->
</div> <!-- /table-responsive -->
<div class="row">
<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>
<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> <!-- /Descriptor container -->
<h4 class="text-primary mt-4">Responses</h4>
<div data-selector="<%= "#{@module_name}-#{@action.name}-try-api-ui-result" %>" class="collapse">
<h5>Curl</h5>
<div class="card card-body bg-dark rounded p-0">
<pre data-selector="<%= "#{@module_name}-#{@action.name}-curl" %>" class="text-white m-2"></pre>
<div class="mb-3">
<h5 class="">Curl</h5>
<div class="tile tile-muted p-1">
<pre data-selector="<%= "#{@module_name}-#{@action.name}-curl" %>" class="m-2"></pre>
</div>
</div>
<h5>Request URL</h5>
<div class="card card-body bg-dark rounded p-0">
<pre data-selector="<%= "#{@module_name}-#{@action.name}-request-url" %>" class="text-white m-2"></pre>
<div class="mb-3">
<h5>Request URL</h5>
<div class="tile tile-muted p-1">
<pre data-selector="<%= "#{@module_name}-#{@action.name}-request-url" %>" class="m-2"></pre>
</div>
</div>
<h5>Server Response</h5>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">Code</th>
<th scope="col">Details</th>
</tr>
</thead>
<tbody>
<tr>
<td data-selector="<%= "#{@module_name}-#{@action.name}-server-response-code" %>">
</td>
<td>
<h5 class="">Response Body</h5>
<div class="card card-body bg-dark rounded p-0 card-server-response-body">
<pre data-selector="<%= "#{@module_name}-#{@action.name}-server-response-body" %>" class="text-white m-2"></pre>
</div>
</td>
</tr>
</tbody>
</table>
<div class="mb-3">
<h5>Server Response</h5>
<div>
<dl class="row">
<dt class="col-sm-4 col-md-2">Code</dt>
<dt class="col-sm-8 col-md-10">Details</dt>
</dl>
<dl class="row">
<dd class="col-sm-4 col-md-2" data-selector="<%= "#{@module_name}-#{@action.name}-server-response-code" %>">
</dd>
<dd class="col-sm-8 col-md-10">
<h5 class="">Response Body</h5>
<div class="tile-muted card-server-response-body">
<pre data-selector="<%= "#{@module_name}-#{@action.name}-server-response-body" %>" class="m-2"></pre>
</div>
</dd>
</dl>
</div>
</div>
<h5>Responses</h5>
</div> <!-- /*-try-api-ui-result -->
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">Code</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<%= for {response, index} <- Enum.with_index(@action.responses) do %>
<tr>
<td>
<%= response.code %>
</td>
<td>
<div class="card card-body bg-dark rounded p-0">
<pre class="text-white m-2"><em><%= response.description %></em></pre>
</div>
<ul class="nav nav-pills mb-3" role="tablist">
<div>
<dl class="row">
<dt class="col-sm-4 col-md-4">Code</dt>
<dt class="col-sm-8 col-md-8">Description</dt>
</dl>
<%= for {response, index} <- Enum.with_index(@action.responses) do %>
<dl class="row">
<dd class="col-sm-4 col-md-2">
<%= response.code %>
</dd>
<dd class="col-sm-8 col-md-10">
<div class="">
<pre class="m-2"><strong><%= response.description %></strong></pre>
</div>
<ul class="nav nav-pills mb-3" role="tablist">
<li class="nav-item">
<a class="nav-link api-doc-tab active"
id="<%= "#{@module_name}-#{@action.name}-example-value-tab" %>"
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">
<a class="nav-link active"
id="<%= "#{@module_name}-#{@action.name}-example-value-tab" %>"
<a class="nav-link api-doc-tab"
id="<%= "#{@module_name}-#{@action.name}-model-tab" %>"
data-toggle="pill"
href="#<%= "#{@module_name}-#{@action.name}-example-value" %>"
href="#<%= "#{@module_name}-#{@action.name}-model" %>"
role="tab"
aria-controls="<%= "#{@module_name}-#{@action.name}-example-value" %>"
aria-selected="true">
Example Value
aria-controls="<%= "#{@module_name}-#{@action.name}-model" %>"
aria-selected="false">
Model
</a>
</li>
<%= if index == 0 do %>
<li class="nav-item">
<a class="nav-link"
id="<%= "#{@module_name}-#{@action.name}-model-tab" %>"
data-toggle="pill"
href="#<%= "#{@module_name}-#{@action.name}-model" %>"
role="tab"
aria-controls="<%= "#{@module_name}-#{@action.name}-model" %>"
aria-selected="false">
Model
</a>
</li>
<% end %>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active"
id="<%= "#{@module_name}-#{@action.name}-example-value" %>"
<% end %>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active"
id="<%= "#{@module_name}-#{@action.name}-example-value" %>"
role="tabpanel"
aria-labelledby="<%= "#{@module_name}-#{@action.name}-example-value-tab" %>">
<div class="tile-muted">
<pre class="m-2" data-json='<%= response.example_value %>'></pre>
</div>
</div> <!-- /tab-pane -->
<%= if index == 0 do %>
<div class="tab-pane fade"
id="<%= "#{@module_name}-#{@action.name}-model" %>"
role="tabpanel"
aria-labelledby="<%= "#{@module_name}-#{@action.name}-example-value-tab" %>">
<div class="card card-body bg-dark rounded p-0">
<pre class="text-white m-2" data-json='<%= response.example_value %>'></pre>
</div>
aria-labelledby="<%= "#{@module_name}-#{@action.name}-model-tab" %>">
<%= render "_model_table.html", model: response.model %>
</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>

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

Write Preview
Loading…
Cancel
Save