Add information about the request.

Add link in footer for some visual balance.
Tighten up styling.

djangorestframework/static/djangorestframework/css/style.css

@@ -1,8 +1,33 @@
 body {
     padding-top: 1em;
+    padding-bottom: 1em;
 }
 
-h2 {
+h1 {
+    font-weight: 500;
+}
+
+h2, h3 {
     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;
+}

djangorestframework/templates/djangorestframework/base.html

@@ -25,10 +25,10 @@
     <div class="navbar">
         <div class="navbar-inner">
             <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>
-            {% block userlinks %}
                 <ul class="nav pull-right">
+                    {% block userlinks %}
                         {% if user.is_active %}
                             <li class="dropdown">
                                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
@@ -42,8 +42,8 @@
                         {% else %}
                             <li>{% optional_login %}</li>
                         {% endif %}
-                </ul>
                     {% endblock %}
+                </ul>
         </div>
     </div>
 
@@ -62,7 +62,7 @@
     {% endblock %}
 
     <!-- Content -->
-    <div id="content" class="{% block coltype %}colM{% endblock %}">
+    <div id="content">
 
         {% if 'OPTIONS' in allowed_methods and api_settings.FORM_METHOD_OVERRIDE %}
             <form action="{{ request.get_full_path }}" method="post" class="pull-right">
@@ -74,24 +74,31 @@
 
         <div class="content-main">
             <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 %}
 {% for key, val in response.items %}<b>{{ key }}:</b> {{ val|urlize_quoted_links }}
 {% endfor %}
 {{ content|urlize_quoted_links }}</pre>{% endautoescape %}
             </div>
 
+            <h2>Available Methods &amp; Formats</h2>
+
             {% if 'GET' in allowed_methods %}
                 <form>
                     <fieldset>
-                    <h2>GET: {{ name }}</h2>
+                        <h3>GET: {{ name }}</h3>
 
                         <div class="btn-group format-selection">
                             <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>
                             {% for format in available_formats %}
                                 {% with FORMAT_PARAM|add:"="|add:format as param %}
-                                <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>
+                                    <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 %}
                             {% endfor %}
                         </div>
@@ -105,7 +112,7 @@
                 {% 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'>
-                        <h2>POST: {{ name }}</h2>
+                            <h3>POST: {{ name }}</h3>
                             {% csrf_token %}
                             {{ post_form.non_field_errors }}
                             {% for field in post_form %}
@@ -125,7 +132,7 @@
                 {% 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>
+                            <h3>PUT: {{ name }}</h3>
                             <input type="hidden" name="{{ api_settings.FORM_METHOD_OVERRIDE }}" value="PUT" />
                             {% csrf_token %}
                             {{ put_form.non_field_errors }}
@@ -147,7 +154,7 @@
                 {% if 'DELETE' in allowed_methods and api_settings.FORM_METHOD_OVERRIDE %}
                         <form action="{{ request.get_full_path }}" method="POST">
                         <fieldset class='module aligned'>
-                        <h2>DELETE: {{ name }}</h2>
+                            <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>
@@ -163,7 +170,11 @@
     </div>
     <!-- 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>
     <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>