static: js: css: Make multiple select fields work with Django 4.0

Closes: #2228.

- Django 4.0 changed to using <div> instead of using <ul> and <li> for multiple
choice select fields. Update code for the select-all button to work with the new
HTML structure.

- Add styling to ensure that multiple choice select field appears similar to
previous <ul> and <li> based style.

- This patch assumes that django-bootstrap-form has support for Django 4.0 as
seen in tzangms/django-bootstrap-form#110 .

Tests:

- Radio select seem to have no issues. Checked in networks -> connection type
page.

- Open Backups -> Create backup page and ensure that select all button works
and appears same on testing (Django 3.2) and unstable (Django 4.0).

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>

static/themes/default/css/main.css

@@ -202,6 +202,10 @@ body {
  list-style-type: none;
 }
 
+.multiple-checkbox > div {
+ padding-left: 40px;
+}
+
 .navbar .fa:not(.fa-bars) {
  margin-right: 0.25rem;
 }

static/themes/default/js/main.js

@@ -126,9 +126,14 @@ window.addEventListener('pageshow', function(event) {
  * Select all option for multiple checkboxes.
  */
 document.addEventListener('DOMContentLoaded', function(event) {
- let parents = document.querySelectorAll('ul.has-select-all');
+ // Django < 4.0 generates <ul> and <li> where as Django >= 4.0 generates <div>s
+ let parents = document.querySelectorAll('ul.has-select-all,div.has-select-all');
  for (const parent of parents) {
- let li = document.createElement('li');
+ let childElementType = 'div';
+ if (parent.tagName.toLowerCase() == 'ul')
+ childElementType = 'li';
+
+ let selectAllItem = document.createElement(childElementType);
 
  let label = document.createElement('label');
  label.for = "select_all";
@@ -139,9 +144,9 @@ document.addEventListener('DOMContentLoaded', function(event) {
  checkbox.setAttribute('class', 'select-all');
 
  label.appendChild(checkbox);
- li.appendChild(label);
+ selectAllItem.appendChild(label);
 
- parent.insertBefore(li, parent.childNodes[0]);
+ parent.insertBefore(selectAllItem, parent.childNodes[0]);
  setSelectAllValue(parent);
 
  checkbox.addEventListener('change', onSelectAllChanged);