Add tabbed changeform support (#211).

* WIP : basic templates

* Add params

* Working override

* Use headerless version only during tabs

* Move CSS to separate file

* Extract js to static folder

* script is not self-closing

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* use classList for updating classes

* Add EOF (newline) to new text files

* a simple test to keep up code coverage

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Fieldsets are not tabbed by default

* rename templatetag

* use default page if show_*_tabs are false

* Narrow down css to admin-interface

* Fix typo

* keep codacy happy

* prefix tab classes with tabbed-changeform-

* horizontal scrolling

* Update colors

* color updates

* add back missing font bold

Co-authored-by: vaz <vmohan@lenbox.io>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

admin_interface/static/admin_interface/css/tabbed-changeform.css

@@ -0,0 +1,35 @@
+.admin-interface .tabbed-changeform-tab {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+}
+
+.admin-interface .tabbed-changeform-tab button {
+    border: none;
+    border-bottom: 1px solid var(--border-color) ;
+    flex-shrink: 0;
+    flex-grow: 0;
+    cursor: pointer;
+    padding: 8px 12px;
+    background-color: var(--admin-interface-module-header-text-color);
+    color: var(--admin-interface-module-background-color);
+}
+
+.admin-interface .tabbed-changeform-tab button.active {
+    font-weight: bold;
+    border: 1px solid var(--border-color) ;
+    border-bottom: none;
+    border-radius: var(--admin-interface-module-border-radius);
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
+}
+
+.admin-interface .tabbed-changeform-tabcontent {
+    display: none;
+    padding: 1em 0;
+}
+
+.admin-interface .tabbed-changeform-tabcontent.active {
+    display: block;
+}

admin_interface/static/admin_interface/js/tabbed_changeform.js

@@ -0,0 +1,14 @@
+
+function openTab(evt, tabName) {
+  var tabcontents, tablinks;
+  tabcontents = document.getElementsByClassName("tabbed-changeform-tabcontent");
+  for (let tabcontent of tabcontents) {
+    tabcontent.classList.remove("active");
+  }
+  tablinks = document.getElementsByClassName("tabbed-changeform-tablinks");
+  for (let tablink of tablinks) {
+    tablink.classList.remove("active");
+  }
+  document.getElementById(tabName).classList.add("active");
+  evt.currentTarget.classList.add("active");
+}