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

(add) api docs styles and behaviour

Browse Source
pull/1844/head
Gabriel Rodriguez Alsina 6 years ago
parent 36cd8a181d
commit 5cd0c1884c
5 changed files with 298 additions and 182 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. 74
      apps/block_scout_web/assets/css/components/_api.scss
  2. 17
      apps/block_scout_web/assets/css/components/_badge.scss
  3. 2
      apps/block_scout_web/assets/css/components/_card.scss
  4. 379
      apps/block_scout_web/lib/block_scout_web/templates/api_docs/_action_tile.html.eex
  5. 8
      apps/block_scout_web/lib/block_scout_web/templates/api_docs/_module_card.html.eex

74
apps/block_scout_web/assets/css/components/_api.scss
Unescape View File

@ -1,6 +1,8 @@
$api-text-monospace-color: $primary !default; $api-text-monospace-color: $primary !default;
$api-text-monospace-background: rgba($api-text-monospace-color, 0.1) !default; $api-text-monospace-background: rgba($api-text-monospace-color, 0.1) !default;
$api-anchors-list-background-color: #f6f7f9 !default; $api-anchors-list-background-color: #f6f7f9 !default;
$api-doc-list-item-title-color: $primary !default;
$api-doc-list-item-view-more-color: $api-doc-list-item-title-color !default;
.api-text-monospace { .api-text-monospace {
color: $api-text-monospace-color; color: $api-text-monospace-color;
@ -55,4 +57,76 @@ $api-anchors-list-background-color: #f6f7f9 !default;
font-size: 12px; font-size: 12px;
line-height: 1.2; line-height: 1.2;
margin-left: 20px; margin-left: 20px;
}
.api-doc-list-item {
border-bottom: 1px solid $base-border-color;
padding: $card-vertical-padding $card-horizontal-padding;
&:last-child {
border-bottom: none;
}
}
.api-doc-list-item-contents {
display: flex;
justify-content: space-between;
}
.api-doc-list-item-title {
color: $api-doc-list-item-title-color;
font-size: 17px;
font-weight: 700;
line-height: 1.2;
margin: 0 0 15px;
}
.api-doc-list-item-query {
display: inline-block;
font-size: 12px;
line-height: 1.2;
margin-bottom: 20px;
> strong {
font-weight: 700;
}
}
.api-doc-list-item-text {
color: #aaa;
font-size: 14px;
font-weight: normal;
line-height: 1.5;
margin: 0;
}
.api-doc-list-item-controls {
display: flex;
flex-direction: column;
flex-grow: 1;
margin-left: 50px;
}
.api-doc-list-item-controls-badges {
display: flex;
justify-content: flex-end;
.api-badge {
margin-right: 8px;
&:last-child {
margin-right: 0;
}
}
}
.api-doc-list-item-controls-view-more {
align-self: flex-end;
color: $api-doc-list-item-view-more-color;
cursor: pointer;
font-size: 14px;
margin-top: auto;
.fa {
margin-left: 5px;
}
} }

17
apps/block_scout_web/assets/css/components/_badge.scss
Unescape View File

@ -2,6 +2,8 @@ $badge-success-color: #15bba6 !default;
$badge-success-background-color: rgba($badge-success-color, 0.1) !default; $badge-success-background-color: rgba($badge-success-color, 0.1) !default;
$badge-danger-color: #ed9966 !default; $badge-danger-color: #ed9966 !default;
$badge-danger-background-color: rgba($badge-danger-color, 0.1) !default; $badge-danger-background-color: rgba($badge-danger-color, 0.1) !default;
$badge-neutral-color: #333 !default;
$badge-neutral-background-color: #e9e9e9 !default;
.badge { .badge {
color: $white; color: $white;
@ -16,6 +18,16 @@ $badge-danger-background-color: rgba($badge-danger-color, 0.1) !default;
width: auto; width: auto;
} }
&.api-badge {
font-size: 12px;
font-weight: 700;
height: 24px;
line-height: 26px;
margin: 0;
padding: 0 8px;
width: auto;
}
&.badge-success { &.badge-success {
background-color: $badge-success-background-color; background-color: $badge-success-background-color;
color: $badge-success-color; color: $badge-success-color;
@ -25,4 +37,9 @@ $badge-danger-background-color: rgba($badge-danger-color, 0.1) !default;
background-color: $badge-danger-background-color; background-color: $badge-danger-background-color;
color: $badge-danger-color; color: $badge-danger-color;
} }
&.badge-neutral {
background-color: $badge-neutral-background-color;
color: $badge-neutral-color;
}
} }

