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

(add) api docs styles

Browse Source
pull/1844/head
Gabriel Rodriguez Alsina 6 years ago
parent fdec07d1a0
commit 266cfdada8
2 changed files with 334 additions and 192 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. 117
      apps/block_scout_web/assets/css/components/_api.scss
  2. 409
      apps/block_scout_web/lib/block_scout_web/templates/api_docs/_action_tile.html.eex

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

@ -26,6 +26,17 @@ $api-doc-list-item-view-more-color: $api-doc-list-item-title-color !default;
grid-template-rows: 1fr 1fr 1fr;
padding: 30px;
row-gap: 25px;
@include media-breakpoint-down(md) {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
}
@include media-breakpoint-down(sm) {
grid-auto-flow: row;
grid-template-columns: 1fr;
grid-template-rows: none;
}
}
.api-anchors-list-item {
@ -70,6 +81,10 @@ $api-doc-list-item-view-more-color: $api-doc-list-item-title-color !default;
.api-doc-list-item-contents {
display: flex;
justify-content: space-between;
@include media-breakpoint-down(sm) {
flex-direction: column;
}
}
.api-doc-list-item-title {
@ -85,6 +100,8 @@ $api-doc-list-item-view-more-color: $api-doc-list-item-title-color !default;
font-size: 12px;
line-height: 1.2;
margin-bottom: 20px;
word-break: break-all;
word-wrap: break-word;
> strong {
font-weight: 700;
@ -104,6 +121,13 @@ $api-doc-list-item-view-more-color: $api-doc-list-item-title-color !default;
flex-direction: column;
flex-grow: 1;
margin-left: 50px;
@include media-breakpoint-down(sm) {
flex-direction: row;
justify-content: space-between;
margin-left: 0;
padding-top: 25px;
}
}
.api-doc-list-item-controls-badges {
@ -125,8 +149,101 @@ $api-doc-list-item-view-more-color: $api-doc-list-item-title-color !default;
cursor: pointer;
font-size: 14px;
margin-top: auto;
white-space: nowrap;
.fa {
margin-left: 5px;
}
}
[aria-expanded="false"] {
.api-doc-list-item-controls-view-more-open {
display: block;
}
.api-doc-list-item-controls-view-more-close {
display: none;
}
}
[aria-expanded="true"] {
.api-doc-list-item-controls-view-more-open {
display: none;
}
.api-doc-list-item-controls-view-more-close {
display: block;
}
}
.api-doc-parameters-container {
border-top: 1px solid $base-border-color;
margin-top: 20px;
padding-top: $card-vertical-padding;
}
.api-doc-parameters-list {
border-bottom: 1px solid $base-border-color;
margin-bottom: $card-vertical-padding;
padding-bottom: $card-vertical-padding / 2;
overflow-x: auto;
}
.api-doc-parameters-list-title {
color: #333;
font-size: 16px;
font-weight: 500;
line-height: 1.2;
margin: 0 0 15px;
white-space: nowrap;
}
.api-doc-parameters-list-item {
margin-bottom: 15px;
&:last-child {
margin-bottom: 0;
}
@include media-breakpoint-down(sm) {
margin-bottom: 30px;
[class*="col-"] {
margin-bottom: 8px;
&:last-child {
margin-bottom: 0;
}
}
}
}
.api-doc-parameters-list-item-title {
color: #333;
font-size: 14px;
font-weight: 500;
line-height: 1.2;
margin: 0 0 8px;
}
.api-doc-parameters-list-item-subtitle {
color: #aaa;
font-size: 13px;
font-weight: 400;
line-height: 1.2;
margin: 0;
}
.api-doc-parameters-list-item-description {
color: #333;
font-size: 14px;
font-weight: 400;
line-height: 1.2;
margin: 0 0 8px;
&:last-child {
margin-bottom: 0;
}
strong {
font-weight: 700;
}
}

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

@ -18,217 +18,242 @@
<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>
<span class="api-doc-list-item-controls-view-more">
<span class="api-doc-list-item-controls-view-more-open">More Details <span class="fa fa-chevron-down"></span></span>
<span class="api-doc-list-item-controls-view-more-close">Hide Details <span class="fa fa-chevron-up"></span></span>
</span>
</div>
</div>
<!-- Parameters -->
<div
class="collapse multi-collapse"
class="collapse multi-collapse api-doc-parameters-container"
id="<%= action_tile_id(@module_name, @action.name) %>"
>
<div class="pt-3">
<h4 class="text-primary my-4"><%= gettext "Parameters" %> <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>
<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>
</h4>
<div class="mb-4">
<dl class="row">
<dt class="col-2 text-muted d-none d-md-block"><%= gettext "Name" %></dt>
<dt class="col-10 text-muted d-none d-md-block"><%= gettext "Description" %></dt>
</dl>
<dl class="row">
<dd class="col-sm-4 col-md-2">
<div class=""> <%= gettext "Module" %> <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 module to be invoked." %>
<em><%= gettext "Must be set to:" %></em> <%= @module_name %> </dd>
</dl>
<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">
<div><%= optional_param.key %></div>
<span class="text-muted"><%= optional_param.type %> <em><%= gettext "(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" %>"
<h3 class="card-title margin-bottom-md">
<%= gettext "Parameters" %>
<button
class="btn-full-primary float-right"
data-action="<%= @action.name %>"
data-module="<%= @module_name %>"
data-selector='<%= "#{@module_name}-#{@action.name}-btn-try-api" %>'
role="button"
><%= gettext "Try it out" %></button>
<button
class="collapse btn-line float-right"
data-action="<%= @action.name %>"
data-module="<%= @module_name %>"
data-selector='<%= "#{@module_name}-#{@action.name}-btn-try-api-cancel" %>'
role="button"
><%= gettext "Cancel" %></button>
</h3>
<!-- Parameters description list -->
<div class="api-doc-parameters-list">
<div class="row d-none d-md-flex">
<h4 class="col-2 api-doc-parameters-list-title"><%= gettext "Name" %></h4>
<h3 class="col-10 api-doc-parameters-list-title"><%= gettext "Description" %></h3>
</div>
<!-- Module -->
<div class="row api-doc-parameters-list-item">
<div class="col-sm-4 col-md-2">
<h5 class="api-doc-parameters-list-item-title"><%= gettext "Module" %> <span class="text-danger">*<small><%= gettext "required" %></small></span></h5>
<p class="api-doc-parameters-list-item-subtitle"><%= gettext "string" %> <em><%= gettext "(query)" %></em></p>
</div>
<div class="col-sm-8 col-md-10">
<p class="api-doc-parameters-list-item-description"><%= gettext "A string with the name of the module to be invoked." %></p>
<p class="api-doc-parameters-list-item-description"><strong><%= gettext "Must be set to:" %></strong> <em><%= @module_name %></em>
</div>
</div>
<!-- Action -->
<div class="row api-doc-parameters-list-item">
<div class="col-sm-4 col-md-2">
<h5 class="api-doc-parameters-list-item-title"><%= gettext "Action" %> <span class="text-danger">*<small><%= gettext "required" %></small></span></h5>
<p class="api-doc-parameters-list-item-subtitle"><%= gettext "string" %> <em><%= gettext "(query)" %></em></p>
</div>
<div class="col-sm-8 col-md-10">
<p class="api-doc-parameters-list-item-description"><%= gettext "A string with the name of the action to be invoked." %></p>
<p class="api-doc-parameters-list-item-description"><strong><%= gettext "Must be set to:" %></strong> <em><%= @action.name %></em></p>
</div>
</div>
<!-- Other -->
<%= for required_param <- @action.required_params do %>
<div class="row api-doc-parameters-list-item">
<div class="col-sm-4 col-md-2">
<h5 class="api-doc-parameters-list-item-title"><%= required_param.key %> <span class="align-text-bottom text-danger">*<small><%= gettext "required" %></small></span></h5>
<p class="api-doc-parameters-list-item-subtitle"><%= required_param.type %> <em><%= gettext "(query)" %></em></p>
</div>
<div class="col-sm-8 col-md-10">
<p class="api-doc-parameters-list-item-description"><%= required_param.description %></p>
<div class="form-group has-danger mb-0">
<input
data-selector='<%= "#{@module_name}-#{@action.name}-try-api-ui" %>'
data-required="true"
type="text"
class="collapse form-control"
placeholder="<%= input_placeholder(optional_param) %>"
data-parameter-key="<%= optional_param.key %>"
>
</dd>
</dl> <% end %> <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 button button-primary w-100"
data-module="<%= @module_name %>"
data-action="<%= @action.name %>"
><%= gettext "Execute" %></button>
class="collapse form-control form-control-danger is-invalid"
placeholder="<%= input_placeholder(required_param) %>"
data-parameter-key="<%= required_param.key %>"
/>
</div>
<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>
</div>
</div>
<% end %>
<!-- Other / Extra -->
<%= for optional_param <- @action.optional_params do %>
<div class="row api-doc-parameters-list-item">
<div class="col-sm-4 col-md-2">
<h5 class="api-doc-parameters-list-item-title"><%= optional_param.key %></h2>
<p class="api-doc-parameters-list-item-subtitle"><%= optional_param.type %> <em><%= gettext "(query)" %></em></p>
</div>
<div class="col-sm-8 col-md-10">
<p class="api-doc-parameters-list-item-description"><%= optional_param.description %></p>
<input
class="collapse form-control"
data-parameter-key="<%= optional_param.key %>"
data-selector='<%= "#{@module_name}-#{@action.name}-try-api-ui" %>'
placeholder="<%= input_placeholder(optional_param) %>"
type="text"
/>
</div>
</div>
<% end %>
<!-- Buttons for Other / Extra -->
<div class="row">
<div class="col-sm-2 offset-sm-4 col-md-2 offset-md-2">
<button
class="collapse button button-primary w-100"
data-action="<%= @action.name %>"
data-module="<%= @module_name %>"
data-selector='<%= "#{@module_name}-#{@action.name}-try-api-ui" %>'
data-try-api-ui-button-type="execute"
role="button"
><%= gettext "Execute" %></button>
</div>
<div class="col-sm-2 col-md-2 mt-2 mt-md-0">
<button
class="collapse button button-secondary w-100"
data-action="<%= @action.name %>"
data-module="<%= @module_name %>"
data-selector='<%= "#{@module_name}-#{@action.name}-btn-try-api-clear" %>'
role="button"
><%= gettext "Clear" %></button>
</div>
</div>
<!-- CURL / Request URL / Server Response -->
<div
class="tile text-dark mt-5 collapse"
data-selector='<%= "#{@module_name}-#{@action.name}-try-api-ui-result" %>'
>
<div class="mb-3">
<h5 class="api-doc-parameters-list-item-title"><%= gettext "Curl" %></h5>
<div class="tile tile-muted p-1">
<pre
class="m-2"
data-selector='<%= "#{@module_name}-#{@action.name}-curl" %>'
></pre>
</div>
</div>
<!-- /btn-group -->
<div
class="tile text-dark mt-5 collapse"
data-selector="<%= "#{@module_name}-#{@action.name}-try-api-ui-result" %>"
>
<div class="mb-3">
<h5 class=""><%= gettext "Curl" %></h5>
<div class="tile tile-muted p-1">
<pre
data-selector="<%= "#{@module_name}-#{@action.name}-curl" %>"
class="m-2"
></pre>
<div class="mb-4">
<h5 class="api-doc-parameters-list-item-title"><%= gettext "Request URL" %></h5>
<div class="tile tile-muted p-1">
<pre
class="m-2"
data-selector='<%= "#{@module_name}-#{@action.name}-request-url" %>'
></pre>
</div>
</div>
<h5 class="api-doc-parameters-list-item-title"><%= gettext "Server Response" %></h5>
<div class="row">
<h4 class="col-2 api-doc-parameters-list-title"><%= gettext "Code" %></h4>
<h4 class="col-10 api-doc-parameters-list-title"><%= gettext "Details" %></h4>
</div>
<div class="row">
<div
class="col-2 pr-0 pr-md-2 col-md-2"
><strong data-selector='<%= "#{@module_name}-#{@action.name}-server-response-code" %>'></strong></div>
<div class="col-10 col-md-10">
<p class="api-doc-parameters-list-item-description"><%= gettext "Response Body" %></p>
<div class="tile tile-muted p-1 card-server-response-body">
<pre
class="m-2"
data-selector='<%= "#{@module_name}-#{@action.name}-server-response-body" %>'
></pre>
</div>
</div>
<div class="mb-4">
<h5><%= gettext "Request URL" %></h5>
</div>
</div>
</div>
<!-- Responses -->
<h3 class="card-title margin-bottom-md"><%= gettext "Responses" %></h3>
<div class="row api-doc-parameters-list-item mb-0">
<h4 class="col-2 api-doc-parameters-list-title"><%= gettext "Code" %></h4>
<h5 class="col-10 api-doc-parameters-list-title"><%= gettext "Description" %></h5>
</div>
<%= for {response, index} <- Enum.with_index(@action.responses) do %>
<div class="row api-doc-parameters-list-item">
<div class="col-2 pr-0 pr-md-2"><strong><%= response.code %></strong></div>
<div class="col-10">
<div class="tile tile-muted p-1 mb-3">
<pre class="m-2"><strong><%= response.description %></strong></pre>
</div>
<!-- Tabs -->
<ul
class="nav nav-pills mb-3"
role="tablist"
>
<li class="nav-item">
<a
aria-controls='<%= "#{@module_name}-#{@action.name}-example-value" %>'
aria-selected="true"
class="nav-link api-doc-tab active"
data-toggle="pill"
href='#<%= "#{@module_name}-#{@action.name}-example-value" %>'
id='<%= "#{@module_name}-#{@action.name}-example-value-tab" %>'
role="tab"
><%= gettext "Example Value" %></a>
</li>
<%= if index == 0 do %>
<li class="nav-item">
<a
aria-controls='<%= "#{@module_name}-#{@action.name}-model" %>'
aria-selected="false"
class="nav-link api-doc-tab"
data-toggle="pill"
href='#<%= "#{@module_name}-#{@action.name}-model" %>'
id='<%= "#{@module_name}-#{@action.name}-model-tab" %>'
role="tab"
><%= gettext "Model" %></a>
</li>
<% end %>
</ul>
<!-- Tab Content -->
<div class="tab-content">
<!-- Example Value Tab -->
<div
aria-labelledby='<%= "#{@module_name}-#{@action.name}-example-value-tab" %>'
class="tab-pane fade show active"
id='<%= "#{@module_name}-#{@action.name}-example-value" %>'
role="tabpanel"
>
<div class="tile tile-muted p-1">
<pre
data-selector="<%= "#{@module_name}-#{@action.name}-request-url" %>"
class="m-2"
data-json='<%= response.example_value %>'
></pre>
</div>
</div>
<div>
<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>
<%= if index == 0 do %>
<!-- Model Tab -->
<div
aria-labelledby='<%= "#{@module_name}-#{@action.name}-model-tab" %>'
class="tab-pane fade"
id='<%= "#{@module_name}-#{@action.name}-model" %>'
role="tabpanel"
>
<%= render "_model_table.html", model: response.model %>
</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">
<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 %>
<% end %>
</div>
</div>
</div>
<% end %>
</div>
</div>
Write Preview
Loading…
Cancel
Save