From 8492841ed333a41c0fcc8dd789bb062fab4cb0e9 Mon Sep 17 00:00:00 2001
From: David Smith <smithdc@gmail.com>
Date: Sat, 11 Jul 2020 08:35:03 +0100
Subject: [PATCH] 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
---
 .../rest_framework/css/bootstrap-tweaks.css   | 15 ------
 .../templates/rest_framework/base.html        | 50 +++++++++----------
 .../rest_framework/raw_data_form.html         |  4 +-
 3 files changed, 27 insertions(+), 42 deletions(-)

diff --git a/rest_framework/static/rest_framework/css/bootstrap-tweaks.css b/rest_framework/static/rest_framework/css/bootstrap-tweaks.css
index 454d089da..e626a7735 100644
--- a/rest_framework/static/rest_framework/css/bootstrap-tweaks.css
+++ b/rest_framework/static/rest_framework/css/bootstrap-tweaks.css
@@ -124,21 +124,6 @@ html, body {
   margin-bottom: 0;
 }
 
-.well {
-  -webkit-box-shadow: none;
-     -moz-box-shadow: none;
-          box-shadow: none;
-}
-
-.well .form-actions {
-  padding-bottom: 0;
-  margin-bottom: 0;
-}
-
-.well form {
-  margin-bottom: 0;
-}
-
 .nav-tabs {
   border: 0;
 }
diff --git a/rest_framework/templates/rest_framework/base.html b/rest_framework/templates/rest_framework/base.html
index 353a27f40..2a36d90fe 100644
--- a/rest_framework/templates/rest_framework/base.html
+++ b/rest_framework/templates/rest_framework/base.html
@@ -182,26 +182,26 @@
               {% if post_form or raw_data_post_form %}
                 <div {% if post_form %}class="tabbable"{% endif %}>
                   {% if post_form %}
-                    <ul class="nav nav-tabs form-switcher">
-                      <li>
-                        <a name='html-tab' href="#post-object-form" data-toggle="tab">HTML form</a>
+                    <ul class="nav nav-tabs justify-content-end" role="tablist">
+                      <li class="nav-item" role="presentation">
+                        <a class="nav-link active" name='html-tab' href="#post-object-form" data-toggle="tab" role="tab">HTML form</a>
                       </li>
-                      <li>
-                        <a name='raw-tab' href="#post-generic-content-form" data-toggle="tab">Raw data</a>
+                      <li class="nav-item" role="presentation">
+                        <a class="nav-link" name='raw-tab' href="#post-generic-content-form" data-toggle="tab" role="tab">Raw data</a>
                       </li>
                     </ul>
                   {% endif %}
 
-                  <div class="well tab-content">
+                  <div class="tab-content p-4 bg-light border">
                     {% if post_form %}
-                      <div class="tab-pane" id="post-object-form">
+                      <div class="tab-pane active" id="post-object-form" role="tabpanel">
                         {% with form=post_form %}
-                          <form action="{{ request.get_full_path }}" method="POST" enctype="multipart/form-data" class="form-horizontal" novalidate>
+                          <form action="{{ request.get_full_path }}" method="POST" enctype="multipart/form-data" novalidate>
                             <fieldset>
                               {% csrf_token %}
                               {{ post_form }}
                               <div class="form-actions">
-                                <button class="btn btn-primary js-tooltip" title="Make a POST request on the {{ name }} resource">POST</button>
+                                <button class="btn btn-primary" data-toggle="tooltip" title="Make a POST request on the {{ name }} resource">POST</button>
                               </div>
                             </fieldset>
                           </form>
@@ -209,13 +209,13 @@
                       </div>
                     {% endif %}
 
-                    <div {% if post_form %}class="tab-pane"{% endif %} id="post-generic-content-form">
+                    <div {% if post_form %}class="tab-pane"{% endif %} id="post-generic-content-form" role="tabpanel">
                       {% with form=raw_data_post_form %}
-                        <form action="{{ request.get_full_path }}" method="POST" class="form-horizontal">
+                        <form action="{{ request.get_full_path }}" method="POST">
                           <fieldset>
                             {% include "rest_framework/raw_data_form.html" %}
                             <div class="form-actions">
