Skip to content

Commit 24da323

Browse files
smithdc1smithdc1
committed
HTML/Raw data forms
* form-horizontal is no longer used. Need to use the grid. aligned tabs right Raw Data Form * Use grid / rows to space form. form-group has been deprecated in favour of utility classes. Replaced `well` class (background colour/border) with bootstrap utility classes
1 parent 09483aa commit 24da323

File tree

3 files changed

+27
-42
lines changed

3 files changed

+27
-42
lines changed

‎rest_framework/static/rest_framework/css/bootstrap-tweaks.css

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -124,21 +124,6 @@ html, body {
124124
margin-bottom: 0;
125125
}
126126

127-
.well {
128-
-webkit-box-shadow: none;
129-
-moz-box-shadow: none;
130-
box-shadow: none;
131-
}
132-
133-
.well .form-actions {
134-
padding-bottom: 0;
135-
margin-bottom: 0;
136-
}
137-
138-
.well form {
139-
margin-bottom: 0;
140-
}
141-
142127
.nav-tabs {
143128
border: 0;
144129
}

‎rest_framework/templates/rest_framework/base.html

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -182,40 +182,40 @@ <h1 class="align-text-top">{{ name }}</h1>
182182
{% if post_form or raw_data_post_form %}
183183
<div {% if post_form %}class="tabbable"{% endif %}>
184184
{% if post_form %}
185-
<ul class="nav nav-tabs form-switcher">
186-
<li>
187-
<a name='html-tab' href="#post-object-form" data-toggle="tab">HTML form</a>
185+
<ul class="nav nav-tabs justify-content-end" role="tablist">
186+
<li class="nav-item" role="presentation">
187+
<a class="nav-link active" name='html-tab' href="#post-object-form" data-toggle="tab" role="tab">HTML form</a>
188188
</li>
189-
<li>
190-
<a name='raw-tab' href="#post-generic-content-form" data-toggle="tab">Raw data</a>
189+
<li class="nav-item" role="presentation">
190+
<a class="nav-link" name='raw-tab' href="#post-generic-content-form" data-toggle="tab" role="tab">Raw data</a>
191191
</li>
192192
</ul>
193193
{% endif %}
194194

195-
<div class="well tab-content">
195+
<div class="tab-content p-4 bg-light border">
196196
{% if post_form %}
197-
<div class="tab-pane" id="post-object-form">
197+
<div class="tab-pane active" id="post-object-form" role="tabpanel">
198198
{% with form=post_form %}
199-
<form action="{{ request.get_full_path }}" method="POST" enctype="multipart/form-data" class="form-horizontal" novalidate>
199+
<form action="{{ request.get_full_path }}" method="POST" enctype="multipart/form-data" novalidate>
200200
<fieldset>
201201
{% csrf_token %}
202202
{{ post_form }}
203203
<div class="form-actions">
204-
<button class="btn btn-primary js-tooltip" title="Make a POST request on the {{ name }} resource">POST</button>
204+
<button class="btn btn-primary" data-toggle="tooltip" title="Make a POST request on the {{ name }} resource">POST</button>
205205
</div>
206206
</fieldset>
207207
</form>
208208
{% endwith %}
209209
</div>
210210
{% endif %}
211211

