Apply Bootstrap to in-page request forms.

Includes tooltips using the title attributes.
This commit is contained in:
Alec Perkins 2012-09-07 16:49:55 -04:00
parent 338479ffbd
commit c499fa0010

View File

@ -65,10 +65,10 @@
<div id="content" class="{% block coltype %}colM{% endblock %}"> <div id="content" class="{% block coltype %}colM{% endblock %}">
{% 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"> <form action="{{ request.get_full_path }}" method="post" class="pull-right">
{% csrf_token %} {% csrf_token %}
<input type="hidden" name="{{ api_settings.FORM_METHOD_OVERRIDE }}" value="OPTIONS" /> <input type="hidden" name="{{ api_settings.FORM_METHOD_OVERRIDE }}" value="OPTIONS" />
<input type="submit" value="OPTIONS" class="default" /> <button class="btn">OPTIONS</button>
</form> </form>
{% endif %} {% endif %}
@ -85,15 +85,17 @@
{% if 'GET' in allowed_methods %} {% if 'GET' in allowed_methods %}
<form> <form>
<fieldset class='module aligned'> <fieldset class='module aligned'>
<h2>GET {{ name }}</h2> <h2>GET: {{ name }}</h2>
<div class='submit-row' style='margin: 0; border: 0'>
<a href='{{ request.get_full_path }}' rel="nofollow" style='float: left'>GET</a> <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 %} {% for format in available_formats %}
{% with FORMAT_PARAM|add:"="|add:format as param %} {% with FORMAT_PARAM|add:"="|add:format as param %}
[<a href='{{ request.get_full_path|add_query_param:param }}' rel="nofollow">{{ format }}</a>] <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 %} {% endwith %}
{% endfor %} {% endfor %}
</div> </div>
</fieldset> </fieldset>
</form> </form>
{% endif %} {% endif %}
@ -107,7 +109,7 @@
{% if 'POST' in allowed_methods %} {% if 'POST' in allowed_methods %}
<form action="{{ request.get_full_path }}" method="POST" {% if post_form.is_multipart %}enctype="multipart/form-data"{% endif %}> <form action="{{ request.get_full_path }}" method="POST" {% if post_form.is_multipart %}enctype="multipart/form-data"{% endif %}>
<fieldset class='module aligned'> <fieldset class='module aligned'>
<h2>POST {{ name }}</h2> <h2>POST: {{ name }}</h2>
{% csrf_token %} {% csrf_token %}
{{ post_form.non_field_errors }} {{ post_form.non_field_errors }}
{% for field in post_form %} {% for field in post_form %}
@ -118,9 +120,8 @@
{{ field.errors }} {{ field.errors }}
</div> </div>
{% endfor %} {% endfor %}
<div class='submit-row' style='margin: 0; border: 0'>
<input type="submit" value="POST" class="default" /> <button class="btn btn-primary">POST</button>
</div>
</fieldset> </fieldset>
</form> </form>
{% endif %} {% endif %}
@ -128,7 +129,7 @@
{% if 'PUT' in allowed_methods and api_settings.FORM_METHOD_OVERRIDE %} {% 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 %}> <form action="{{ request.get_full_path }}" method="POST" {% if put_form.is_multipart %}enctype="multipart/form-data"{% endif %}>
<fieldset class='module aligned'> <fieldset class='module aligned'>
<h2>PUT {{ name }}</h2> <h2>PUT: {{ name }}</h2>
<input type="hidden" name="{{ api_settings.FORM_METHOD_OVERRIDE }}" value="PUT" /> <input type="hidden" name="{{ api_settings.FORM_METHOD_OVERRIDE }}" value="PUT" />
{% csrf_token %} {% csrf_token %}
{{ put_form.non_field_errors }} {{ put_form.non_field_errors }}
@ -140,9 +141,9 @@
{{ field.errors }} {{ field.errors }}
</div> </div>
{% endfor %} {% endfor %}
<div class='submit-row' style='margin: 0; border: 0'>
<input type="submit" value="PUT" class="default" /> <button class="btn btn-primary">PUT</button>
</div>
</fieldset> </fieldset>
</form> </form>
{% endif %} {% endif %}
@ -150,12 +151,10 @@
{% if 'DELETE' in allowed_methods and api_settings.FORM_METHOD_OVERRIDE %} {% if 'DELETE' in allowed_methods and api_settings.FORM_METHOD_OVERRIDE %}
<form action="{{ request.get_full_path }}" method="POST"> <form action="{{ request.get_full_path }}" method="POST">
<fieldset class='module aligned'> <fieldset class='module aligned'>
<h2>DELETE {{ name }}</h2> <h2>DELETE: {{ name }}</h2>
{% csrf_token %} {% csrf_token %}
<input type="hidden" name="{{ api_settings.FORM_METHOD_OVERRIDE }}" value="DELETE" /> <input type="hidden" name="{{ api_settings.FORM_METHOD_OVERRIDE }}" value="DELETE" />
<div class='submit-row' style='margin: 0; border: 0'> <button class="btn btn-danger">DELETE</button>
<input type="submit" value="DELETE" class="default" />
</div>
</fieldset> </fieldset>
</form> </form>
{% endif %} {% endif %}
@ -172,5 +171,10 @@
</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>
<script>
$('.js-tooltip').tooltip({
delay: 1000
});
</script>
</body> </body>
</html> </html>