Fixed #31349 -- Used :nth-child() CSS pseudo-class to style alternati…

…ve rows in admin.

django/contrib/admin/static/admin/css/base.css

@@ -284,14 +284,14 @@ tr.alt {
     background: #f6f6f6;
 }
 
-.row1, .row-form-errors {
+tr:nth-child(odd), .row-form-errors {
     background: #fff;
 }
 
-.row2,
-.row2 .errorlist,
-.row1 + .row-form-errors,
-.row1 + .row-form-errors .errorlist {
+tr:nth-child(even),
+tr:nth-child(even) .errorlist,
+tr:nth-child(odd) + .row-form-errors,
+tr:nth-child(odd) + .row-form-errors .errorlist {
     background: #f9f9f9;
 }
 

django/contrib/admin/static/admin/js/inlines.js

@@ -203,11 +203,6 @@
     // Tabular inlines ---------------------------------------------------------
     $.fn.tabularFormset = function(selector, options) {
         var $rows = $(this);
-        var alternatingRows = function(row) {
-            $(selector).not(".add-row").removeClass("row1 row2")
-                .filter(":even").addClass("row1").end()
-                .filter(":odd").addClass("row2");
-        };
 
         var reinitDateTimeShortCuts = function() {
             // Reinitialize the calendar and clock widgets by force
@@ -254,12 +249,10 @@
             deleteCssClass: "inline-deletelink",
             deleteText: options.deleteText,
             emptyCssClass: "empty-form",
-            removed: alternatingRows,
             added: function(row) {
                 initPrepopulatedFields(row);
                 reinitDateTimeShortCuts();
                 updateSelectFilter();
-                alternatingRows(row);
             },
             addButton: options.addButton
         });

django/contrib/admin/templates/admin/change_list_results.html

@@ -30,7 +30,7 @@
 {% if result.form and result.form.non_field_errors %}
     <tr><td colspan="{{ result|length }}">{{ result.form.non_field_errors }}</td></tr>
 {% endif %}
-<tr class="{% cycle 'row1' 'row2' %}">{% for item in result %}{{ item }}{% endfor %}</tr>
+<tr>{% for item in result %}{{ item }}{% endfor %}</tr>
 {% endfor %}
 </tbody>
 </table>

django/contrib/admin/templates/admin/edit_inline/tabular.html

@@ -25,7 +25,7 @@ <h2>{{ inline_admin_formset.opts.verbose_name_plural|capfirst }}</h2>
         {% if inline_admin_form.form.non_field_errors %}
         <tr class="row-form-errors"><td colspan="{{ inline_admin_form|cell_count }}">{{ inline_admin_form.form.non_field_errors }}</td></tr>
         {% endif %}
-        <tr class="form-row {% cycle "row1" "row2" %} {% if inline_admin_form.original or inline_admin_form.show_url %}has_original{% endif %}{% if forloop.last and inline_admin_formset.has_add_permission %} empty-form{% endif %}"
+        <tr class="form-row {% if inline_admin_form.original or inline_admin_form.show_url %}has_original{% endif %}{% if forloop.last and inline_admin_formset.has_add_permission %} empty-form{% endif %}"
              id="{{ inline_admin_formset.formset.prefix }}-{% if not forloop.last %}{{ forloop.counter0 }}{% else %}empty{% endif %}">
         <td class="original">
           {% if inline_admin_form.original or inline_admin_form.show_url %}<p>

docs/releases/3.1.txt

@@ -500,6 +500,9 @@ Miscellaneous
 * :djadmin:`migrate` management command now runs the ``database`` system checks
   only for a database to migrate.
 
+* The admin CSS classes ``row1`` and ``row2`` are removed in favor of
+  ``:nth-child(odd)`` and ``:nth-child(even)`` pseudo-classes.
+
 .. _deprecated-features-3.1:
 
 Features deprecated in 3.1

js_tests/admin/inlines.test.js

@@ -28,14 +28,14 @@ QUnit.test('add form', function(assert) {
     var addButton = this.table.find('.add-row a');
     assert.equal(addButton.text(), this.addText);
     addButton.click();
-    assert.ok(this.table.find('#first-1').hasClass('row2'));
+    assert.ok(this.table.find('#first-1'));
 });
 
 QUnit.test('added form has remove button', function(assert) {
     var addButton = this.table.find('.add-row a');
     assert.equal(addButton.text(), this.addText);
     addButton.click();
-    assert.equal(this.table.find('#first-1.row2 .inline-deletelink').length, 1);
+    assert.equal(this.table.find('#first-1 .inline-deletelink').length, 1);
 });
 
 QUnit.test('add/remove form events', function(assert) {
@@ -45,11 +45,11 @@ QUnit.test('add/remove form events', function(assert) {
     var addButton = this.table.find('.add-row a');
     $document.on('formset:added', function(event, $row, formsetName) {
         assert.ok(true, 'event `formset:added` triggered');
-        assert.equal(true, $row.is($('.row2')));
+        assert.equal(true, $row.is('#first-1'));
         assert.equal(formsetName, 'first');
     });
     addButton.click();
-    var deletedRow = $('.row2');
+    var deletedRow = $('#first-1');
     var deleteLink = this.table.find('.inline-deletelink');
     $document.on('formset:removed', function(event, $row, formsetName) {
         assert.ok(true, 'event `formset:removed` triggered');
@@ -74,7 +74,7 @@ QUnit.test('existing add button', function(assert) {
     });
     assert.equal(this.table.find('.add-row a').length, 0);
     addButton.click();
-    assert.ok(this.table.find('#first-1').hasClass('row2'));
+    assert.ok(this.table.find('#first-1'));
 });
 
 
@@ -125,22 +125,6 @@ QUnit.test('removing a form-row also removed related row with non-field errors',
     assert.notOk(this.table.find('.row-form-errors').length);
 });
 
-QUnit.test('removing and adding a row keeps cycling row1 and row2 classes', function(assert) {
-    var $ = django.jQuery;
-    var tr = this.inlineRows.slice(1, 2);
-    var deleteLink = tr.find('a.inline-deletelink');
-    var addLink = this.table.find('.add-row > td > a');
-    assert.ok(this.table.find('tr.form-row:even').hasClass('row1'));
-    assert.ok(this.table.find('tr.form-row:odd').hasClass('row2'));
-    deleteLink.trigger($.Event('click', {target: deleteLink}));
-    assert.ok(this.table.find('tr.form-row:even').hasClass('row1'));
-    assert.ok(this.table.find('tr.form-row:odd').hasClass('row2'));
-    addLink.trigger($.Event('click', {target: addLink}));
-    assert.ok(this.table.find('tr.form-row:even').hasClass('row1'));
-    assert.ok(this.table.find('tr.form-row:odd').hasClass('row2'));
-});
-
-
 QUnit.module('admin.inlines: tabular formsets with max_num', {
     beforeEach: function() {
         var $ = django.jQuery;

js_tests/tests.html

@@ -28,7 +28,7 @@
         <input id="id_first-TOTAL_FORMS" value="1">
         <input id="id_first-MAX_NUM_FORMS" value="">
         <table class="inline">
-            <tr id="first-0" class="form-row row1">
+            <tr id="first-0" class="form-row">
                 <td class="field-test_field">
                     <input id="id_first-0-test_field">
                 </td>
@@ -47,7 +47,7 @@
                 <input id="id_second-MAX_NUM_FORMS" value="">
                 <input id="id_second-MIN_NUM_FORMS" value="">
                 <table class="inline">
-                    <tr id="second-0" class="form-row has_original row1">
+                    <tr id="second-0" class="form-row has_original">
                         <td class="field-test_field">
                             <input id="id_second-0-test_field">
                         </td>
@@ -62,7 +62,7 @@
                         </ul>
                       </td>
                     </tr>
-                    <tr id="second-1" class="form-row row2">
+                    <tr id="second-1" class="form-row">
                         <td class="field-test_field">
                             <input id="id_second-1-test_field">
                         </td>

tests/admin_changelist/tests.py

@@ -40,7 +40,7 @@
 
 def build_tbody_html(pk, href, extra_fields):
     return (
-        '<tbody><tr class="row1">'
+        '<tbody><tr>'
         '<td class="action-checkbox">'
         '<input type="checkbox" name="_selected_action" value="{}" '
         'class="action-select"></td>'

tests/admin_inlines/tests.py

@@ -1205,20 +1205,6 @@ def test_delete_inlines(self):
         self.assertEqual(len(self.selenium.find_elements_by_css_selector(
             'form#profilecollection_form tr.dynamic-profile_set#profile_set-2')), 1)
 
-    def test_alternating_rows(self):
-        self.admin_login(username='super', password='secret')
-        self.selenium.get(self.live_server_url + reverse('admin:admin_inlines_profilecollection_add'))
-
-        # Add a few inlines
-        self.selenium.find_element_by_link_text('Add another Profile').click()
-        self.selenium.find_element_by_link_text('Add another Profile').click()
-
-        row_selector = 'form#profilecollection_form tr.dynamic-profile_set'
-        self.assertEqual(len(self.selenium.find_elements_by_css_selector(
-            "%s.row1" % row_selector)), 2, msg="Expect two row1 styled rows")
-        self.assertEqual(len(self.selenium.find_elements_by_css_selector(
-            "%s.row2" % row_selector)), 1, msg="Expect one row2 styled row")
-
     def test_collapsed_inlines(self):
         # Collapsed inlines have SHOW/HIDE links.
         self.admin_login(username='super', password='secret')

tests/admin_views/templates/admin/admin_views/article/change_list_results.html

@@ -30,7 +30,7 @@
 {% if result.form.non_field_errors %}
     <tr><td colspan="{{ result|length }}">{{ result.form.non_field_errors }}</td></tr>
 {% endif %}
-<tr class="{% cycle 'row1' 'row2' %}">{% for item in result %}{{ item }}{% endfor %}</tr>
+<tr>{% for item in result %}{{ item }}{% endfor %}</tr>
 {% endfor %}
 </tbody>
 </table>