212-
<div {% if post_form %}class="tab-pane"{% endif %} id="post-generic-content-form">
212+
<div {% if post_form %}class="tab-pane"{% endif %} id="post-generic-content-form" role="tabpanel">
213213
{% with form=raw_data_post_form %}
214-
<form action="{{ request.get_full_path }}" method="POST" class="form-horizontal">
214+
<form action="{{ request.get_full_path }}" method="POST">
215215
<fieldset>
216216
{% include "rest_framework/raw_data_form.html" %}
217217
<div class="form-actions">
218-
<button class="btn btn-primary js-tooltip" title="Make a POST request on the {{ name }} resource">POST</button>
218+
<button class="btn btn-primary" data-toggle="tooltip" title="Make a POST request on the {{ name }} resource">POST</button>
219219
</div>
220220
</fieldset>
221221
</form>
@@ -228,41 +228,41 @@ <h1 class="align-text-top">{{ name }}</h1>
228228
{% if put_form or raw_data_put_form or raw_data_patch_form %}
229229
<div {% if put_form %}class="tabbable"{% endif %}>
230230
{% if put_form %}
231-
<ul class="nav nav-tabs form-switcher">
232-
<li>
233-
<a name='html-tab' href="#put-object-form" data-toggle="tab">HTML form</a>
231+
<ul class="nav nav-tabs justify-content-end" role="tablist">
232+
<li class="nav-item" role="presentation">
233+
<a class="nav-link active" name='html-tab' href="#put-object-form" data-toggle="tab" role="tab">HTML form</a>
234234
</li>
235-
<li>
236-
<a name='raw-tab' href="#put-generic-content-form" data-toggle="tab">Raw data</a>
235+
<li class="nav-item" role="presentation">
236+
<a class="nav-link" name='raw-tab' href="#put-generic-content-form" data-toggle="tab" role="tab">Raw data</a>
237237
</li>
238238
</ul>
239239
{% endif %}
240240

241-
<div class="well tab-content">
241+
<div class="tab-content p-4 bg-light border">
242242
{% if put_form %}
243-
<div class="tab-pane" id="put-object-form">
244-
<form action="{{ request.get_full_path }}" data-method="PUT" enctype="multipart/form-data" class="form-horizontal" novalidate>
243+
<div class="tab-pane active" id="put-object-form" role="tabpanel">
244+
<form action="{{ request.get_full_path }}" data-method="PUT" enctype="multipart/form-data" novalidate>
245245
<fieldset>
246246
{{ put_form }}
247247
<div class="form-actions">
248-
<button class="btn btn-primary js-tooltip" title="Make a PUT request on the {{ name }} resource">PUT</button>
248+
<button class="btn btn-primary" data-toggle="tooltip" title="Make a PUT request on the {{ name }} resource">PUT</button>
249249
</div>
250250
</fieldset>
251251
</form>
252252
</div>
253253
{% endif %}
254254

255-
<div {% if put_form %}class="tab-pane"{% endif %} id="put-generic-content-form">
255+
<div {% if put_form %}class="tab-pane"{% endif %} id="put-generic-content-form" role="tabpanel">
256256
{% with form=raw_data_put_or_patch_form %}
257-
<form action="{{ request.get_full_path }}" data-method="PUT" class="form-horizontal">
257+
<form action="{{ request.get_full_path }}" data-method="PUT">
258258
<fieldset>
259259
{% include "rest_framework/raw_data_form.html" %}
260260
<div class="form-actions">
261261
{% if raw_data_put_form %}
262-
<button class="btn btn-primary js-tooltip" title="Make a PUT request on the {{ name }} resource">PUT</button>
262+
<button class="btn btn-primary" data-toggle="tooltip" title="Make a PUT request on the {{ name }} resource">PUT</button>
263263
{% endif %}
264264
{% if raw_data_patch_form %}
265-
<button data-method="PATCH" class="btn btn-primary js-tooltip" title="Make a PATCH request on the {{ name }} resource">PATCH</button>
265+
<button data-method="PATCH" class="btn btn-primary" data-toggle="tooltip" title="Make a PATCH request on the {{ name }} resource">PATCH</button>
266266
{% endif %}
267267
</div>
268268
</fieldset>

‎rest_framework/templates/rest_framework/raw_data_form.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{% load rest_framework %}
22
{{ form.non_field_errors }}
33
{% for field in form %}
4-
<div class="form-group">
5-
{{ field.label_tag|add_class:"col-sm-2 control-label" }}
4+
<div class="row mb-3">
5+
{{ field.label_tag|add_class:"col-sm-2 col-form-label" }}
66
<div class="col-sm-10">
77
{{ field|add_class:"form-control" }}
88
<span class="help-block">{{ field.help_text|safe }}</span>

0 commit comments

Comments
 (0)