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; grid-template-rows: 1fr 1fr 1fr;
padding: 30px; padding: 30px;
row-gap: 25px; 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 { .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 { .api-doc-list-item-contents {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@include media-breakpoint-down(sm) {
flex-direction: column;
}
} }
.api-doc-list-item-title { .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; font-size: 12px;
line-height: 1.2; line-height: 1.2;
margin-bottom: 20px; margin-bottom: 20px;
word-break: break-all;
word-wrap: break-word;
> strong { > strong {
font-weight: 700; 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-direction: column;
flex-grow: 1; flex-grow: 1;
margin-left: 50px; 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 { .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; cursor: pointer;
font-size: 14px; font-size: 14px;
margin-top: auto; margin-top: auto;
white-space: nowrap;
.fa { .fa {
margin-left: 5px; 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-success api-badge"><%= gettext "GET" %></span>
<span class="badge badge-neutral api-badge"><%= gettext "POST" %></span> <span class="badge badge-neutral api-badge"><%= gettext "POST" %></span>
</div> </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>
</div> </div>
<!-- Parameters -->
<div <div
class="collapse multi-collapse" class="collapse multi-collapse api-doc-parameters-container"
id="<%= action_tile_id(@module_name, @action.name) %>" id="<%= action_tile_id(@module_name, @action.name) %>"
> >
<div class="pt-3"> <h3 class="card-title margin-bottom-md">
<h4 class="text-primary my-4"><%= gettext "Parameters" %> <button <%= gettext "Parameters" %>
data-selector="<%= "#{@module_name}-#{@action.name}-btn-try-api" %>" <button
role="button" class="btn-full-primary float-right"
class="button button-xs button-primary float-right" data-action="<%= @action.name %>"
style="width: 8rem" data-module="<%= @module_name %>"
data-module="<%= @module_name %>" data-selector='<%= "#{@module_name}-#{@action.name}-btn-try-api" %>'
data-action="<%= @action.name %>" role="button"
><%= gettext "Try it out" %></button> ><%= gettext "Try it out" %></button>
<button <button
data-selector="<%= "#{@module_name}-#{@action.name}-btn-try-api-cancel" %>" class="collapse btn-line float-right"
role="button" data-action="<%= @action.name %>"
class="collapse button button-xs button-secondary float-right" data-module="<%= @module_name %>"
style="width: 8rem" data-selector='<%= "#{@module_name}-#{@action.name}-btn-try-api-cancel" %>'
data-module="<%= @module_name %>" role="button"
data-action="<%= @action.name %>" ><%= gettext "Cancel" %></button>
><%= gettext "Cancel" %></button> </h3>
</h4> <!-- Parameters description list -->
<div class="mb-4"> <div class="api-doc-parameters-list">
<dl class="row"> <div class="row d-none d-md-flex">
<dt class="col-2 text-muted d-none d-md-block"><%= gettext "Name" %></dt> <h4 class="col-2 api-doc-parameters-list-title"><%= gettext "Name" %></h4>
<dt class="col-10 text-muted d-none d-md-block"><%= gettext "Description" %></dt> <h3 class="col-10 api-doc-parameters-list-title"><%= gettext "Description" %></h3>
</dl> </div>
<dl class="row"> <!-- Module -->
<dd class="col-sm-4 col-md-2"> <div class="row api-doc-parameters-list-item">
<div class=""> <%= gettext "Module" %> <span class="text-danger"> * <div class="col-sm-4 col-md-2">
<small><%= gettext "required" %></small> <h5 class="api-doc-parameters-list-item-title"><%= gettext "Module" %> <span class="text-danger">*<small><%= gettext "required" %></small></span></h5>
</span> <p class="api-doc-parameters-list-item-subtitle"><%= gettext "string" %> <em><%= gettext "(query)" %></em></p>
</div> </div>
<span class="text-muted"><%= gettext "string" %> <em><%= gettext "(query)" %></em></span> <div class="col-sm-8 col-md-10">
</dd> <p class="api-doc-parameters-list-item-description"><%= gettext "A string with the name of the module to be invoked." %></p>
<dd class="col-sm-8 col-md-10"> <%= gettext "A string with the name of the module to be invoked." %> <p class="api-doc-parameters-list-item-description"><strong><%= gettext "Must be set to:" %></strong> <em><%= @module_name %></em>
<em><%= gettext "Must be set to:" %></em> <%= @module_name %> </dd> </div>
</dl> </div>
<dl class="row"> <!-- Action -->
<dd class="col-sm-4 col-md-2"> <div class="row api-doc-parameters-list-item">
<div class=""> <%= gettext "Action" %> <span class="text-danger"> * <div class="col-sm-4 col-md-2">
<small><%= gettext "required" %></small> <h5 class="api-doc-parameters-list-item-title"><%= gettext "Action" %> <span class="text-danger">*<small><%= gettext "required" %></small></span></h5>
</span> <p class="api-doc-parameters-list-item-subtitle"><%= gettext "string" %> <em><%= gettext "(query)" %></em></p>
</div> </div>
<span class="text-muted"><%= gettext "string" %><em><%= gettext "(query)" %></em></span> <div class="col-sm-8 col-md-10">
</dd> <p class="api-doc-parameters-list-item-description"><%= gettext "A string with the name of the action to be invoked." %></p>
<dd class="col-sm-8 col-md-10"> <%= gettext "A string with the name of the action to be invoked." %> <p class="api-doc-parameters-list-item-description"><strong><%= gettext "Must be set to:" %></strong> <em><%= @action.name %></em></p>
<em><%= gettext "Must be set to:" %></em> <%= @action.name %> </dd> </div>
</dl> <%= for required_param <- @action.required_params do %> <dl class="row"> </div>
<dd class="col-sm-4 col-md-2"> <%= required_param.key %> <span class="align-text-bottom text-danger"> * <!-- Other -->
<small><%= gettext "required" %></small> <%= for required_param <- @action.required_params do %>
</span> <div class="row api-doc-parameters-list-item">
<div class="text-muted"><%= required_param.type %> <em><%= gettext "(query)" %></em></div> <div class="col-sm-4 col-md-2">
</dd> <h5 class="api-doc-parameters-list-item-title"><%= required_param.key %> <span class="align-text-bottom text-danger">*<small><%= gettext "required" %></small></span></h5>
<dd class="col-sm-8 col-md-10"> <%= required_param.description %> <div class="form-group has-danger"> <p class="api-doc-parameters-list-item-subtitle"><%= required_param.type %> <em><%= gettext "(query)" %></em></p>
<input </div>
data-selector="<%= "#{@module_name}-#{@action.name}-try-api-ui" %>" <div class="col-sm-8 col-md-10">
data-required="true" <p class="api-doc-parameters-list-item-description"><%= required_param.description %></p>
type="text" <div class="form-group has-danger mb-0">
class="collapse form-control form-control-danger is-invalid" <input
placeholder="<%= input_placeholder(required_param) %>" data-selector='<%= "#{@module_name}-#{@action.name}-try-api-ui" %>'
data-parameter-key="<%= required_param.key %>" data-required="true"
>
</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" %>"
type="text" type="text"
class="collapse form-control" class="collapse form-control form-control-danger is-invalid"
placeholder="<%= input_placeholder(optional_param) %>" placeholder="<%= input_placeholder(required_param) %>"
data-parameter-key="<%= optional_param.key %>" data-parameter-key="<%= required_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>
</div> </div>
<div class="col-sm-2 col-md-2 mt-2 mt-md-0"> </div>
<button </div>
role="button" <% end %>
class="collapse button button-secondary w-100" <!-- Other / Extra -->
data-selector="<%= "#{@module_name}-#{@action.name}-btn-try-api-clear" %>" <%= for optional_param <- @action.optional_params do %>
data-module="<%= @module_name %>" <div class="row api-doc-parameters-list-item">
data-action="<%= @action.name %>" <div class="col-sm-4 col-md-2">
><%= gettext "Clear" %></button> <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>
</div> </div>
<!-- /btn-group --> <div class="mb-4">
<div <h5 class="api-doc-parameters-list-item-title"><%= gettext "Request URL" %></h5>
class="tile text-dark mt-5 collapse" <div class="tile tile-muted p-1">
data-selector="<%= "#{@module_name}-#{@action.name}-try-api-ui-result" %>" <pre
> class="m-2"
<div class="mb-3"> data-selector='<%= "#{@module_name}-#{@action.name}-request-url" %>'
<h5 class=""><%= gettext "Curl" %></h5> ></pre>
<div class="tile tile-muted p-1"> </div>
<pre </div>
data-selector="<%= "#{@module_name}-#{@action.name}-curl" %>" <h5 class="api-doc-parameters-list-item-title"><%= gettext "Server Response" %></h5>
class="m-2" <div class="row">
></pre> <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> </div>
<div class="mb-4"> </div>
<h5><%= gettext "Request URL" %></h5> </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"> <div class="tile tile-muted p-1">
<pre <pre
data-selector="<%= "#{@module_name}-#{@action.name}-request-url" %>"
class="m-2" class="m-2"
data-json='<%= response.example_value %>'
></pre> ></pre>
</div> </div>
</div> </div>
<div> <%= if index == 0 do %>
<h5><%= gettext "Server Response" %></h5> <!-- Model Tab -->
<dl class="row"> <div
<dt class="col-2 pr-0 pr-md-2 text-muted"><%= gettext "Code" %></dt> aria-labelledby='<%= "#{@module_name}-#{@action.name}-model-tab" %>'
<dt class="col-10 text-muted"><%= gettext "Details" %></dt> class="tab-pane fade"
</dl> id='<%= "#{@module_name}-#{@action.name}-model" %>'
<dl class="row"> role="tabpanel"
<dd >
class="col-2 pr-0 pr-md-2 col-md-2" <%= render "_model_table.html", model: response.model %>
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>
</div> <!-- /*-try-api-ui-result --> <% end %>
<hr /> </div>
</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>
<% end %>
</div> </div>
</div> </div>
Write Preview
Loading…
Cancel
Save