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

269
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-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 %>"
<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
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 %>"
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>
</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>
</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>
<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>
<!-- 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>
<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">
<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-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" %>"
type="text"
</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"
placeholder="<%= input_placeholder(optional_param) %>"
data-parameter-key="<%= optional_param.key %>"
>
</dd>
</dl> <% end %> <div class="row">
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
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 %>"
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
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 %>"
data-module="<%= @module_name %>"
data-selector='<%= "#{@module_name}-#{@action.name}-btn-try-api-clear" %>'
role="button"
><%= gettext "Clear" %></button>
</div>
</div>
<!-- /btn-group -->
<!-- CURL / Request URL / Server Response -->
<div
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">
<h5 class=""><%= gettext "Curl" %></h5>
<h5 class="api-doc-parameters-list-item-title"><%= gettext "Curl" %></h5>
<div class="tile tile-muted p-1">
<pre
data-selector="<%= "#{@module_name}-#{@action.name}-curl" %>"
class="m-2"
data-selector='<%= "#{@module_name}-#{@action.name}-curl" %>'
></pre>
</div>
</div>
<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">
<pre
data-selector="<%= "#{@module_name}-#{@action.name}-request-url" %>"
class="m-2"
data-selector='<%= "#{@module_name}-#{@action.name}-request-url" %>'
></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
<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"
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"
>
><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
data-selector="<%= "#{@module_name}-#{@action.name}-server-response-body" %>"
class="m-2"
data-selector='<%= "#{@module_name}-#{@action.name}-server-response-body" %>'
></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">
<dd class="col-2 pr-0 pr-md-2"> <%= response.code %> </dd>
<dd class="col-10">
</div>
</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"
id="<%= "#{@module_name}-#{@action.name}-example-value-tab" %>"
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"
aria-controls="<%= "#{@module_name}-#{@action.name}-example-value" %>"
aria-selected="true"
><%= gettext "Example Value" %></a>
</li> <%= if index == 0 do %> <li class="nav-item">
</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"
id="<%= "#{@module_name}-#{@action.name}-model-tab" %>"
data-toggle="pill"
href="#<%= "#{@module_name}-#{@action.name}-model" %>"
href='#<%= "#{@module_name}-#{@action.name}-model" %>'
id='<%= "#{@module_name}-#{@action.name}-model-tab" %>'
role="tab"
aria-controls="<%= "#{@module_name}-#{@action.name}-model" %>"
aria-selected="false"
><%= gettext "Model" %></a>
</li> <% end %>
</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" %>"
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
@ -219,16 +239,21 @@
data-json='<%= response.example_value %>'
></pre>
</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"
id="<%= "#{@module_name}-#{@action.name}-model" %>"
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 %>
>
<%= render "_model_table.html", model: response.model %>
</div>
<% end %>
</div>
</div>
</div>
<% end %>
</div>
</div>
Write Preview
Loading…
Cancel
Save