misc: beautify endpoints présentation (#34790)

This commit is contained in:
Serghei Mihai 2019-07-11 17:08:51 +02:00
parent 1f9bb398c2
commit 010fabec81
2 changed files with 112 additions and 9 deletions

View File

@ -209,3 +209,106 @@ ul li .type {
color: grey;
font-style: italic;
}
@media screen and (max-width: 760px) {
.example-url {
margin: 0 7em 0 0.75em;
display: inline-block;
}
}
ul.get-params {
padding-left: 1em;
}
#endpoints > div > ul {
padding: 0;
}
#endpoints > div > ul li {
list-style-type: none;
margin: 0.75em 0;
position: relative;
}
#endpoints .get-method .method-name {
background: hsl(207, 85%, 38%);
}
#endpoints .get-method {
background: hsl(207, 85%, 95%);
border: 1px solid hsl(207, 85%, 87%);
}
#endpoints .post-method .method-name {
background: hsl(143, 82%, 35%);
}
#endpoints .post-method {
background: hsl(143, 82%, 95%);
border: 1px solid hsl(143, 82%, 87%);
}
#endpoints .put-method .method-name {
background: hsl(35, 64%, 47%)
}
#endpoints .put-method {
background: hsl(35, 64%, 95%)
border: hsl(35, 64%, 87%)
}
#endpoints .delete-method .method-name {
background: hsl(358, 69%, 38%);
}
#endpoints .delete-method {
background: hsl(358, 69%, 95%)
border: 1px solid hsl(358, 69%, 87%);
}
#endpoints .patch-method .method-name {
background: hsl(14, 100%, 63%);
}
#endpoints .patch-method {
background: hsl(14, 100%, 95%);
border: 1px solid hsl(14, 100%, 87%);
}
#endpoints .method-name {
color: hsl(0, 0%, 100%);
padding: 0.3em 0.75em;
width: 4em;
display: inline-block;
text-align: center;
margin: -1px -1px 0 0;
cursor: pointer;
position: absolute;
right: 0;
top: 0;
}
#endpoints .description, #endpoints .long-description {
margin: 0.3em 0.3em 0.3em 0.75em;
display: inline-block;
font-weight: bold;
}
#endpoints .params {
padding: 0 0.3em;
background: hsla(0, 100%, 100%, 0.65);
margin: 0.3em 0.75em;
}
#endpoints .params .params-title {
font-weight: bold;
}
#endpoints .params .param-name {
font-family: Monospace;
}
#endpoints .params .param-optional {
font-style: italic;
}

View File

@ -60,19 +60,18 @@
{% block endpoints %}
<ul>
{% for endpoint in object.get_endpoints_infos %}
<li>{% if endpoint.description %}{{endpoint.description}}{% trans ':' %}{% endif %}
<a href="{{endpoint.example_url}}">{{ site_base_uri }}{{endpoint.example_url_as_html}}</a>
{% if endpoint.methods|length > 1 %}
({{endpoint.http_method|upper}})
{% endif %}
<li class="{{ endpoint.http_method|default:"get" }}-method">{% if endpoint.description %}<span class="description">{{endpoint.description}}{% trans ':' %}</span>{% endif %}
<a href="{{endpoint.example_url}}" class="example-url">{{ site_base_uri }}{{endpoint.example_url_as_html}}</a>
<span class="method-name">{{endpoint.http_method|upper}}</span>
{% if endpoint.get_params %}
<ul class="params">
{% if endpoint.get_params %}
<li>{% trans "Query parameters" %}
<ul class="get-params">
{% for param in endpoint.get_params %}
<li>{{param.name}}
{% if param.optional %}({% trans 'optional' %}{% if param.default_value %},
{% trans 'default value:' %} {{param.default_value}}{% endif %}){% endif %}
<li><span class="param-name">{{param.name}}</span>
{% if param.optional %}<span class="param-optional">({% trans 'optional' %}{% if param.default_value %},
{% trans 'default value:' %} {{param.default_value}}{% endif %})</span>{% endif %}
{% if param.description %}{% trans ':' %} {{param.description}}{% endif %}
<span class="type">({% if param.type %}{{ param.type }}{% else %}string{% endif %})</span>
</li>
@ -81,13 +80,14 @@
</li>
{% endif %}
{% if endpoint.body_schemas %}
<li>{% trans "Request body" %}
<li><span class="params-title">{% trans "Request body" %}</span>
<div class="body-schemas">
{% render_body_schemas body_schemas=endpoint.body_schemas %}
</div>
</li>
{% endif %}
</ul>
{% endif %}
{% if endpoint.long_description %}
<div class="long-description">
{{ endpoint.long_description }}