-                              <button class="btn btn-primary js-tooltip" title="Make a POST request on the {{ name }} resource">POST</button>
+                              <button class="btn btn-primary" data-toggle="tooltip" title="Make a POST request on the {{ name }} resource">POST</button>
                             </div>
                           </fieldset>
                         </form>
@@ -228,41 +228,41 @@
               {% if put_form or raw_data_put_form or raw_data_patch_form %}
                 <div {% if put_form %}class="tabbable"{% endif %}>
                   {% if put_form %}
-                    <ul class="nav nav-tabs form-switcher">
-                      <li>
-                        <a name='html-tab' href="#put-object-form" data-toggle="tab">HTML form</a>
+                    <ul class="nav nav-tabs justify-content-end" role="tablist">
+                      <li class="nav-item" role="presentation">
+                        <a class="nav-link active" name='html-tab' href="#put-object-form" data-toggle="tab" role="tab">HTML form</a>
                       </li>
-                      <li>
-                        <a  name='raw-tab' href="#put-generic-content-form" data-toggle="tab">Raw data</a>
+                      <li class="nav-item" role="presentation">
+                        <a class="nav-link" name='raw-tab' href="#put-generic-content-form" data-toggle="tab" role="tab">Raw data</a>
                       </li>
                     </ul>
                   {% endif %}
 
-                  <div class="well tab-content">
+                  <div class="tab-content p-4 bg-light border">
                     {% if put_form %}
-                      <div class="tab-pane" id="put-object-form">
-                        <form action="{{ request.get_full_path }}" data-method="PUT" enctype="multipart/form-data" class="form-horizontal" novalidate>
+                      <div class="tab-pane active" id="put-object-form" role="tabpanel">
+                        <form action="{{ request.get_full_path }}" data-method="PUT" enctype="multipart/form-data" novalidate>
                           <fieldset>
                             {{ put_form }}
                             <div class="form-actions">
-                              <button class="btn btn-primary js-tooltip" title="Make a PUT request on the {{ name }} resource">PUT</button>
+                              <button class="btn btn-primary" data-toggle="tooltip" title="Make a PUT request on the {{ name }} resource">PUT</button>
                             </div>
                           </fieldset>
                         </form>
                       </div>
                     {% endif %}
 
-                    <div {% if put_form %}class="tab-pane"{% endif %} id="put-generic-content-form">
+                    <div {% if put_form %}class="tab-pane"{% endif %} id="put-generic-content-form" role="tabpanel">
                       {% with form=raw_data_put_or_patch_form %}
-                        <form action="{{ request.get_full_path }}" data-method="PUT" class="form-horizontal">
+                        <form action="{{ request.get_full_path }}" data-method="PUT">
                           <fieldset>
                             {% include "rest_framework/raw_data_form.html" %}
                             <div class="form-actions">
                               {% if raw_data_put_form %}
-                                <button class="btn btn-primary js-tooltip" title="Make a PUT request on the {{ name }} resource">PUT</button>
+                                <button class="btn btn-primary" data-toggle="tooltip" title="Make a PUT request on the {{ name }} resource">PUT</button>
                               {% endif %}
                               {% if raw_data_patch_form %}
-                              <button data-method="PATCH" class="btn btn-primary js-tooltip" title="Make a PATCH request on the {{ name }} resource">PATCH</button>
+                              <button data-method="PATCH" class="btn btn-primary" data-toggle="tooltip" title="Make a PATCH request on the {{ name }} resource">PATCH</button>
                                 {% endif %}
                             </div>
                           </fieldset>
diff --git a/rest_framework/templates/rest_framework/raw_data_form.html b/rest_framework/templates/rest_framework/raw_data_form.html
index d27983206..d38585435 100644
--- a/rest_framework/templates/rest_framework/raw_data_form.html
+++ b/rest_framework/templates/rest_framework/raw_data_form.html
@@ -1,8 +1,8 @@
 {% load rest_framework %}
 {{ form.non_field_errors }}
 {% for field in form %}
-  <div class="form-group">
-    {{ field.label_tag|add_class:"col-sm-2 control-label" }}
+  <div class="row mb-3">
+    {{ field.label_tag|add_class:"col-sm-2 col-form-label" }}
     <div class="col-sm-10">
       {{ field|add_class:"form-control" }}
       <span class="help-block">{{ field.help_text|safe }}</span>