2
apps/block_scout_web/assets/css/components/_card.scss
Unescape View File

@ -21,7 +21,9 @@ $card-background-1-text-color: #fff !default;
.card-header { .card-header {
background: transparent; background: transparent;
border-bottom: 1px solid $base-border-color;
padding: $card-vertical-padding $card-horizontal-padding; padding: $card-vertical-padding $card-horizontal-padding;
&-tabs { &-tabs {
margin: (-$card-spacer-y) (-$card-spacer-x); margin: (-$card-spacer-y) (-$card-spacer-x);
} }

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

@ -1,209 +1,234 @@
<div
class="api-doc-list-item"
<div> >
<button class="nounderline tile tile-type-api-documentation" data-toggle="collapse" href="#<%= action_tile_id(@module_name, @action.name) %>" role="button" aria-expanded="false" aria-controls="<%= action_tile_id(@module_name, @action.name) %>"> <div
<h3> aria-controls="<%= action_tile_id(@module_name, @action.name) %>"
<span class="badge badge-primary tile-badge float-right"><%= gettext "POST" %></span> aria-expanded="false"
<span class="badge badge-dark tile-badge float-right mr-1"><%= gettext "GET" %></span> class="api-doc-list-item-contents"
<strong class="tile-label"><%= @action.name %></strong> data-toggle="collapse"
</h3> href="#<%= action_tile_id(@module_name, @action.name) %>"
<h4 class="text-dark"><span data-selector="stop-propagation"><%= raw @action.description %></span></h4> >
<code><%= raw query_params(@module_name, @action) %></code> <div data-selector="stop-propagation" class="api-doc-list-item-description">
</button> <h3 class="api-doc-list-item-title"><%= raw @action.description %></h3>
<p class="api-doc-list-item-query api-text-monospace api-text-monospace-background"><%= raw query_params(@module_name, @action) %></p>
<p class="api-doc-list-item-text"><%= @action.name %></p>
</div>
<div class="api-doc-list-item-controls">
<div class="api-doc-list-item-controls-badges">
<span class="badge badge-success api-badge"><%= gettext "GET" %></span>
<span class="badge badge-neutral api-badge"><%= gettext "POST" %></span>
</div>
<span class="api-doc-list-item-controls-view-more">More Details <span class="fa fa-chevron-down"></span></span>
</div>
</div> </div>
<div
class="collapse multi-collapse"
<div class="row mb-3"> id="<%= action_tile_id(@module_name, @action.name) %>"
<div class="col"> >
<div class="collapse multi-collapse" id="<%= action_tile_id(@module_name, @action.name) %>"> <div class="pt-3">
<div class="pt-3"> <h4 class="text-primary my-4"><%= gettext "Parameters" %> <button
data-selector="<%= "#{@module_name}-#{@action.name}-btn-try-api" %>"
role="button"
<h4 class="text-primary my-4"><%= gettext "Parameters" %> class="button button-xs button-primary float-right"
<button data-selector="<%= "#{@module_name}-#{@action.name}-btn-try-api" %>" role="button" class="button button-xs button-primary float-right" style="width: 8rem" data-module="<%= @module_name %>" data-action="<%= @action.name %>"><%= gettext "Try it out" %></button> style="width: 8rem"
<button data-selector="<%= "#{@module_name}-#{@action.name}-btn-try-api-cancel" %>" role="button" class="collapse button button-xs button-secondary float-right" style="width: 8rem" data-module="<%= @module_name %>" data-action="<%= @action.name %>"><%= gettext "Cancel" %></button> data-module="<%= @module_name %>"
</h4> data-action="<%= @action.name %>"
><%= gettext "Try it out" %></button>
<div class="mb-4"> <button
<dl class="row"> data-selector="<%= "#{@module_name}-#{@action.name}-btn-try-api-cancel" %>"
<dt class="col-2 text-muted d-none d-md-block"><%= gettext "Name" %></dt> role="button"
<dt class="col-10 text-muted d-none d-md-block"><%= gettext "Description" %></dt> class="collapse button button-xs button-secondary float-right"
</dl> style="width: 8rem"
<dl class="row"> data-module="<%= @module_name %>"
<dd class="col-sm-4 col-md-2"> data-action="<%= @action.name %>"
<div class=""> ><%= gettext "Cancel" %></button>
<%= gettext "Module" %> </h4>
<span class="text-danger"> <div class="mb-4">
* <small><%= gettext "required" %></small> <dl class="row">
</span> <dt class="col-2 text-muted d-none d-md-block"><%= gettext "Name" %></dt>
</div> <dt class="col-10 text-muted d-none d-md-block"><%= gettext "Description" %></dt>
<span class="text-muted"><%= gettext "string" %> <em><%= gettext "(query)" %></em></span> </dl>
</dd> <dl class="row">
<dd class="col-sm-8 col-md-10"> <dd class="col-sm-4 col-md-2">
<%= gettext "A string with the name of the module to be invoked." %> <div class=""> <%= gettext "Module" %> <span class="text-danger"> *
<em><%= gettext "Must be set to:" %></em> <%= @module_name %> <small><%= gettext "required" %></small>
</dd> </span>
</dl> </div>
<dl class="row"> <span class="text-muted"><%= gettext "string" %> <em><%= gettext "(query)" %></em></span>
<dd class="col-sm-4 col-md-2"> </dd>
<div class=""> <dd class="col-sm-8 col-md-10"> <%= gettext "A string with the name of the module to be invoked." %>
<%= gettext "Action" %> <em><%= gettext "Must be set to:" %></em> <%= @module_name %> </dd>
<span class="text-danger"> </dl>
* <small><%= gettext "required" %></small>
</span>
</div>
<span class="text-muted"><%= gettext "string" %><em><%= gettext "(query)" %></em></span>
</dd>
<dd class="col-sm-8 col-md-10">
<%= gettext "A string with the name of the action to be invoked." %>
<em><%= gettext "Must be set to:" %></em> <%= @action.name %>
</dd>
</dl>
<%= for required_param <- @action.required_params do %>
<dl class="row">
<dd class="col-sm-4 col-md-2">
<%= required_param.key %>
<span class="align-text-bottom text-danger">
* <small><%= gettext "required" %></small>
</span>
<div class="text-muted"><%= required_param.type %> <em><%= gettext "(query)" %></em></div>
</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>
</dd>
</dl>
<% end %>
<%= for optional_param <- @action.optional_params do %>
<dl class="row"> <dl class="row">
<dd class="col-sm-4 col-md-2">
<div class=""> <%= gettext "Action" %> <span class="text-danger"> *
<small><%= gettext "required" %></small>
</span>
</div>
<span class="text-muted"><%= gettext "string" %><em><%= gettext "(query)" %></em></span>
</dd>
<dd class="col-sm-8 col-md-10"> <%= gettext "A string with the name of the action to be invoked." %>
<em><%= gettext "Must be set to:" %></em> <%= @action.name %> </dd>
</dl> <%= for required_param <- @action.required_params do %> <dl class="row">
<dd class="col-sm-4 col-md-2"> <%= required_param.key %> <span class="align-text-bottom text-danger"> *
<small><%= gettext "required" %></small>
</span>
<div class="text-muted"><%= required_param.type %> <em><%= gettext "(query)" %></em></div>
</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>
</dd>
</dl> <% end %> <%= for optional_param <- @action.optional_params do %> <dl class="row">
<dd class="col-sm-4 col-md-2"> <dd class="col-sm-4 col-md-2">
<div><%= optional_param.key %></div> <div><%= optional_param.key %></div>
<span class="text-muted"><%= optional_param.type %> <em><%= gettext "(query)" %></em></span> <span class="text-muted"><%= optional_param.type %> <em><%= gettext "(query)" %></em></span>
</dd> </dd>
<dd class="col-sm-8 col-md-10"> <dd class="col-sm-8 col-md-10"> <%= optional_param.description %> <input
<%= optional_param.description %> data-selector="<%= "#{@module_name}-#{@action.name}-try-api-ui" %>"
<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 %>"> type="text"
class="collapse form-control"
placeholder="<%= input_placeholder(optional_param) %>"
data-parameter-key="<%= optional_param.key %>"
>
</dd> </dd>
</dl> </dl> <% end %> <div class="row">
<% end %>
<div class="row">
<div class="col-sm-2 offset-sm-4 col-md-2 offset-md-2"> <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 button button-primary w-100" data-module="<%= @module_name %>" data-action="<%= @action.name %>"><%= gettext "Execute" %></button> <button
data-selector="<%= "#{@module_name}-#{@action.name}-try-api-ui" %>"
data-try-api-ui-button-type="execute"
role="button"
class="collapse button button-primary w-100"
data-module="<%= @module_name %>"
data-action="<%= @action.name %>"
><%= gettext "Execute" %></button>
</div> </div>
<div class="col-sm-2 col-md-2 mt-2 mt-md-0"> <div class="col-sm-2 col-md-2 mt-2 mt-md-0">
<button role="button" class="collapse button button-secondary w-100" data-selector="<%= "#{@module_name}-#{@action.name}-btn-try-api-clear" %>" data-module="<%= @module_name %>" data-action="<%= @action.name %>"><%= gettext "Clear" %></button> <button
role="button"
class="collapse button button-secondary w-100"
data-selector="<%= "#{@module_name}-#{@action.name}-btn-try-api-clear" %>"
data-module="<%= @module_name %>"
data-action="<%= @action.name %>"
><%= gettext "Clear" %></button>
</div> </div>
</div> </div>
<!-- /btn-group --> <!-- /btn-group -->
<div
<div class="tile text-dark mt-5 collapse" data-selector="<%= "#{@module_name}-#{@action.name}-try-api-ui-result" %>"> class="tile text-dark mt-5 collapse"
data-selector="<%= "#{@module_name}-#{@action.name}-try-api-ui-result" %>"
>
<div class="mb-3"> <div class="mb-3">
<h5 class=""><%= gettext "Curl" %></h5> <h5 class=""><%= gettext "Curl" %></h5>
<div class="tile tile-muted p-1"> <div class="tile tile-muted p-1">
<pre data-selector="<%= "#{@module_name}-#{@action.name}-curl" %>" class="m-2"></pre> <pre
data-selector="<%= "#{@module_name}-#{@action.name}-curl" %>"
class="m-2"
></pre>
</div> </div>
</div> </div>
<div class="mb-4"> <div class="mb-4">
<h5><%= gettext "Request URL" %></h5> <h5><%= gettext "Request URL" %></h5>
<div class="tile tile-muted p-1"> <div class="tile tile-muted p-1">
<pre data-selector="<%= "#{@module_name}-#{@action.name}-request-url" %>" class="m-2"></pre> <pre
data-selector="<%= "#{@module_name}-#{@action.name}-request-url" %>"
class="m-2"
></pre>
</div> </div>
</div> </div>
<div> <div>
<h5><%= gettext "Server Response" %></h5> <h5><%= gettext "Server Response" %></h5>
<dl class="row">
<dt class="col-2 pr-0 pr-md-2 text-muted"><%= gettext "Code" %></dt>
<dt class="col-10 text-muted"><%= gettext "Details" %></dt>
</dl>
<dl class="row">
<dd class="col-2 pr-0 pr-md-2 col-md-2" data-selector="<%= "#{@module_name}-#{@action.name}-server-response-code" %>">
</dd>
<dd class="col-10 col-md-10">
<%= gettext "Response Body" %>
<div class="tile tile-muted p-1 card-server-response-body">
<pre data-selector="<%= "#{@module_name}-#{@action.name}-server-response-body" %>" class="m-2"></pre>
</div>
</dd>
</dl>
</div>
</div> <!-- /*-try-api-ui-result -->
<hr/>
</div> <!-- /Descriptor container -->
<h4 class="text-primary my-4"><%= gettext "Responses" %></h4>
<div>
<dl class="row">
<dt class="col-2 pr-0 pr-md-2 text-muted"><%= gettext "Code" %></dt>
<dt class="col-10 text-muted"><%= gettext "Description" %></dt>
</dl>
<%= for {response, index} <- Enum.with_index(@action.responses) do %>
<dl class="row"> <dl class="row">
<dd class="col-2 pr-0 pr-md-2"> <dt class="col-2 pr-0 pr-md-2 text-muted"><%= gettext "Code" %></dt>
<%= response.code %> <dt class="col-10 text-muted"><%= gettext "Details" %></dt>
</dl>
<dl class="row">
<dd
class="col-2 pr-0 pr-md-2 col-md-2"
data-selector="<%= "#{@module_name}-#{@action.name}-server-response-code" %>"
>
</dd> </dd>
<dd class="col-10"> <dd class="col-10 col-md-10"> <%= gettext "Response Body" %> <div
<div class="tile tile-muted p-1 mb-3"> class="tile tile-muted p-1 card-server-response-body"
<pre class="m-2"><strong><%= response.description %></strong></pre> >
<pre
data-selector="<%= "#{@module_name}-#{@action.name}-server-response-body" %>"
class="m-2"
></pre>
</div> </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">
<%= gettext "Example Value" %>
</a>
</li>
<%= if index == 0 do %>
<li class="nav-item">
<a class="nav-link api-doc-tab"
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">
<%= gettext "Model" %>
</a>
</li>
<% 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 tile-muted p-1">
<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}-model-tab" %>">
<%= render "_model_table.html", model: response.model %>
</div> <!-- /tab-pane -->
<% end %>
</div> <!-- /tab-content -->
</dd> </dd>
</dl> </dl>
<% end %> </div>
</div> <!-- /*-try-api-ui-result -->
</div> <hr />
</div> <!-- /Descriptor container -->
<h4 class="text-primary my-4"><%= gettext "Responses" %></h4>
<div>
<dl class="row">
<dt class="col-2 pr-0 pr-md-2 text-muted"><%= gettext "Code" %></dt>
<dt class="col-10 text-muted"><%= gettext "Description" %></dt>
</dl> <%= for {response, index} <- Enum.with_index(@action.responses) do %> <dl class="row">
<dd class="col-2 pr-0 pr-md-2"> <%= response.code %> </dd>
<dd class="col-10">
<div class="tile tile-muted p-1 mb-3">
<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"
> <%= gettext "Example Value" %> </a>
</li> <%= if index == 0 do %> <li class="nav-item">
<a
class="nav-link api-doc-tab"
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"
> <%= gettext "Model" %> </a>
</li> <% 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 tile-muted p-1">
<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}-model-tab" %>"
> <%= render "_model_table.html", model: response.model %> </div> <!-- /tab-pane --> <% end %>
</div> <!-- /tab-content -->
</dd>
</dl> <% end %>
</div> </div>
</div> </div>
</div> </div>
</div> </div>

8
apps/block_scout_web/lib/block_scout_web/templates/api_docs/_module_card.html.eex
Unescape View File

@ -5,10 +5,8 @@
<span class="api-text-title api-text-monospace api-text-monospace-background">?module=<%= @module.name %></span> <span class="api-text-title api-text-monospace api-text-monospace-background">?module=<%= @module.name %></span>
</h2> </h2>
</div> </div>
<div class="card-body"> <%= for action <- @module.actions do %>
<%= for action <- @module.actions do %> <%= render "_action_tile.html", module_name: @module.name, action: action %>
<%= render "_action_tile.html", module_name: @module.name, action: action %> <% end %>
<% end %>
</div>
</div> </div>

Write Preview
Loading…
Cancel
Save