Add information about the request.

Add link in footer for some visual balance.
Tighten up styling.
This commit is contained in:
Alec Perkins 2012-09-07 19:05:42 -04:00
parent 27598fc5f4
commit 94029acd28
2 changed files with 124 additions and 88 deletions

View File

@ -1,8 +1,33 @@
body { body {
padding-top: 1em; padding-top: 1em;
padding-bottom: 1em;
} }
h2 { h1 {
font-weight: 500;
}
h2, h3 {
font-weight: 300; font-weight: 300;
} }
.resource-description, .response-info {
margin-bottom: 2em;
}
#footer {
border-top: 1px solid #eee;
margin-top: 2em;
padding-top: 1em;
text-align: right;
}
.version:before {
content: "v";
opacity: 0.6;
padding-right: 0.25em;
}
.format-option {
font-family: Menlo, Consolas, "Andale Mono", "Lucida Console", monospace;
}

View File

@ -25,29 +25,29 @@
<div class="navbar"> <div class="navbar">
<div class="navbar-inner"> <div class="navbar-inner">
<span class="brand" href="/"> <span class="brand" href="/">
{% block branding %}<a href='http://django-rest-framework.org'>Django REST framework</a> <span class="version"> v {{ version }}</span>{% endblock %} {% block branding %}<a href='http://django-rest-framework.org'>Django REST framework</a> <span class="version">{{ version }}</span>{% endblock %}
</span> </span>
{% block userlinks %}
<ul class="nav pull-right"> <ul class="nav pull-right">
{% if user.is_active %} {% block userlinks %}
<li class="dropdown"> {% if user.is_active %}
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> <li class="dropdown">
Welcome, {{ user }} <a href="#" class="dropdown-toggle" data-toggle="dropdown">
<b class="caret"></b> Welcome, {{ user }}
</a> <b class="caret"></b>
<ul class="dropdown-menu"> </a>
<li>{% optional_logout %}</li> <ul class="dropdown-menu">
</ul> <li>{% optional_logout %}</li>
</li> </ul>
{% else %} </li>
<li>{% optional_login %}</li> {% else %}
{% endif %} <li>{% optional_login %}</li>
{% endif %}
{% endblock %}
</ul> </ul>
{% endblock %}
</div> </div>
</div> </div>
{% block nav-global %}{% endblock %} {% block nav-global %}{% endblock %}
{% block breadcrumbs %} {% block breadcrumbs %}
@ -62,7 +62,7 @@
{% endblock %} {% endblock %}
<!-- Content --> <!-- Content -->
<div id="content" class="{% block coltype %}colM{% endblock %}"> <div id="content">
{% if 'OPTIONS' in allowed_methods and api_settings.FORM_METHOD_OVERRIDE %} {% if 'OPTIONS' in allowed_methods and api_settings.FORM_METHOD_OVERRIDE %}
<form action="{{ request.get_full_path }}" method="post" class="pull-right"> <form action="{{ request.get_full_path }}" method="post" class="pull-right">
@ -74,88 +74,95 @@
<div class="content-main"> <div class="content-main">
<div class="page-header"><h1>{{ name }}</h1></div> <div class="page-header"><h1>{{ name }}</h1></div>
<p>{{ description }}</p> <p class="resource-description">{{ description }}</p>
<div class="response-content">
<h2>Request / Response</h2>
<div class="request-info">
<pre><b>{{ request.method }}</b> {{ request.get_full_path }}</pre>
<div>
<div class="response-info">
<pre><b>HTTP {{ response.status_code }} {{ response.status_text }}</b>{% autoescape off %} <pre><b>HTTP {{ response.status_code }} {{ response.status_text }}</b>{% autoescape off %}
{% for key, val in response.items %}<b>{{ key }}:</b> {{ val|urlize_quoted_links }} {% for key, val in response.items %}<b>{{ key }}:</b> {{ val|urlize_quoted_links }}
{% endfor %} {% endfor %}
{{ content|urlize_quoted_links }}</pre>{% endautoescape %} {{ content|urlize_quoted_links }}</pre>{% endautoescape %}
</div> </div>
{% if 'GET' in allowed_methods %} <h2>Available Methods &amp; Formats</h2>
<form>
<fieldset>
<h2>GET: {{ name }}</h2>
<div class="btn-group format-selection"> {% if 'GET' in allowed_methods %}
<a class="btn btn-primary js-tooltip" href='{{ request.get_full_path }}' rel="nofollow" title="Do a GET request on the {{ name }} resource">GET</a> <form>
{% for format in available_formats %} <fieldset>
{% with FORMAT_PARAM|add:"="|add:format as param %} <h3>GET: {{ name }}</h3>
<a class="btn js-tooltip" href='{{ request.get_full_path|add_query_param:param }}' rel="nofollow" title="Do a GET request on the {{ name }} resource with the format set to `{{ format }}`">{{ format }}</a>
{% endwith %}
{% endfor %}
</div>
</fieldset> <div class="btn-group format-selection">
</form> <a class="btn btn-primary js-tooltip" href='{{ request.get_full_path }}' rel="nofollow" title="Do a GET request on the {{ name }} resource">GET</a>
{% endif %} {% for format in available_formats %}
{% with FORMAT_PARAM|add:"="|add:format as param %}
{% if response.status_code != 403 %} <a class="btn js-tooltip format-option" href='{{ request.get_full_path|add_query_param:param }}' rel="nofollow" title="Do a GET request on the {{ name }} resource with the format set to `{{ format }}`">{{ format }}</a>
{% endwith %}
{% if 'POST' in allowed_methods %} {% endfor %}
<form action="{{ request.get_full_path }}" method="POST" {% if post_form.is_multipart %}enctype="multipart/form-data"{% endif %}>
<fieldset class='module aligned'>
<h2>POST: {{ name }}</h2>
{% csrf_token %}
{{ post_form.non_field_errors }}
{% for field in post_form %}
<div class='form-row'>
{{ field.label_tag }}
{{ field }}
<span class='help'>{{ field.help_text }}</span>
{{ field.errors }}
</div> </div>
{% endfor %}
<button class="btn btn-primary" title="Do a POST request on the {{ name }} resource">POST</button>
</fieldset>
</form>
{% endif %}
{% if 'PUT' in allowed_methods and api_settings.FORM_METHOD_OVERRIDE %}
<form action="{{ request.get_full_path }}" method="POST" {% if put_form.is_multipart %}enctype="multipart/form-data"{% endif %}>
<fieldset class='module aligned'>
<h2>PUT: {{ name }}</h2>
<input type="hidden" name="{{ api_settings.FORM_METHOD_OVERRIDE }}" value="PUT" />
{% csrf_token %}
{{ put_form.non_field_errors }}
{% for field in put_form %}
<div class='form-row'>
{{ field.label_tag }}
{{ field }}
<span class='help'>{{ field.help_text }}</span>
{{ field.errors }}
</div>
{% endfor %}
<button class="btn btn-primary js-tooltip" title="Do a PUT request on the {{ name }} resource">PUT</button>
</fieldset> </fieldset>
</form> </form>
{% endif %} {% endif %}
{% if 'DELETE' in allowed_methods and api_settings.FORM_METHOD_OVERRIDE %} {% if response.status_code != 403 %}
<form action="{{ request.get_full_path }}" method="POST">
<fieldset class='module aligned'>
<h2>DELETE: {{ name }}</h2>
{% csrf_token %}
<input type="hidden" name="{{ api_settings.FORM_METHOD_OVERRIDE }}" value="DELETE" />
<button class="btn btn-danger js-tooltip" title="Do a DELETE request on the {{ name }} resource">DELETE</button>
</fieldset>
</form>
{% endif %}
{% endif %} {% if 'POST' in allowed_methods %}
<form action="{{ request.get_full_path }}" method="POST" {% if post_form.is_multipart %}enctype="multipart/form-data"{% endif %}>
<fieldset class='module aligned'>
<h3>POST: {{ name }}</h3>
{% csrf_token %}
{{ post_form.non_field_errors }}
{% for field in post_form %}
<div class='form-row'>
{{ field.label_tag }}
{{ field }}
<span class='help'>{{ field.help_text }}</span>
{{ field.errors }}
</div>
{% endfor %}
<button class="btn btn-primary" title="Do a POST request on the {{ name }} resource">POST</button>
</fieldset>
</form>
{% endif %}
{% if 'PUT' in allowed_methods and api_settings.FORM_METHOD_OVERRIDE %}
<form action="{{ request.get_full_path }}" method="POST" {% if put_form.is_multipart %}enctype="multipart/form-data"{% endif %}>
<fieldset class='module aligned'>
<h3>PUT: {{ name }}</h3>
<input type="hidden" name="{{ api_settings.FORM_METHOD_OVERRIDE }}" value="PUT" />
{% csrf_token %}
{{ put_form.non_field_errors }}
{% for field in put_form %}
<div class='form-row'>
{{ field.label_tag }}
{{ field }}
<span class='help'>{{ field.help_text }}</span>
{{ field.errors }}
</div>
{% endfor %}
<button class="btn btn-primary js-tooltip" title="Do a PUT request on the {{ name }} resource">PUT</button>
</fieldset>
</form>
{% endif %}
{% if 'DELETE' in allowed_methods and api_settings.FORM_METHOD_OVERRIDE %}
<form action="{{ request.get_full_path }}" method="POST">
<fieldset class='module aligned'>
<h3>DELETE: {{ name }}</h3>
{% csrf_token %}
<input type="hidden" name="{{ api_settings.FORM_METHOD_OVERRIDE }}" value="DELETE" />
<button class="btn btn-danger js-tooltip" title="Do a DELETE request on the {{ name }} resource">DELETE</button>
</fieldset>
</form>
{% endif %}
{% endif %}
</div> </div>
<!-- END content-main --> <!-- END content-main -->
@ -163,7 +170,11 @@
</div> </div>
<!-- END Content --> <!-- END Content -->
{% block footer %}<div id="footer"></div>{% endblock %} <div id="footer">
{% block footer %}
<a class="powered-by" href='http://django-rest-framework.org'>Django REST framework</a> <span class="version">{{ version }}</span>
{% endblock %}
</div>
</div> </div>
<script src="{% get_static_prefix %}djangorestframework/js/jquery-1.8.1-min.js"></script> <script src="{% get_static_prefix %}djangorestframework/js/jquery-1.8.1-min.js"></script>
<script src="{% get_static_prefix %}djangorestframework/js/bootstrap.min.js"></script> <script src="{% get_static_prefix %}djangorestframework/js/bootstrap.min.js"></script>