misc: separate endpoint's HTTP method display logic

This commit is contained in:
Serghei Mihai 2020-01-17 13:59:32 +01:00
parent edf5ff1948
commit b22ff30f2b
2 changed files with 49 additions and 35 deletions

View File

@ -217,98 +217,113 @@ ul li .type {
}
ul.get-params {
padding-left: 1em;
padding: 0.5em 0 0 1em;
}
#endpoints > div > ul {
ul.get-params li {
margin: 0;
}
div.section > div > ul.endpoints {
padding: 0;
}
#endpoints > div > ul li {
.endpoints li {
list-style-type: none;
}
.endpoints > li {
margin: 0.75em 0;
position: relative;
min-height: 2em;
}
#endpoints .get-method .method-name {
background: hsl(207, 85%, 38%);
.endpoints > li::after {
color: hsl(0, 0%, 100%);
display: inline-block;
padding: 0.3em 0.75em;
width: 4em;
text-align: center;
position: absolute;
right: 0;
top: 0;
margin: -1px -1px 0 0;
}
#endpoints .get-method {
.endpoints .get-method {
background: hsl(207, 85%, 95%);
border: 1px solid hsl(207, 85%, 87%);
}
.endpoints .get-method::after {
content: "GET";
background: hsl(207, 85%, 38%);
}
#endpoints .post-method .method-name {
.endpoints .post-method::after {
content: "POST";
background: hsl(143, 82%, 35%);
}
#endpoints .post-method {
.endpoints .post-method {
background: hsl(143, 82%, 95%);
border: 1px solid hsl(143, 82%, 87%);
}
#endpoints .put-method .method-name {
.endpoints .put-method::after {
content: "PUT";
background: hsl(35, 64%, 47%)
}
#endpoints .put-method {
.endpoints .put-method {
background: hsl(35, 64%, 95%)
border: hsl(35, 64%, 87%)
}
#endpoints .delete-method .method-name {
.endpoints .delete-method::after {
content: "DELETE";
background: hsl(358, 69%, 38%);
}
#endpoints .delete-method {
.endpoints .delete-method {
background: hsl(358, 69%, 95%)
border: 1px solid hsl(358, 69%, 87%);
}
#endpoints .patch-method .method-name {
.endpoints .patch-method::after {
content: "PATCH";
background: hsl(14, 100%, 63%);
}
#endpoints .patch-method {
.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;
.endpoints .description, .endpoints .long-description {
display: inline-block;
font-weight: bold;
}
#endpoints .params {
.endpoints .description,
.endpoints .long-description,
.endpoints .body-schemas {
margin: 0.3em 0.3em 0.3em 0.75em;
}
.endpoints .params {
padding: 0 0.3em;
background: hsla(0, 100%, 100%, 0.65);
margin: 0.3em 0.75em;
}
#endpoints .params .params-title {
.endpoints .params .params-title {
font-weight: bold;
}
#endpoints .params .param-name {
.endpoints .params .param-name {
font-family: Monospace;
}
#endpoints .params .param-optional {
.endpoints .params .param-optional {
font-style: italic;
}

View File

@ -62,11 +62,10 @@
<div>
{% if object.api_description %}<p>{{object.api_description|safe}}</p>{% endif %}
{% block endpoints %}
<ul>
<ul class="endpoints">
{% for endpoint in object.get_endpoints_infos %}
<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>
<ul class="params">
{% if endpoint.get_params %}
<li>{% trans "Query parameters" %}