misc: beautify endpoints présentation (#34790)
This commit is contained in:
parent
1f9bb398c2
commit
010fabec81
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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 }}
|
||||
|
|
Loading…
Reference in New Issue