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. 273
      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;
}
}

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

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