And more bs5 stuff

- Legacy-Id: 19717

ietf/static/css/select2.scss

@@ -0,0 +1,5 @@
+@import "~/node_modules/bootstrap/scss/functions";
+@import "~/node_modules/bootstrap/scss/variables";
+@import "~/node_modules/bootstrap/scss/mixins";
+@import "node_modules/select2/src/scss/core";
+@import "node_modules/select2-bootstrap-5-theme/src/include-all";

ietf/static/js/flot.js

@@ -1 +1 @@
-import "~/node_modules/flot";
+import "flot";

ietf/static/js/highcharts-export-data.js

@@ -1 +1 @@
-import "~/node_modules/highcharts/modules/export-data";
+import "highcharts/modules/export-data";

ietf/static/js/highcharts-exporting.js

@@ -1 +1 @@
-import "~/node_modules/highcharts/modules/exporting";
+import "highcharts/modules/exporting";

ietf/static/js/highcharts-highcharts.js

@@ -1,3 +1,3 @@
-import * as Highcharts from "~/node_modules/highcharts";
+import * as Highcharts from "highcharts";
 
 window.Highcharts = Highcharts;

ietf/static/js/highcharts-highstock.js

@@ -1,3 +1,3 @@
-import * as Highcharts from "~/node_modules/highcharts/highstock";
+import * as Highcharts from "highcharts/highstock";
 
 window.Highcharts = Highcharts;

ietf/static/js/highcharts-offline-exporting.js

@@ -1 +1 @@
-import "~/node_modules/highcharts/modules/offline-exporting";
+import "highcharts/modules/offline-exporting";

ietf/static/js/ietf.js

@@ -123,6 +123,11 @@ $(document)
             var last_level;
             var nav;
 
+            $("body")
+                .attr("data-bs-spy", "scroll")
+                .attr("data-bs-target", "#righthand-nav")
+                .scrollspy("refresh");
+
             $("#content")
                 .attr("data-bs-offset", 0)
                 .attr("tabindex", 0)

ietf/static/js/liaisons.js

@@ -0,0 +1,334 @@
+var attachmentWidget = {
+    button: null,
+    config: {},
+    count: 0,
+
+    readConfig: function () {
+        var buttonFormGroup = attachmentWidget.button.parents('.form-group');
+        var disabledLabel = buttonFormGroup.find('.attachDisabledLabel');
+
+        if (disabledLabel.length) {
+            attachmentWidget.config.disabledLabel = disabledLabel.html();
+            var required = [];
+            buttonFormGroup.find('.attachRequiredField')
+                .each(function (index, field) {
+                    required.push('#' + $(field)
+                        .text());
+                });
+            attachmentWidget.config.basefields = $(required.join(","));
+        }
+
+        attachmentWidget.config.showOn = $('#' + buttonFormGroup.find('.showAttachsOn')
+            .html());
+        attachmentWidget.config.showOnDisplay = attachmentWidget.config.showOn.find('.attachedFiles');
+        attachmentWidget.count = attachmentWidget.config.showOnDisplay.find('.initialAttach')
+            .length;
+        attachmentWidget.config.showOnEmpty = attachmentWidget.config.showOn.find('.showAttachmentsEmpty')
+            .html();
+        attachmentWidget.config.enabledLabel = buttonFormGroup.find('.attachEnabledLabel')
+            .html();
+    },
+
+    setState: function () {
+        var enabled = true;
+        attachmentWidget.config.fields.each(function () {
+            if (!$(this)
+                .val()) {
+                enabled = false;
+                return;
+            }
+        });
+        if (enabled) {
+            attachmentWidget.button.removeAttr('disabled')
+                .removeClass('disabledAddAttachment');
+            attachmentWidget.button.val(attachmentWidget.config.enabledLabel);
+        } else {
+            attachmentWidget.button.attr('disabled', 'disabled')
+                .addClass('disabledAddAttachment');
+            attachmentWidget.button.val(attachmentWidget.config.disabledLabel);
+        }
+    },
+
+    cloneFields: function () {
+        var html = '<div class="attachedFileInfo">';
+        if (attachmentWidget.count) {
+            html = attachmentWidget.config.showOnDisplay.html() + html;
+        }
+        attachmentWidget.config.fields.each(function () {
+            var field = $(this);
+            var container = $(this)
+                .parents('.form-group');
+            if (container.find(':file')
+                .length) {
+                html += ' (' + field.val() + ')';
+            } else {
+                html += ' ' + field.val();
+            }
+            html += '<span style="display: none;" class="removeField">';
+            html += container.attr('id');
+            html += '</span>';
+            container.hide();
+        });
+        //html += ' <a href="" class="removeAttach glyphicon glyphicon-remove text-danger"></a>';
+        html += ' <a href="" class="removeAttach btn btn-default btn-xs">Delete</a>';
+        html += '</div>';
+        attachmentWidget.config.showOnDisplay.html(html);
+        attachmentWidget.count += 1;
+        attachmentWidget.initFileInput();
+    },
+
+    doAttach: function () {
+        attachmentWidget.cloneFields();
+        attachmentWidget.setState();
+    },
+
+    removeAttachment: function () {
+        var attach = $(this)
+            .parent('.attachedFileInfo');
+        var fields = attach.find('.removeField');
+        fields.each(function () {
+            $('#' + $(this)
+                    .html())
+                .remove();
+        });
+        attach.remove();
+        if (!attachmentWidget.config.showOnDisplay.html()) {
+            attachmentWidget.config.showOnDisplay.html(attachmentWidget.config.showOnEmpty);
+            attachmentWidget.count = 0;
+        }
+        return false;
+    },
+
+    initTriggers: function () {
+        attachmentWidget.config.showOnDisplay.on('click', 'a.removeAttach', attachmentWidget.removeAttachment);
+        attachmentWidget.button.click(attachmentWidget.doAttach);
+    },
+
+    initFileInput: function () {
+        var fieldids = [];
+        attachmentWidget.config.basefields.each(function () {
+            var field = $(this);
+            var oldcontainer = $(this)
+                .parents('.form-group');
+            var newcontainer = oldcontainer.clone();
+            var newfield = newcontainer.find('#' + field.attr('id'));
+            newfield.attr('name', newfield.attr('name') + '_' + attachmentWidget.count);
+            newfield.attr('id', newfield.attr('id') + '_' + attachmentWidget.count);
+            newcontainer.attr('id', 'container_id_' + newfield.attr('name'));
+            oldcontainer.after(newcontainer);
+            oldcontainer.hide();
+            newcontainer.show();
+            fieldids.push('#' + newfield.attr('id'));
+        });
+        attachmentWidget.config.fields = $(fieldids.join(","));
+        attachmentWidget.config.fields.change(attachmentWidget.setState);
+        attachmentWidget.config.fields.keyup(attachmentWidget.setState);
+    },
+
+    initWidget: function () {
+        attachmentWidget.button = $(this);
+        attachmentWidget.readConfig();
+        attachmentWidget.initFileInput();
+        attachmentWidget.initTriggers();
+        attachmentWidget.setState();
+    },
+};
+
+var liaisonForm = {
+    initVariables: function () {
+        liaisonForm.is_edit_form = liaisonForm.form.attr("data-edit-form") == "True";
+        liaisonForm.from_groups = liaisonForm.form.find('#id_from_groups');
+        liaisonForm.from_contact = liaisonForm.form.find('#id_from_contact');
+        liaisonForm.response_contacts = liaisonForm.form.find('#id_response_contacts');
+        liaisonForm.to_groups = liaisonForm.form.find('#id_to_groups');
+        liaisonForm.to_contacts = liaisonForm.form.find('#id_to_contacts');
+        liaisonForm.cc = liaisonForm.form.find('#id_cc_contacts');
+        liaisonForm.purpose = liaisonForm.form.find('#id_purpose');
+        liaisonForm.deadline = liaisonForm.form.find('#id_deadline');
+        liaisonForm.submission_date = liaisonForm.form.find('#id_submitted_date');
+        liaisonForm.approval = liaisonForm.form.find('#id_approved');
+        liaisonForm.initial_approval_label = liaisonForm.form.find("label[for='id_approved']")
+            .text();
+        liaisonForm.cancel = liaisonForm.form.find('#id_cancel');
+        liaisonForm.cancel_dialog = liaisonForm.form.find('#cancel-dialog');
+        liaisonForm.config = {};
+        liaisonForm.related_trigger = liaisonForm.form.find('.id_related_to');
+        liaisonForm.related_url = liaisonForm.form.find('#id_related_to')
+            .parent()
+            .find('.listURL')
+            .text();
+        liaisonForm.related_dialog = liaisonForm.form.find('#related-dialog');
+        liaisonForm.unrelate_trigger = liaisonForm.form.find('.id_no_related_to');
+    },
+
+    render_mails_into: function (container, person_list, as_html) {
+        var html = '';
+
+        $.each(person_list, function (index, person) {
+            if (as_html) {
+                html += person[0] + ' &lt;<a href="mailto:' + person[1] + '">' + person[1] + '</a>&gt;<br />';
+            } else {
+                //html += person[0] + ' &lt;'+person[1]+'&gt;\n';
+                html += person + '\n';
+            }
+        });
+        container.html(html);
+    },
+
+    toggleApproval: function (needed) {
+        if (!liaisonForm.approval.length) {
+            return;
+        }
+        if (!needed) {
+            liaisonForm.approval.prop('checked', true);
+            liaisonForm.approval.hide();
+            //$("label[for='id_approved']").text("Approval not required");
+            var nodes = $("label[for='id_approved']:not(.control-label)")[0].childNodes;
+            nodes[nodes.length - 1].nodeValue = 'Approval not required';
+            return;
+        }
+        if (needed && !$('#id_approved')
+            .is(':visible')) {
+            liaisonForm.approval.prop('checked', false);
+            liaisonForm.approval.show();
+            //$("label[for='id_approved']").text(initial_approval_label);
+            nodes = $("label[for='id_approved']:not(.control-label)")[0].childNodes;
+            nodes[nodes.length - 1].nodeValue = liaisonForm.initial_approval_label;
+            return;
+        }
+    },
+
+    checkPostOnly: function (post_only) {
+        if (post_only) {
+            $("button[name=send]")
+                .hide();
+        } else {
+            $("button[name=send]")
+                .show();
+        }
+    },
+
+    updateInfo: function (first_time, sender) {
+        // don't overwrite fields when editing existing liaison
+        if (liaisonForm.is_edit_form) {
+            return false;
+        }
+
+        var from_ids = liaisonForm.from_groups.val();
+        var to_ids = liaisonForm.to_groups.val();
+        var url = liaisonForm.form.data("ajaxInfoUrl");
+        $.ajax({
+            url: url,
+            type: 'GET',
+            cache: false,
+            async: true,
+            dataType: 'json',
+            data: {
+                from_groups: from_ids,
+                to_groups: to_ids
+            },
+            success: function (response) {
+                if (!response.error) {
+                    if (!first_time || !liaisonForm.cc.text()) {
+                        liaisonForm.render_mails_into(liaisonForm.cc, response.cc, false);
+                    }
+                    //render_mails_into(poc, response.poc, false);
+                    if (sender.attr('id') == 'id_to_groups') {
+                        liaisonForm.to_contacts.val(response.to_contacts);
+                    }
+                    if (sender.attr('id') == 'id_from_groups') {
+                        liaisonForm.toggleApproval(response.needs_approval);
+                        liaisonForm.response_contacts.val(response.response_contacts);
+                    }
+                    liaisonForm.checkPostOnly(response.post_only);
+                }
+            }
+        });
+        return false;
+    },
+
+    updatePurpose: function () {
+        var deadlinecontainer = liaisonForm.deadline.closest('.form-group');
+        var value = liaisonForm.purpose.val();
+
+        if (value == 'action' || value == 'comment') {
+            liaisonForm.deadline.prop('required', true);
+            deadlinecontainer.show();
+        } else {
+            liaisonForm.deadline.prop('required', false);
+            deadlinecontainer.hide();
+            liaisonForm.deadline.val('');
+        }
+    },
+
+    cancelForm: function () {
+        liaisonForm.cancel_dialog.dialog("open");
+    },
+
+    checkSubmissionDate: function () {
+        var date_str = liaisonForm.submission_date.val();
+        if (date_str) {
+            var sdate = new Date(date_str);
+            var today = new Date();
+            if (Math.abs(today - sdate) > 2592000000) { // 2592000000 = 30 days in milliseconds
+                return confirm('Submission date ' + date_str + ' differ more than 30 days.\n\nDo you want to continue and post this liaison using that submission date?\n');
+            }
+            return true;
+        } else
+            return false;
+    },
+
+    init: function () {
+        liaisonForm.form = $(this);
+        liaisonForm.initVariables();
+        $('#id_from_groups')
+            .select2();
+        $('#id_to_groups')
+            .select2();
+        liaisonForm.to_groups.change(function () { liaisonForm.updateInfo(false, $(this)); });
+        liaisonForm.from_groups.change(function () { liaisonForm.updateInfo(false, $(this)); });
+        liaisonForm.purpose.change(liaisonForm.updatePurpose);
+        liaisonForm.form.submit(liaisonForm.checkSubmissionDate);
+        $('.addAttachmentWidget')
+            .each(attachmentWidget.initWidget);
+
+        liaisonForm.updatePurpose();
+        if ($('#id_to_groups')
+            .val()) {
+            $('#id_to_groups')
+                .trigger('change');
+        }
+        if ($('#id_from_groups')
+            .val()) {
+            $('#id_from_groups')
+                .trigger('change');
+        }
+    },
+};
+
+var searchForm = {
+    // search form, based on doc search feature
+    init: function () {
+        searchForm.form = $(this);
+        $("#search-clear-btn")
+            .on("click", searchForm.clearForm);
+    },
+
+    clearForm: function () {
+        var form = $(this)
+            .parents("form");
+        form.find("input")
+            .val("");
+    }
+};
+
+$(document)
+    .ready(function () {
+        // use traditional style URL parameters
+        $.ajaxSetup({ traditional: true });
+
+        $('form.liaisons-form')
+            .each(liaisonForm.init);
+        $('#liaison_search_form')
+            .each(searchForm.init);
+    });

ietf/static/js/list.js

@@ -13,8 +13,26 @@ function text_sort(a, b, options) {
         .replaceAll(/\s+/g, ' '));
 }
 
+function replace_with_internal(table, internal_table, i) {
+    $(table)
+        .children("tbody")
+        .eq(i)
+        .replaceWith(internal_table[i]
+            .children("table")
+            .children("tbody")
+            .clone());}
+
+function field_magic(i, e, fields) {
+    if (fields[i] == "date" || fields[i] == "num") {
+        $(e)
+            .addClass("text-end");
+    }
+}
+
 $(document)
     .ready(function () {
+        var n = 1;
+        var items_per_page = 10;
         $("table.tablesorter")
             .each(function () {
                 var table = $(this);
@@ -37,16 +55,13 @@ $(document)
 
                 } else {
 
+                    $(table)
+                        .wrap(`<div id='tablewrapper-${n}'></div`);
+
                     $(header_row)
                         .children("[data-sort]")
                         .addClass("sort")
-                        .each((i, e) => {
-                            if (fields[i] == "date" || fields[i] == "num") {
-                                // magic
-                                $(e)
-                                    .addClass("text-end");
-                            }
-                        });
+                        .each((i, e) => field_magic(i, e, fields));
 
                     if ($(header_row)
                         .text()
@@ -73,23 +88,25 @@ $(document)
                     var reset_search = $(searcher)
                         .children("button.search-reset");
 
-                    // var pager = $.parseHTML(`
-                    // <nav aria-label="Pagination control" class="visually-hidden">
-                    //     <ul class="pagination"></ul>
-                    // </nav>`);
+                    var pager = $.parseHTML(`
+                    <nav aria-label="Pagination control" class="visually-hidden">
+                        <ul class="pagination d-flex flex-wrap text-center"></ul>
+                    </nav>`);
 
-                    // $(table)
-                    //     .after(pager);
+                    $(table)
+                        .before(pager);
 
                     var list_instance = [];
                     var internal_table = [];
 
-                    // var pagination = $(table)
-                    //     .children("tbody")
-                    //     .length == 1;
+                    var pagination = $(table)
+                        .children("tbody")
+                        .length == 1;
+
+                    pagination = false; // FIXME: pagination not working yet.
 
                     // list.js cannot deal with tables with multiple tbodys,
-                    // so maintain separate internal "tables" for
+                    // so maintain separate internal "table" copies for
                     // sorting/searching and update the DOM based on them
                     $(table)
                         .children("tbody, tfoot")
@@ -104,11 +121,7 @@ $(document)
                                         .each((i, e) => {
                                             $(e)
                                                 .addClass(fields[i]);
-                                            if (fields[i] == "date" || fields[i] == "num") {
-                                                // magic
-                                                $(e)
-                                                    .addClass("text-end");
-                                            }
+                                            field_magic(i, e, fields);
                                         });
                                 });
 
@@ -120,36 +133,49 @@ $(document)
                             var tbody = $(this)
                                 .clone();
 
-                            if ($(tbody)
+                            var tbody_rows = $(tbody)
                                 .find("tr")
-                                .length == 0) {
+                                .length;
+
+                            if (tbody_rows == 0) {
                                 console.log("Skipping empty tbody");
                                 return;
+                            } else if (tbody_rows <= items_per_page) {
+                                pagination = false;
                             }
 
                             var parent = $(table)
-                                .clone()
+                                .parent()
+                                .clone();
+
+                            $(parent)
+                                .children("table")
                                 .empty()
                                 .removeClass("tablesorter")
-                                .wrap("<div id='abc'></div")
                                 .append(thead, tbody);
 
                             internal_table.push(parent);
 
-                            // if (pagination) {
-                            //     console.log("Enabling pager.");
-                            //     $(pager)
-                            //         .removeClass("visually-hidden");
-                            //     pagination = {
-                            //         item: '<li class="page-item"><a class="page-link" href="#"></a></li>'
-                            //     };
-                            // }
+                            var hook = `tablewrapper-${n}`;
+                            if (pagination) {
+                                console.log("Enabling pager.");
+                                $(pager)
+                                    .removeClass("visually-hidden");
+                                pagination = {
+                                    innerWindow: 5,
+                                    left: 1,
+                                    right: 1,
+                                    item: '<li class="page-item flex-fill"><a class="page page-link" href="#"></a></li>'
+                                };
+                            } else {
+                                hook = parent[0];
+                            }
 
                             list_instance.push(
-                                new List(parent[0], {
+                                new List(hook, {
                                     valueNames: fields,
-                                    // pagination: pagination,
-                                    // page: 10
+                                    pagination: pagination,
+                                    page: items_per_page
                                 }));
                         });
 
@@ -184,13 +210,7 @@ $(document)
 
                     $.each(list_instance, (i, e) => {
                         e.on("sortComplete", function () {
-                            $(table)
-                                .children("tbody")
-                                .eq(i)
-                                .replaceWith(internal_table[i]
-                                    .children("tbody")
-                                    .clone());
-
+                            replace_with_internal(table, internal_table, i);
                             if (i == list_instance.length - 1) {
                                 $(table)
                                     .find("thead:first tr")
@@ -236,14 +256,10 @@ $(document)
                             });
 
                             e.update();
-                            $(table)
-                                .children("tbody")
-                                .eq(i)
-                                .replaceWith(internal_table[i]
-                                    .children("tbody")
-                                    .clone());
+                            replace_with_internal(table, internal_table, i);
                         });
                     });
                 }
             });
+        n++;
     });

ietf/static/js/select2.js

@@ -0,0 +1,4 @@
+import $ from "jquery";
+import select2 from "select2";
+
+select2($);

ietf/templates/401.html

@@ -1,20 +1,29 @@
+{# bs5ok #}
 {# Copyright The IETF Trust 2012, All Rights Reserved #}
 {% extends "base.html" %}
 {% load static %}
 {% block title %}401 Unauthorized{% endblock %}
 {% block content %}
-
-    <img class="ietflogo" src="{% static 'ietf/images/ietflogo.png' %}" alt="IETF" style="width: 10em">
-
-    <h2>Authentication Required</h2>
-
-    <p>The server could not verify that you are authorized to view this page using
-        the username and password you provided. You can now:</p>
-
+    <img class="ietflogo"
+         src="{% static 'ietf/images/ietflogo.png' %}"
+         alt="IETF"
+         style="width: 10em">
+    <h1>Authentication Required</h1>
+    <p>
+        The server could not verify that you are authorized to view this page using
+        the username and password you provided. You can now:
+    </p>
     <ul>
-        <li><a href="/accounts/login/">Attempt to login again</a></li>
-        <li><a href="/accounts/reset/">Request a password reset</a></li>
+        <li>
+            <a href="/accounts/login/">Attempt to login again</a>
+        </li>
+        <li>
+            <a href="/accounts/reset/">Request a password reset</a>
+        </li>
     </ul>
-
-    <p>If you think this is a server error, please contact <a href="mailto:webtools@ietf.org">webtools@ietf.org</a>.</p>
-{% endblock %}
+    <p>
+        If you think this is a server error, please contact
+        <a href="mailto:webtools@ietf.org">webtools@ietf.org</a>
+        .
+    </p>
+{% endblock %}

ietf/templates/base.html

@@ -35,8 +35,7 @@
               href="{% static 'ietf/images/apple-touch-icon.png' %}"/>
         <script src="{% static 'ietf/js/ietf.js' %}"/></script>
     </head>
-    <body class="position-relative" data-bs-spy="scroll" data-bs-target="#righthand-nav" {% block bodyAttrs %}
-          {% endblock bodyAttrs %}
+    <body class="position-relative"
           data-group-menu-data-url="{% url 'ietf.group.views.group_menu_data' %}">
         <nav class="navbar navbar-expand-lg
                     {% if server_mode and server_mode != "production" %}
@@ -108,15 +107,8 @@
                     {% for message in messages %}
                         <div class="alert
                                     {% if message.level_tag %}
-                                        alert-
-                                        {% if message.level_tag == 'error' %}
-                                            danger
-                                        {% else %}
-                                            {{ message.level_tag }}
-                                        {% endif %}
-
+                                        alert-{% if message.level_tag == 'error' %}danger{% else %}{{ message.level_tag }}{% endif %}
                                     {% endif %}
-
                                     {% if message.extra_tags %}
                                         {{ message.extra_tags }}
                                     {% endif %} alert-dismissable fade show">

ietf/templates/doc/add_sessionpresentation.html

@@ -8,7 +8,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Add document to session<br><small>{{doc.name}}<br>{{doc.title}}</small></h1>
+    <h1>Add document to session<br><small class="text-muted">{{doc.name}}<br>{{doc.title}}</small></h1>
 
     <form method="post">
         {% csrf_token %}

ietf/templates/doc/ballot/approvaltext.html

@@ -9,7 +9,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Approval announcement writeup<br><small><a href="{% url "ietf.doc.views_doc.document_main" name=doc.canonical_name %}">{{ doc }}</a></small></h1>
+    <h1>Approval announcement writeup<br><small class="text-muted"><a href="{% url "ietf.doc.views_doc.document_main" name=doc.canonical_name %}">{{ doc }}</a></small></h1>
 
     <form method="post">
         {% csrf_token %}

ietf/templates/doc/ballot/approve_ballot.html

@@ -8,7 +8,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Approve ballot<br><small><a href="{% url "ietf.doc.views_doc.document_main" name=doc.canonical_name %}">{{ doc }}</a></small></h1>
+    <h1>Approve ballot<br><small class="text-muted"><a href="{% url "ietf.doc.views_doc.document_main" name=doc.canonical_name %}">{{ doc }}</a></small></h1>
 
     <form method="post">
         {% csrf_token %}

ietf/templates/doc/ballot/approve_downrefs.html

@@ -8,7 +8,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Approve downward references<br><small>The ballot for <a href="{% url "ietf.doc.views_doc.document_main" name=doc.canonical_name %}">{{ doc }}</a> was just approved</small></h1>
+    <h1>Approve downward references<br><small class="text-muted">The ballot for <a href="{% url "ietf.doc.views_doc.document_main" name=doc.canonical_name %}">{{ doc }}</a> was just approved</small></h1>
 
     {% if not downrefs_to_rfc %}
         <p>No downward references for <a href="{% url "ietf.doc.views_doc.document_main" name=doc.canonical_name %}">{{ doc }}</a></p>

ietf/templates/doc/ballot/ballot_issued.html

@@ -6,7 +6,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Ballot issued<br><small><a href="{% url "ietf.doc.views_doc.document_main" name=doc.canonical_name %}">{{ doc }}</a></small></h1>
+    <h1>Ballot issued<br><small class="text-muted"><a href="{% url "ietf.doc.views_doc.document_main" name=doc.canonical_name %}">{{ doc }}</a></small></h1>
 
     <p>Ballot has been sent out.</p>
 

ietf/templates/doc/ballot/clear_ballot.html

@@ -7,7 +7,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Clear ballot<br><small><a href="{% url "ietf.doc.views_doc.document_main" name=doc.canonical_name %}">{{ doc }}</a></small></h1>
+    <h1>Clear ballot<br><small class="text-muted"><a href="{% url "ietf.doc.views_doc.document_main" name=doc.canonical_name %}">{{ doc }}</a></small></h1>
 
     <form method="post">
         {% csrf_token %}

ietf/templates/doc/ballot/defer_ballot.html

@@ -8,7 +8,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Defer ballot<br><small><a href="{% url "ietf.doc.views_doc.document_main" name=doc.canonical_name %}">{{ doc }}</a></small></h1>
+    <h1>Defer ballot<br><small class="text-muted"><a href="{% url "ietf.doc.views_doc.document_main" name=doc.canonical_name %}">{{ doc }}</a></small></h1>
 
     <form method="post">
         {% csrf_token %}

ietf/templates/doc/ballot/edit_position.html

@@ -7,7 +7,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Change position for {{ balloter.plain_name }} regarding <br><small><a href="{% url "ietf.doc.views_doc.document_main" name=doc.canonical_name %}">{{ doc }}</a></small></h1>
+    <h1>Change position for {{ balloter.plain_name }} regarding <br><small class="text-muted"><a href="{% url "ietf.doc.views_doc.document_main" name=doc.canonical_name %}">{{ doc }}</a></small></h1>
 
     <div class="question">{{ ballot.ballot_type.question }}</div>
 

ietf/templates/doc/ballot/lastcalltext.html

@@ -9,7 +9,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Last call text<br><small><a href="{% url "ietf.doc.views_doc.document_main" name=doc.canonical_name %}">{{ doc }}</a></small></h1>
+    <h1>Last call text<br><small class="text-muted"><a href="{% url "ietf.doc.views_doc.document_main" name=doc.canonical_name %}">{{ doc }}</a></small></h1>
 
     <form method="post">
         {% csrf_token %}

ietf/templates/doc/ballot/rfceditornote.html

@@ -9,7 +9,7 @@
 {% block content %}
     {% origin %}
 
-    <h1>RFC Editor Note for<br><small><a href="{% url "ietf.doc.views_doc.document_main" name=doc.canonical_name %}">{{ doc }}</a></small></h1>
+    <h1>RFC Editor Note for<br><small class="text-muted"><a href="{% url "ietf.doc.views_doc.document_main" name=doc.canonical_name %}">{{ doc }}</a></small></h1>
 
     {% bootstrap_messages %}
 

ietf/templates/doc/ballot/undefer_ballot.html

@@ -8,7 +8,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Undefer ballot<br><small><a href="{% url "ietf.doc.views_doc.document_main" name=doc.canonical_name %}">{{ doc }}</a></small></h1>
+    <h1>Undefer ballot<br><small class="text-muted"><a href="{% url "ietf.doc.views_doc.document_main" name=doc.canonical_name %}">{{ doc }}</a></small></h1>
 
     <form class="undefer" method="post">
         {% csrf_token %}

ietf/templates/doc/ballot/writeupnotes.html

@@ -9,7 +9,7 @@
 {% block content %}
     {% origin %}
 
-    <h1>Ballot writeup and notes<br><small><a href="{% url "ietf.doc.views_doc.document_main" name=doc.canonical_name %}">{{ doc }}</a></small></h1>
+    <h1>Ballot writeup and notes<br><small class="text-muted"><a href="{% url "ietf.doc.views_doc.document_main" name=doc.canonical_name %}">{{ doc }}</a></small></h1>
 
     <form method="post">
         {% csrf_token %}

ietf/templates/doc/bofreq/change_editors.html

@@ -12,7 +12,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Change editors<br><small>{{ titletext }}</small></h1>
+    <h1>Change editors<br><small class="text-muted">{{ titletext }}</small></h1>
 
     <form method="post">
         {% csrf_token %}

ietf/templates/doc/bofreq/change_responsible.html

@@ -12,7 +12,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Change Responsible Leadership<br><small>{{ titletext }}</small></h1>
+    <h1>Change Responsible Leadership<br><small class="text-muted">{{ titletext }}</small></h1>
 
     <form method="post">
         {% csrf_token %}

ietf/templates/doc/change_ad.html

@@ -8,7 +8,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Change shepherding AD<br><small>{{titletext}}</small></h1>
+    <h1>Change shepherding AD<br><small class="text-muted">{{titletext}}</small></h1>
 
     <form enctype="multipart/form-data" method="post">
         {% csrf_token %}

ietf/templates/doc/change_shepherd.html

@@ -12,7 +12,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Change document shepherd<br><small>{{ doc.name }}-{{ doc.rev }}</small></h1>
+    <h1>Change document shepherd<br><small class="text-muted">{{ doc.name }}-{{ doc.rev }}</small></h1>
 
     <p>The shepherd needs to have a Datatracker account. A new account can be
         <a href="{% url "ietf.ietfauth.views.create_account" %}">created here</a>.</p>

ietf/templates/doc/change_shepherd_email.html

@@ -8,7 +8,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Change the document shepherd email<br><small>{{ doc.name }}-{{ doc.rev }}</small></h1>
+    <h1>Change the document shepherd email<br><small class="text-muted">{{ doc.name }}-{{ doc.rev }}</small></h1>
 
     <form method="post">
         {% csrf_token %}

ietf/templates/doc/change_state.html

@@ -8,7 +8,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Change state<br><small>{{doc.title}}</small></h1>
+    <h1>Change state<br><small class="text-muted">{{doc.title}}</small></h1>
 
     <p><a class="btn btn-info" href="{{help_url}}">Help on states</a></p>
 

ietf/templates/doc/change_title.html

@@ -8,7 +8,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Change title<br><small>{{ titletext }}</small></h1>
+    <h1>Change title<br><small class="text-muted">{{ titletext }}</small></h1>
 
     <form method="post">
         {% csrf_token %}

ietf/templates/doc/charter/action_announcement_text.html

@@ -9,7 +9,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>{{ charter.chartered_group.type.name }} action announcement writeup<br><small>{{ charter.chartered_group.acronym }}</small></h1>
+    <h1>{{ charter.chartered_group.type.name }} action announcement writeup<br><small class="text-muted">{{ charter.chartered_group.acronym }}</small></h1>
 
     <form method="post">
         {% csrf_token %}

ietf/templates/doc/charter/ballot_writeupnotes.html

@@ -9,7 +9,7 @@
 {% block content %}
     {% origin %}
 
-    <h1>Ballot writeup and notes<br><small>{{ charter.chartered_group }}</small></h1>
+    <h1>Ballot writeup and notes<br><small class="text-muted">{{ charter.chartered_group }}</small></h1>
 
     <form method="post">
         {% csrf_token %}

ietf/templates/doc/charter/change_ad.html

@@ -10,7 +10,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Change responsible AD<br><small>{{ charter.canonical_name }}-{{ charter.rev }}</small></h1>
+    <h1>Change responsible AD<br><small class="text-muted">{{ charter.canonical_name }}-{{ charter.rev }}</small></h1>
 
     <form enctype="multipart/form-data" method="post">
         {% csrf_token %}

ietf/templates/doc/charter/review_announcement_text.html

@@ -9,7 +9,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>WG Review announcement writeup<br><small>{{ charter.chartered_group.acronym }}</small></h1>
+    <h1>WG Review announcement writeup<br><small class="text-muted">{{ charter.chartered_group.acronym }}</small></h1>
 
     <form method="post">
         {% csrf_token %}

ietf/templates/doc/conflict_review/start.html

@@ -10,7 +10,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Begin IETF conflict review<br><small>{{doc_to_review.canonical_name}}-{{doc_to_review.rev}}</small></h1>
+    <h1>Begin IETF conflict review<br><small class="text-muted">{{doc_to_review.canonical_name}}-{{doc_to_review.rev}}</small></h1>
 
     {% if user|has_role:"Secretariat" %}
         <p><a class="btn btn-info" href="{% url 'ietf.doc.views_help.state_help' type="conflict-review" %}">Help on states</a></p>

ietf/templates/doc/conflict_review/submit.html

@@ -10,7 +10,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Edit conflict review<br><small>{{ conflictdoc.canonical_name }}-{{ conflictdoc.rev }}</small></h1>
+    <h1>Edit conflict review<br><small class="text-muted">{{ conflictdoc.canonical_name }}-{{ conflictdoc.rev }}</small></h1>
 
     <p class="alert alert-info">The text will be submitted as <strong>{{ review.canonical_name }}-{{ next_rev }}</strong></p>
 

ietf/templates/doc/document_charter.html

@@ -210,7 +210,7 @@
         {% endif %}
     </p>
 
-    <h2>Charter<br><small>{{ doc.canonical_name }}-{{ doc.rev }}</small></h2>
+    <h2>Charter<br><small class="text-muted">{{ doc.canonical_name }}-{{ doc.rev }}</small></h2>
 
     {% if not snapshot and can_manage and chartering and group.state_id != "conclude" %}
         <p><a class="btn btn-primary" href="{% url 'ietf.doc.views_charter.submit' name=doc.name %}">Change charter text</a></p>

ietf/templates/doc/document_conflict_review.html

@@ -121,7 +121,7 @@
         </tbody>
     </table>
 
-    <h2>Conflict review<br><small>{{ conflictdoc.name }}-{{ conflictdoc.rev }}</small></h2>
+    <h2>Conflict review<br><small class="text-muted">{{ conflictdoc.name }}-{{ conflictdoc.rev }}</small></h2>
     {% if not snapshot and user|has_role:"Area Director,Secretariat" and doc.get_state_slug != 'apprsent' %}
         <a class="btn btn-primary" href="{% url 'ietf.doc.views_conflict_review.submit' name=doc.name %}">Change conflict review text</a>
     {% endif %}

ietf/templates/doc/document_material.html

@@ -128,7 +128,7 @@
         {% endif %}
     </p>
 
-    <h2>{% if doc.meeting_related %}Meeting{% endif %} {{ doc.type.name }}<br><small>{{ doc.name }}</small></h2>
+    <h2>{% if doc.meeting_related %}Meeting{% endif %} {{ doc.type.name }}<br><small class="text-muted">{{ doc.name }}</small></h2>
 
     <div id='materials-content'>
         {% if doc.rev and content != None %}

ietf/templates/doc/document_review.html

@@ -52,7 +52,7 @@
         </tbody>
     </table>
 
-    <h2>{{ doc.type.name }}<br><small>{{ doc.name }}</small></h2>
+    <h2>{{ doc.type.name }}<br><small class="text-muted">{{ doc.name }}</small></h2>
 
     {% if doc.rev and content != None %}
         <pre class="pasted">{{ content|linkify }}</pre>

ietf/templates/doc/document_writeup.html

@@ -15,7 +15,7 @@
         <h2>
             {{ title|capfirst_allcaps }}
             {% if subtitle %}
-                <br><small>{{ subtitle|safe }}</small>
+                <br><small class="text-muted">{{ subtitle|safe }}</small>
             {% endif %}
         </h2>
 

ietf/templates/doc/draft/add_iana_experts_comment.html

@@ -8,7 +8,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Add IANA Experts Review State comment<br><small>{{ doc }}</small></h1>
+    <h1>Add IANA Experts Review State comment<br><small class="text-muted">{{ doc }}</small></h1>
 
     <form method="post">
         {% csrf_token %}

ietf/templates/doc/draft/change_ad.html

@@ -8,7 +8,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Change shepherding AD<br><small>{{ doc.name }}-{{ doc.rev }}</small></h1>
+    <h1>Change shepherding AD<br><small class="text-muted">{{ doc.name }}-{{ doc.rev }}</small></h1>
 
     <form enctype="multipart/form-data" method="post">
         {% csrf_token %}

ietf/templates/doc/draft/change_consensus.html

@@ -8,7 +8,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Change consensus<br><small>{{ doc.name }}-{{ doc.rev }}</small></h1>
+    <h1>Change consensus<br><small class="text-muted">{{ doc.name }}-{{ doc.rev }}</small></h1>
 
     <form method="post">
         {% csrf_token %}

ietf/templates/doc/draft/change_iana_state.html

@@ -8,7 +8,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Change IANA state<br><small>{{ doc }}</small></h1>
+    <h1>Change IANA state<br><small class="text-muted">{{ doc }}</small></h1>
 
     <form method="post">
         {% csrf_token %}

ietf/templates/doc/draft/change_intended_status.html

@@ -8,7 +8,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Change intended status<br><small>{{ doc }}</small></h1>
+    <h1>Change intended status<br><small class="text-muted">{{ doc }}</small></h1>
 
     <form method="post">
         {% csrf_token %}

ietf/templates/doc/draft/change_replaces.html

@@ -12,7 +12,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Change documents replaced by<br><small>{{ doc }}</small></h1>
+    <h1>Change documents replaced by<br><small class="text-muted">{{ doc }}</small></h1>
 
     <h3>Instructions</h3>
 

ietf/templates/doc/draft/change_shepherd_writeup.html

@@ -10,7 +10,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Edit shepherd writeup<br><small>{{ doc.canonical_name }}-{{ doc.rev }}</small></h1>
+    <h1>Edit shepherd writeup<br><small class="text-muted">{{ doc.canonical_name }}-{{ doc.rev }}</small></h1>
 
     <form enctype="multipart/form-data" method="post">
         {% csrf_token %}

ietf/templates/doc/draft/change_state.html

@@ -8,7 +8,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Change state<br><small>{{ doc }}</small></h1>
+    <h1>Change state<br><small class="text-muted">{{ doc }}</small></h1>
 
     <p>
         <a class="btn btn-info" href="{% url 'ietf.doc.views_help.state_help' type="draft-iesg" %}">Help on states</a>

ietf/templates/doc/draft/change_stream.html

@@ -8,7 +8,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Change stream<br><small>{{ doc }}</small></h1>
+    <h1>Change stream<br><small class="text-muted">{{ doc }}</small></h1>
 
     <form method="post">
         {% csrf_token %}

ietf/templates/doc/draft/change_stream_state.html

@@ -9,7 +9,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Change {{ state_type.label }}<br><small>{{ doc }}</small></h1>
+    <h1>Change {{ state_type.label }}<br><small class="text-muted">{{ doc }}</small></h1>
 
     {% if next_states %}
         <p>

ietf/templates/doc/draft/edit_iesg_note.html

@@ -8,7 +8,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Edit IESG note<br><small>{{ doc.name }}</small></h1>
+    <h1>Edit IESG note<br><small class="text-muted">{{ doc.name }}</small></h1>
 
     <form method="post">
         {% csrf_token %}

ietf/templates/doc/draft/edit_info.html

@@ -9,7 +9,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Edit info<br><small>{{ doc }}</small></h1>
+    <h1>Edit info<br><small class="text-muted">{{ doc }}</small></h1>
 
     <form method="post">
         {% csrf_token %}

ietf/templates/doc/draft/make_last_call.html

@@ -8,7 +8,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Make last call<br><small>{{ doc.name }}</small></h1>
+    <h1>Make last call<br><small class="text-muted">{{ doc.name }}</small></h1>
 
     <p class="alert alert-info">
         <b>Last call for:</b>

ietf/templates/doc/draft/request_publication.html

@@ -8,7 +8,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Request publication<br><small>{{ doc }}</small></h1>
+    <h1>Request publication<br><small class="text-muted">{{ doc }}</small></h1>
 
     <p class="alert alert-info">
         Send a publication request to the RFC Editor for {{ doc }} and move it to the <i>{{ next_state.name }}</i> stream state.

ietf/templates/doc/draft/request_resurrect.html

@@ -8,7 +8,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Request resurrection<br><small>{{ doc }}</small></h1>
+    <h1>Request resurrection<br><small class="text-muted">{{ doc }}</small></h1>
 
     <p>Request resurrection of the Internet-Draft {{ doc.file_tag }}?</p>
 

ietf/templates/doc/draft/resurrect.html

@@ -9,7 +9,7 @@
 {% block content %}
     {% origin %}
 
-    <h1>Resurrect<br><small>{{ doc }}</small></h1>
+    <h1>Resurrect<br><small class="text-muted">{{ doc }}</small></h1>
 
     <p>Resurrect {{ doc }}?</p>
 

ietf/templates/doc/edit_action_holders.html

@@ -14,7 +14,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Edit action holders<br><small>{{titletext}}</small></h1>
+    <h1>Edit action holders<br><small class="text-muted">{{titletext}}</small></h1>
 
     <form enctype="multipart/form-data" method="post">
         {% csrf_token %}

ietf/templates/doc/edit_authors.html

@@ -5,7 +5,7 @@
 {% load django_bootstrap5 %}
 
 {% block pagehead %}
-    <link rel="stylesheet" href="{% static 'select2/select2.css' %}">
+    <link rel="stylesheet" href="{% static 'ietf/css/select2.css' %}">
     <link rel="stylesheet" href="{% static 'select2-bootstrap-css/select2-bootstrap.min.css' %}">
 {% endblock %}
 
@@ -22,7 +22,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Edit authors<br><small>{{ titletext }}</small></h1>
+    <h1>Edit authors<br><small class="text-muted">{{ titletext }}</small></h1>
 
     <form enctype="multipart/form-data" method="post" id="authors-form">
         {% csrf_token %}
@@ -71,7 +71,7 @@
 
 {% block js %}
     <script src="{% static 'Sortable/Sortable.min.js' %}"></script>
-    <script src="{% static 'select2/select2.min.js' %}"></script>
+    <script src="{% static 'ietf/js/select2.js' %}"></script>
     <script src="{% static 'ietf/js/select2-field.js' %}"></script>
 
     <script type="text/javascript">

ietf/templates/doc/edit_field.html

@@ -10,7 +10,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>{{ title }}<br><small>{{ doc.canonical_name }}</small></h1>
+    <h1>{{ title }}<br><small class="text-muted">{{ doc.canonical_name }}</small></h1>
 
     <p>
         <b>

ietf/templates/doc/edit_notify.html

@@ -10,7 +10,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Edit notification addresses<br><small>{{titletext}}</small></h1>
+    <h1>Edit notification addresses<br><small class="text-muted">{{titletext}}</small></h1>
 
     <form enctype="multipart/form-data" method="post">
         {% csrf_token %}

ietf/templates/doc/edit_sessionpresentation.html

@@ -8,7 +8,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Change document revision for session<br><small>{{sp.document.name}}<br>{{sp.document.title}}<br>at {{sp.session}}</small></h1>
+    <h1>Change document revision for session<br><small class="text-muted">{{sp.document.name}}<br>{{sp.document.title}}<br>at {{sp.session}}</small></h1>
 
     {% if sp.session.is_material_submission_cutoff %}
         <p class="alert alert-warning">The deadline for submission corrections has passed. This may affect published proceedings.</p>

ietf/templates/doc/edit_telechat_date.html

@@ -8,7 +8,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Set telechat date<br><small>{{ doc.name }} ({{ doc.pages }} page{{ doc.pages|pluralize }})</small></h1>
+    <h1>Set telechat date<br><small class="text-muted">{{ doc.name }} ({{ doc.pages }} page{{ doc.pages|pluralize }})</small></h1>
 
     {% for warning in warnings %}
         <div class="alert alert-warning">{{ warning }}</div>

ietf/templates/doc/material/choose_material_type.html

@@ -8,7 +8,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Upload Material<br><small>{{ group.name }} ({{ group.acronym }})</small></h1>
+    <h1>Upload Material<br><small class="text-muted">{{ group.name }} ({{ group.acronym }})</small></h1>
 
     <p>Select what kind of material you wish to upload:</p>
 

ietf/templates/doc/material/edit_material.html

@@ -25,7 +25,7 @@
             Edit
         {% endif %}
         {{ doc.type.name }}
-        <br><small>
+        <br><small class="text-muted">
             {% if group is not None %}{{ group.name }} ({{ group.acronym }})
             {% elif doc.meeting_related %}{{ doc.get_related_meeting }}
                 {% if doc.get_related_proceedings_material %} {{ doc.get_related_proceedings_material }}{% endif %}

ietf/templates/doc/remind_action_holders.html

@@ -11,7 +11,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Send reminder to action holders<br><small>{{ titletext }}</small></h1>
+    <h1>Send reminder to action holders<br><small class="text-muted">{{ titletext }}</small></h1>
 
     <form enctype="multipart/form-data" method="post">
         {% csrf_token %}

ietf/templates/doc/review/assign_reviewer.html

@@ -6,7 +6,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Assign reviewer<br><small>{{ review_req.doc.name }}</small></h1>
+    <h1>Assign reviewer<br><small class="text-muted">{{ review_req.doc.name }}</small></h1>
 
     {% include "doc/review/request_info.html" %}
 

ietf/templates/doc/review/close_request.html

@@ -6,7 +6,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Close review request<br><small>{{ review_req.doc.name }}</small></h1>
+    <h1>Close review request<br><small class="text-muted">{{ review_req.doc.name }}</small></h1>
 
     {% include "doc/review/request_info.html" %}
 

ietf/templates/doc/review/edit_request_comment.html

@@ -6,7 +6,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Edit review request comment <br><small>{{ review_req.doc.name }}</small></h1>
+    <h1>Edit review request comment <br><small class="text-muted">{{ review_req.doc.name }}</small></h1>
 
     <form method="post">
         {% csrf_token %}

ietf/templates/doc/review/edit_request_deadline.html

@@ -10,7 +10,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Edit review request deadline <br><small>{{ review_req.doc.name }}</small></h1>
+    <h1>Edit review request deadline <br><small class="text-muted">{{ review_req.doc.name }}</small></h1>
 
     <form method="post">
         {% csrf_token %}

ietf/templates/doc/review/mark_reviewer_assignment_no_response.html

@@ -6,7 +6,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>No-Response: Review assignment<br><small>{{ assignment.review_request.doc.name }}</small></h1>
+    <h1>No-Response: Review assignment<br><small class="text-muted">{{ assignment.review_request.doc.name }}</small></h1>
 
     <p>Mark review assignment for {{ assignment.reviewer.person }} as <strong>No Response</strong></p>
 

ietf/templates/doc/review/reject_reviewer_assignment.html

@@ -6,7 +6,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Reject review assignment<br><small>{{ review_req.doc.name }}</small></h1>
+    <h1>Reject review assignment<br><small class="text-muted">{{ review_req.doc.name }}</small></h1>
 
     {% include "doc/review/request_info.html" %}
 

ietf/templates/doc/review/request_review.html

@@ -11,7 +11,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Request review<br><small>{{ doc.name }}</small></h1>
+    <h1>Request review<br><small class="text-muted">{{ doc.name }}</small></h1>
 
     <p>Submit a request to have the document reviewed.</p>
 

ietf/templates/doc/review/review_request.html

@@ -6,7 +6,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Review request<br><small>{{ review_req.doc.name }}</small></h1>
+    <h1>Review request<br><small class="text-muted">{{ review_req.doc.name }}</small></h1>
 
     {% include "doc/review/request_info.html" %}
 

ietf/templates/doc/review/withdraw_reviewer_assignment.html

@@ -6,7 +6,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Withdraw review assignment<br><small>{{ assignment.review_request.doc.name }}</small></h1>
+    <h1>Withdraw review assignment<br><small class="text-muted">{{ assignment.review_request.doc.name }}</small></h1>
 
     <p>Withdraw review assignment for {{ assignment.reviewer.person }}</p>
 

ietf/templates/doc/shepherd_writeup.html

@@ -10,7 +10,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Shepherd writeup<br><small>{{ doc.canonical_name }}-{{ doc.rev }}</small></h1>
+    <h1>Shepherd writeup<br><small class="text-muted">{{ doc.canonical_name }}-{{ doc.rev }}</small></h1>
 
     <pre class="pasted">{{writeup|linkify}}</pre>
 

ietf/templates/doc/status_change/approve.html

@@ -8,7 +8,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Approve<br><small>{{ doc.canonical_name }}</small></h1>
+    <h1>Approve<br><small class="text-muted">{{ doc.canonical_name }}</small></h1>
 
     <form method="post">
         {% csrf_token %}

ietf/templates/doc/status_change/last_call.html

@@ -9,7 +9,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Last call text<br><small>{{ doc }}</small></h1>
+    <h1>Last call text<br><small class="text-muted">{{ doc }}</small></h1>
 
     <form class="edit-last-call-text" method="post">
         {% csrf_token %}

ietf/templates/doc/status_change/make_last_call.html

@@ -13,7 +13,7 @@
 {% block content %}
     {% origin %}
 
-    <h1>Make last call<br><small>{{doc.name}}</small></h1>
+    <h1>Make last call<br><small class="text-muted">{{doc.name}}</small></h1>
 
     <div class="form-group">
         <label>Last call text</label>

ietf/templates/doc/status_change/submit.html

@@ -8,7 +8,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Edit status change text<br><small>{{doc.title}}</small></h1>
+    <h1>Edit status change text<br><small class="text-muted">{{doc.title}}</small></h1>
 
     <p>The text will be submitted as <b>{{ doc.canonical_name }}-{{ next_rev }}</b>:</p>
 

ietf/templates/doc/submit_to_iesg.html

@@ -10,7 +10,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Publication request<br><small>{{doc.name}}-{{doc.rev}}</small></h1>
+    <h1>Publication request<br><small class="text-muted">{{doc.name}}-{{doc.rev}}</small></h1>
 
     <p>
         Please verify the following information:

ietf/templates/group/add_comment.html

@@ -8,7 +8,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Add comment<br><small>{{ group }} ({{ group.acronym }})</small></h1>
+    <h1>Add comment<br><small class="text-muted">{{ group }} ({{ group.acronym }})</small></h1>
 
     <form method="post">
         {% csrf_token %}

ietf/templates/iesg/photos.html

@@ -22,18 +22,16 @@
                         <div class="card text-center">
                             {% if person_with_groups.grouper.photo_thumb %}
                                 <img class="card-img-top"
-                                     src="{{ person_with_groups.grouper.photo_thumb.url }}"
-                                     alt="Photo of {{ person_with_groups.grouper.name }}"/>
+                                    src="{{ person_with_groups.grouper.photo_thumb.url }}"
+                                    alt="Photo of {{ person_with_groups.grouper.name }}"/>
                             {% else %}
-                                <img class="card-img-top"
-                                     src="{% static "ietf/images/nopictureavailable.jpg" %}"
-                                     alt="No photo available"/>
+                                <i class="bi bi-person-square text-muted" style="font-size: 6rem;"></i>
                             {% endif %}
                             <div class="card-body">
                                 <p class="card-title fs-5">
                                     {% if person_with_groups.grouper.photo %}
                                         <a class="stretched-link"
-                                           href="{% url 'ietf.person.views.profile' email_or_name=person_with_groups.grouper.name %}">
+                                            href="{% url 'ietf.person.views.profile' email_or_name=person_with_groups.grouper.name %}">
                                     {% endif %}
                                     {{ person_with_groups.grouper.plain_name }}
                                     {% if person_with_groups.grouper.photo %}</a>{% endif %}

ietf/templates/ipr/add_comment.html

@@ -8,7 +8,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Add comment<br><small>{{ ipr }}</small></h1>
+    <h1>Add comment<br><small class="text-muted">{{ ipr }}</small></h1>
 
     <p>The comment will be added to the history trail of the disclosure.</p>
 

ietf/templates/ipr/add_email.html

@@ -8,7 +8,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Add email<br><small>{{ ipr }}</small></h1>
+    <h1>Add email<br><small class="text-muted">{{ ipr }}</small></h1>
 
     <p>The email will be added to the history trail of the disclosure.</p>
 

ietf/templates/ipr/details_history.html

@@ -12,7 +12,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>History for IPR disclosure<br><small>{{ ipr.title }}</small></h1>
+    <h1>History for IPR disclosure<br><small class="text-muted">{{ ipr.title }}</small></h1>
 
     {% include "ipr/details_tabs.html" %}
 

ietf/templates/ipr/details_view.html

@@ -14,7 +14,7 @@
     {% origin %}
     <div id="ipr-details">
 
-        <h1>IPR Details<br><small>{{ ipr.title }}</small></h1>
+        <h1>IPR Details<br><small class="text-muted">{{ ipr.title }}</small></h1>
 
         {% include "ipr/details_tabs.html" %}
 

ietf/templates/ipr/email.html

@@ -12,7 +12,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Email submitter<br><small>{{ ipr.title }}</small></h1>
+    <h1>Email submitter<br><small class="text-muted">{{ ipr.title }}</small></h1>
 
     <form method="post" class="show-required">
         {% csrf_token %}

ietf/templates/ipr/notify.html

@@ -8,7 +8,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Send Notification{{ formset|pluralize }}<br><small>{{ ipr }}</small></h1>
+    <h1>Send Notification{{ formset|pluralize }}<br><small class="text-muted">{{ ipr }}</small></h1>
 
     <form class="send-notification" method="post">
         {% csrf_token %}

ietf/templates/ipr/state.html

@@ -8,7 +8,7 @@
 
 {% block content %}
     {% origin %}
-    <h1>Change State<br><small>{{ ipr }}</small></h1>
+    <h1>Change State<br><small class="text-muted">{{ ipr }}</small></h1>
 
     <form class="add-comment" method="post">
         {% csrf_token %}

ietf/templates/liaisons/add_comment.html

@@ -1,27 +1,26 @@
+{# bs5ok #}
 {% extends "base.html" %}
 {# Copyright The IETF Trust 2015, All Rights Reserved #}
 {% load origin %}
-
 {% load django_bootstrap5 %}
-
 {% block title %}Add comment on {{ liaison.title }}{% endblock %}
-
 {% block content %}
     {% origin %}
-    <h1>Add comment<br><small>{{ liaison.title }}</small></h1>
-
-    <p>The comment will be added to the history trail of the statement.</p>
-
+    <h1>
+        Add comment
+        <br>
+        <small class="text-muted">{{ liaison.title }}</small>
+    </h1>
+    <p>
+        The comment will be added to the history trail of the statement.
+    </p>
     <form class="add-comment" method="post">
         {% csrf_token %}
-
-        {% bootstrap_form form %}
-
-
-
-        <button type="submit" class="btn btn-primary">Add Comment</button>
-        <a class="btn btn-primary float-end" href="{% url "ietf.liaisons.views.liaison_history" object_id=liaison.id %}">Back</a>
-
-
+        {% bootstrap_form form layout="horizontal" %}
+        <button type="submit" class="offset-md-2 btn btn-primary">Add Comment</button>
+        <a class="btn btn-secondary float-end"
+           href="{% url "ietf.liaisons.views.liaison_history" object_id=liaison.id %}">
+            Back
+        </a>
     </form>
-{% endblock %}
+{% endblock %}

ietf/templates/liaisons/detail.html

@@ -1,20 +1,20 @@
+{# bs5ok #}
 {% extends "base.html" %}
 {# Copyright The IETF Trust 2015, All Rights Reserved #}
 {% load origin %}
-
-{% load ietf_filters %}
-
-{% block title %}Liaison statement: {% include 'liaisons/liaison_title.html' %}{% endblock %}
-
-
+{% load ietf_filters person_filters %}
+{% block title %}
+    Liaison statement:
+    {% include 'liaisons/liaison_title.html' %}
+{% endblock %}
 {% block content %}
     {% origin %}
     <h1>
-        Liaison statement<br><small>{% include 'liaisons/liaison_title.html' %}</small>
+        Liaison statement
+        <br>
+        <small class="text-muted">{% include 'liaisons/liaison_title.html' %}</small>
     </h1>
-
     {% include "liaisons/detail_tabs.html" %}
-
     <table class="table table-sm table-striped">
         <tr>
             <th>State</th>
@@ -22,67 +22,56 @@
         </tr>
         <tr>
             <th class="text-nowrap">Submitted Date</th>
-            <td>{{ liaison.submitted|date:"Y-m-d" }}</td></tr>
+            <td>{{ liaison.submitted|date:"Y-m-d" }}</td>
+        </tr>
         <tr>
             <th class="text-nowrap">From Group{{ liaison.from_groups.all|pluralize }}</th>
             <td>{{ liaison.from_groups_display }}</td>
         </tr>
-
         {% if liaison.from_contact %}
             <tr>
                 <th class="text-nowrap">From Contact</th>
-                <td>
-                    <a href="mailto:{{ liaison.from_contact.address }}">{{ liaison.from_contact.person }}</a>
-                </td>
+                <td>{% person_link liaison.from_contact.person %}</td>
             </tr>
         {% endif %}
-
         <tr>
             <th class="text-nowrap">To Group{{ liaison.to_groups.all|pluralize }}</th>
             <td>{{ liaison.to_groups_display }}</td>
         </tr>
-
         {% if liaison.to_contacts %}
             <tr>
                 <th class="text-nowrap">To Contacts</th>
-                <td>
-                    {{ liaison.to_contacts|parse_email_list|make_one_per_line|safe|linebreaksbr }}
-                </td>
+                <td>{{ liaison.to_contacts|parse_email_list|make_one_per_line|safe|linebreaksbr }}</td>
             </tr>
         {% endif %}
-
         {% if liaison.cc_contacts %}
             <tr>
-                <th class="text-nowrap">Cc</th><td>{{ liaison.cc_contacts|parse_email_list|make_one_per_line|safe|linebreaksbr }}</td>
+                <th class="text-nowrap">Cc</th>
+                <td>{{ liaison.cc_contacts|parse_email_list|make_one_per_line|safe|linebreaksbr }}</td>
             </tr>
         {% endif %}
-
         {% if liaison.response_contacts %}
             <tr>
                 <th class="text-nowrap">Response Contact</th>
                 <td>{{ liaison.response_contacts|parse_email_list|make_one_per_line|safe|linebreaksbr }}</td>
             </tr>
         {% endif %}
-
         {% if liaison.technical_contacts %}
             <tr>
                 <th class="text-nowrap">Technical Contact</th>
                 <td>{{ liaison.technical_contacts|parse_email_list|make_one_per_line|safe|linebreaksbr }}</td>
             </tr>
         {% endif %}
-
         {% if liaison.action_holder_contacts %}
             <tr>
                 <th class="text-nowrap">Action Holder Contacts</th>
                 <td>{{ liaison.action_holder_contacts|parse_email_list|make_one_per_line|safe|linebreaksbr }}</td>
             </tr>
         {% endif %}
-
         <tr>
             <th class="text-nowrap">Purpose</th>
             <td>{{ liaison.purpose.name }}</td>
         </tr>
-
         {% if liaison.deadline %}
             <tr>
                 <th class="text-nowrap">Deadline</th>
@@ -96,114 +85,163 @@
                     {% if can_take_care %}
                         <form method="post" class="float-end">
                             {% csrf_token %}
-                            <input class="btn btn-warning btn-sm" type="submit" value="Mark as action taken" name='do_action_taken'>
+                            <input class="btn btn-warning btn-sm"
+                                   type="submit"
+                                   value="Mark as action taken"
+                                   name='do_action_taken'>
                         </form>
                     {% endif %}
                 </td>
             </tr>
         {% endif %}
-
         {% if relations %}
             <tr>
-                <th class="text-nowrap">Liaisons referring to this</th>
+                <th class="text-nowrap">
+                    Liaisons referring to this
+                </th>
                 <td>
                     {% for rel in relations %}
                         <a href="{% url "ietf.liaisons.views.liaison_detail" rel.pk %}">
-                            {% if rel.title %}{{ rel.title }}{% else %}Liaison #{{ rel.pk }}{% endif %}
+                            {% if rel.title %}
+                                {{ rel.title }}
+                            {% else %}
+                                Liaison #{{ rel.pk }}
+                            {% endif %}
                         </a>
                         <br>
                     {% endfor %}
                 </td>
             </tr>
         {% endif %}
-
         {% if liaison.related_to %}
             {% if liaison.related_to.approved or is_approving %}
                 <tr>
-                    <th class="text-nowrap">Referenced liaison</th>
+                    <th class="text-nowrap">
+                        Referenced liaison
+                    </th>
                     <td>
                         <a href="{% url "ietf.liaisons.views.liaison_detail" liaison.related_to.pk %}">
-                            {% if liaison.related_to.title %}{{ liaison.related_to.title }}{% else %}Liaison #{{ liaison.related_to.pk }}{% endif %}
+                            {% if liaison.related_to.title %}
+                                {{ liaison.related_to.title }}
+                            {% else %}
+                                Liaison #{{ liaison.related_to.pk }}
+                            {% endif %}
                         </a>
                     </td>
                 </tr>
             {% endif %}
         {% endif %}
-
         {% if liaison.other_identifiers %}
             <tr>
-                <th class="text-nowrap">Other Identifiers</th>
-                <td>{{ liaison.other_identifiers }}</td>
+                <th class="text-nowrap">
+                    Other Identifiers
+                </th>
+                <td>
+                    {{ liaison.other_identifiers }}
+                </td>
             </tr>
         {% endif %}
-
         <tr>
-            <th class="text-nowrap">Attachments</th>
+            <th class="text-nowrap">
+                Attachments
+            </th>
             <td>
                 {% for doc in liaison.active_attachments.all %}
-                    <a href="{{ doc.get_href }}">{{ doc.title }}</a>
+                    <a href="{{ doc.get_href }}">
+                        {{ doc.title }}
+                    </a>
                     {% if not forloop.last %}<br>{% endif %}
                 {% empty %}
                     (None)
                 {% endfor %}
             </td>
         </tr>
-
         {% if relations_by %}
             <tr>
-                <th class="text-nowrap">Liaisons referred by this one</th>
+                <th class="text-nowrap">
+                    Liaisons referred by this one
+                </th>
                 <td>
                     {% for rel in relations_by %}
-                        <a href="{% url "ietf.liaisons.views.liaison_detail" rel.pk %}">{% if rel.title %}{{ rel.title }}{% else %}Liaison #{{ rel.pk }}{% endif %}</a><br />
+                        <a href="{% url "ietf.liaisons.views.liaison_detail" rel.pk %}">
+                            {% if rel.title %}
+                                {{ rel.title }}
+                            {% else %}
+                                Liaison #{{ rel.pk }}
+                            {% endif %}
+                        </a>
+                        <br />
                     {% endfor %}
                 </td>
             </tr>
         {% endif %}
-
         {% if relations_to %}
             <tr>
-                <th class="text-nowrap">Liaisons referring to this one</th>
+                <th class="text-nowrap">
+                    Liaisons referring to this one
+                </th>
                 <td>
                     {% for rel in relations_to %}
-                        <a href="{% url "ietf.liaisons.views.liaison_detail" rel.pk %}">{% if rel.title %}{{ rel.title }}{% else %}Liaison #{{ rel.pk }}{% endif %}</a><br />
+                        <a href="{% url "ietf.liaisons.views.liaison_detail" rel.pk %}">
+                            {% if rel.title %}
+                                {{ rel.title }}
+                            {% else %}
+                                Liaison #{{ rel.pk }}
+                            {% endif %}
+                        </a>
+                        <br />
                     {% endfor %}
                 </td>
             </tr>
         {% endif %}
-
         {% if liaison.from_contact and liaison.body %}
             <tr>
-                <th class="text-nowrap">Body</th>
+                <th class="text-nowrap">
+                    Body
+                </th>
                 <td>
                     <pre>{{ liaison.body|maybewordwrap:"80" }}</pre>
                 </td>
             </tr>
         {% endif %}
-
     </table>
-
-
     <form method="post">
         {% csrf_token %}
         {% if liaison.state.slug == 'pending' and can_edit %}
-            <a class="btn btn-primary" href="{% url "ietf.liaisons.views.liaison_edit" object_id=liaison.pk %}">Edit liaison</a>
+            <a class="btn btn-primary"
+               href="{% url "ietf.liaisons.views.liaison_edit" object_id=liaison.pk %}">
+                Edit liaison
+            </a>
         {% elif liaison.state.slug == 'posted' and  user|has_role:"Secretariat" %}
-            <a class="btn btn-primary" href="{% url "ietf.liaisons.views.liaison_edit" object_id=liaison.pk %}">Edit liaison</a>
+            <a class="btn btn-primary"
+               href="{% url "ietf.liaisons.views.liaison_edit" object_id=liaison.pk %}">
+                Edit liaison
+            </a>
         {% endif %}
         {% if liaison.state.slug != 'dead' and can_reply %}
-            <a class="btn btn-primary" href="{% url "ietf.liaisons.views.liaison_reply" object_id=liaison.pk %}">Reply to liaison</a>
+            <a class="btn btn-primary"
+               href="{% url "ietf.liaisons.views.liaison_reply" object_id=liaison.pk %}">
+                Reply to liaison
+            </a>
         {% endif %}
         {% if liaison.state.slug == 'pending' and can_edit %}
             <input class="btn btn-primary" type="submit" value="Approve" name='approved' />
-            <input class="btn btn-primary" type="submit" value="Mark as Dead" name='dead' />
+            <input class="btn btn-primary"
+                   type="submit"
+                   value="Mark as Dead"
+                   name='dead'/>
         {% endif %}
         {% if liaison.state.slug == 'posted' and  user|has_role:"Secretariat" %}
-            <a class="btn btn-primary" href="{% url "ietf.liaisons.views.liaison_resend" object_id=liaison.pk %}">Resend statement</a>
+            <a class="btn btn-primary"
+               href="{% url "ietf.liaisons.views.liaison_resend" object_id=liaison.pk %}">
+                Resend statement
+            </a>
         {% endif %}
         {% if liaison.state.slug == 'dead' and can_edit %}
-            <input class="btn btn-primary" type="submit" value="Resurrect" name='resurrect' />
+            <input class="btn btn-primary"
+                   type="submit"
+                   value="Resurrect"
+                   name='resurrect'/>
         {% endif %}
     </form>
-
-
-{% endblock %}
+{% endblock %}

ietf/templates/liaisons/detail_history.html

@@ -1,39 +1,41 @@
+{# bs5ok #}
 {% extends "base.html" %}
-
 {% load ietf_filters static %}
-
 {% block pagehead %}
     <link rel="stylesheet" href="{% static "ietf/css/list.css" %}">
 {% endblock %}
-
 {% block title %}History for Liaison Statement - {{ liaison.title }}{% endblock %}
-
 {% block content %}
-    <h1>History for Liaison Statement<br><small>{{ liaison.title }}</small></h1>
-
+    <h1>
+        History for Liaison Statement
+        <br>
+        <small class="text-muted">{{ liaison.title }}</small>
+    </h1>
     {% include "liaisons/detail_tabs.html" %}
-
     {% if user|has_role:"Area Director,Secretariat,IANA,RFC Editor" %}
         <p class="buttonlist">
-            <a class="btn btn-primary" href="{% url "ietf.liaisons.views.add_comment" object_id=liaison.id %}" title="Add comment to history">Add comment</a>
+            <a class="btn btn-primary"
+               href="{% url "ietf.liaisons.views.add_comment" object_id=liaison.id %}"
+               title="Add comment to history">
+                Add comment
+            </a>
         </p>
     {% endif %}
-
     <table class="table table-sm table-striped history tablesorter">
         <thead>
             <tr>
-                <th>Date</th>
-                <th>Type</th>
-                <th>By</th>
-                <th>Text</th>
+                <th data-sort="date">Date</th>
+                <th data-sort="type">Type</th>
+                <th data-sort="by">By</th>
+                <th data-sort="text">Text</th>
             </tr>
         </thead>
-
         <tbody>
             {% for e in events %}
                 <tr>
                     <td class="text-nowrap">{{ e.time|date:"Y-m-d" }}</td>
-                    <td>{{ e.type }}
+                    <td>
+                        {{ e.type }}
                         {% if e.response_due and e.response_past_due %}
                             <span class="bi bi-exclamation-circle" title="Response overdue"></span>
                         {% endif %}
@@ -45,7 +47,6 @@
         </tbody>
     </table>
 {% endblock content %}
-
 {% block js %}
     <script src="{% static "ietf/js/list.js" %}"></script>
-{% endblock %}
+{% endblock %}

ietf/templates/liaisons/detail_tabs.html

@@ -1,7 +1,8 @@
-<ul class="nav nav-tabs">
+{# bs5ok #}
+<ul class="nav nav-tabs my-3">
     {% for name, link, selected in tabs %}
         <li class="nav-item">
             <a class="nav-link {% if selected %}active{% endif %}" href="{{ link }}">{{ name }}</a>
         </li>
     {% endfor %}
-</ul>
+</ul>

ietf/templates/liaisons/edit.html

@@ -1,77 +1,81 @@
+{# bs5ok #}
 {% extends "base.html" %}
 {# Copyright The IETF Trust 2015, All Rights Reserved #}
 {% load origin %}
 {% load static %}
 {% load ietf_filters %}
 {% load django_bootstrap5 widget_tweaks %}
-
-{% block title %}{% if liaison %}Edit liaison: {{ liaison }}{% else %}Send Liaison Statement{% endif %}{% endblock %}
-
+{% block title %}
+    {% if liaison %}
+        Edit liaison: {{ liaison }}
+    {% else %}
+        Send Liaison Statement
+    {% endif %}
+{% endblock %}
 {% block pagehead %}
-    <link rel="stylesheet" href="{% static 'ietf/css/datepicker.css' %}">
-    {{ form.media.css }} {# n.b., liaisons.js relies on select2 CSS being loaded by this #}
+    {{ form.media.css }}
     <link rel="stylesheet" href="{% static 'ietf/css/liaisons.css' %}">
 {% endblock %}
-
-{% block morecss %}
-    .widget { height: auto; min-height: 34px; }
-{% endblock %}
-
 {% block content %}
     {% origin %}
-
-    <h1>{% if liaison %}Edit liaison: {{ liaison }}{% else %}Send Liaison Statement{% endif %}</h1>
-
+    <h1>
+        {% if liaison %}
+            Edit liaison: {{ liaison }}
+        {% else %}
+            Send Liaison Statement
+        {% endif %}
+    </h1>
     {% if form.errors %}
         <div class="alert alert-danger">
-            <p>There were errors in the submitted form -- see below. Please correct these and resubmit.</p>
+            <p>
+                There were errors in the submitted form -- see below. Please correct these and resubmit.
+            </p>
         </div>
     {% endif %}
-
     {% bootstrap_form_errors form %}
-
-    <noscript class="js-info">
-        This page depends on Javascript being enabled to work properly. Please enable Javascript and reload the page.
-    </noscript>
-
     {% if not liaison %}
-        <p class="help-block">If you wish to submit your liaison statement by e-mail, then please send it to <a href="mailto:statements@ietf.org">statements@ietf.org</a></p>
-
-        <p class="help-block">Fields marked with <label class="required"></label> are required. For detailed descriptions of the fields see the <a href="{% url 'liaison-help-fields'%}">field help</a>.</p>
+        <p class="help-block">
+            If you wish to submit your liaison statement by e-mail, then please send it to
+            <a href="mailto:statements@ietf.org">statements@ietf.org</a>
+        </p>
+        <p class="help-block">
+            Fields marked with
+            <label class="required"></label>
+            are required. For detailed descriptions of the fields see the
+            <a href="{% url 'liaison-help-fields' %}">field help</a>
+            .
+        </p>
     {% endif %}
-
-    <form role="form" class="liaisons-form form-horizontal show-required" method="post" enctype="multipart/form-data" data-edit-form="{{ form.edit }}" data-ajax-info-url="{% url "ietf.liaisons.views.ajax_get_liaison_info" %}">{% csrf_token %}
-
+    <form role="form"
+          class="liaisons-form form-horizontal show-required"
+          method="post"
+          enctype="multipart/form-data"
+          data-edit-form="{{ form.edit }}"
+          data-ajax-info-url="{% url "ietf.liaisons.views.ajax_get_liaison_info" %}">
+        {% csrf_token %}
         {% for fieldset in form.fieldsets %}
-            {% if forloop.first and user|has_role:"Secretariat" %}
-                <h2><div class="col-md-2">{{ fieldset.name }}</div><div class="col-md-10"></div></h2>
-            {% else %}
-                <h2>{{ fieldset.name }}</h2>
-            {% endif %}
-
+            <h2>{{ fieldset.name }}</h2>
             {% for field in fieldset %}
                 {% bootstrap_field field layout="horizontal" %}
             {% endfor %}
         {% endfor %}
-
-
-
-        <a class="btn btn-danger float-end" href="{% if liaison %}{% url "ietf.liaisons.views.liaison_detail" object_id=liaison.pk %}{% else %}{% url "ietf.liaisons.views.liaison_list" %}{% endif %}">Cancel</a>
-
+        <a class="btn btn-danger float-end"
+           href="{% if liaison %}
+                     {% url "ietf.liaisons.views.liaison_detail" object_id=liaison.pk %}
+                 {% else %}
+                     {% url "ietf.liaisons.views.liaison_list" %}
+                 {% endif %}">
+            Cancel
+        </a>
         {% if not liaison %}
             <button name="send" type="submit" class="btn btn-primary">Send and post</button>
             <button name="post_only" type="submit" class="btn btn-primary">Post only</button>
         {% else %}
             <button name="save" type="submit" class="btn btn-primary">Save</button>
         {% endif %}
-
-
     </form>
-
 {% endblock %}
-
 {% block js %}
-    <script src="{% static 'ietf/js/datepicker.js' %}"></script>
-    {{ form.media.js }} {# n.b., liaisons.js relies on select2.js being loaded by this #}
+    {{ form.media.js }}
     <script src="{% static 'ietf/js/liaisons.js' %}"></script>
-{% endblock %}
+{% endblock %}

ietf/templates/liaisons/field_help.html

@@ -1,26 +1,21 @@
+{# bs5ok #}
 {% extends "base.html" %}
 {# Copyright The IETF Trust 2015, All Rights Reserved #}
 {% load origin %}
-
 {% load ietf_filters static %}
-
 {% block pagehead %}
     <link rel="stylesheet" href="{% static "ietf/css/list.css" %}">
 {% endblock %}
-
 {% block title %}Liaison statement field help{% endblock %}
-
 {% block content %}
     {% origin %}
     <h1>Liaison statement field help</h1>
-
     <p>
         The table below provides descriptions of the fields included in the
         liaison statement submission form, and suggestions for completing them,
         where appropriate.  Additional materials that may be useful in
         completing this form can be found in the following documents:
     </p>
-
     <ul>
         <li>
             <a href="/liaison/help/to_ietf/">
@@ -28,9 +23,7 @@
             </a>
         </li>
         <li>
-            <a href="/liaison/help/from_ietf/">
-                Liaison statements from the IETF: guidelines for completing the "Cc:" field
-            </a>
+            <a href="/liaison/help/from_ietf/">Liaison statements from the IETF: guidelines for completing the "Cc:" field</a>
         </li>
         <li>
             <a href="/wg/">Active IETF working groups</a>
@@ -39,22 +32,18 @@
             <a href="https://www.ietf.org/liaison/managers.html">IETF liaison managers</a>
         </li>
     </ul>
-
     <p>
         For definitive information on generating liaison statements, please
         see
-        <a href="{{ "4053"|rfcurl }}">
-            RFC 4053 (BCP 103) "Procedures for Handling Liaison Statements to and from the IETF."
-        </a>
+        <a href="{{ "4053"|rfcurl }}">RFC 4053 (BCP 103) "Procedures for Handling Liaison Statements to and from the IETF."</a>
     </p>
-
     <table class="table table-sm table-striped tablesorter">
         <thead>
             <tr>
-                <th>Fieldset</th>
-                <th>Field</th>
-                <th>Description</th>
-                <th>Comments</th>
+                <th data-sort="fieldset">Fieldset</th>
+                <th data-sort="field">Field</th>
+                <th data-sort="description">Description</th>
+                <th data-sort="comments">Comments</th>
             </tr>
         </thead>
         <tr>
@@ -66,120 +55,178 @@
         <tr>
             <th>From</th>
             <th>From Contact</th>
-            <td>
-                The e-mail address of the person submitting the liaison statement.
-            </td>
+            <td>The e-mail address of the person submitting the liaison statement.</td>
             <td>The field is filled in automatically.</td>
         </tr>
         <tr>
             <th>From</th>
             <th>Response Contacts</th>
-            <td>
-                The e-mail address(es) to which any response should be sent, separated by commas.
-            </td>
+            <td>The e-mail address(es) to which any response should be sent, separated by commas.</td>
             <td>Mandatory format: Name &lt;e-mail address&gt</td>
-            </tr
-            <tr>
-                <th>To</th>
-                <th>Groups</th>
-                <td>
-                    The organization(s) (and sub-group, if applicable) to which the liaison statement is being sent.
-                </td>
-                <td>
-                    Drop-down menu with available choices.  If an SDO is not listed, please contact statements@ietf.org
-                </td>
-            </tr>
-            <tr>
-                <th>To</th>
-                <th>Contacts</th>
-                <td>
-                    The e-mail address(es) of the recipient(s) of the liaison statement, separated by commas.
-                </td>
-                <td>The field may be filled in automatically.</td>
-            </tr>
-            <tr>
-                <th>Other email addresses</th>
-                <th>Technical contact</th>
-                <td>
-                    The e-mail address(es) of individuals or lists that may be contacted for clarification of the liaison statement, separated by commas.
-                </td>
-                <td>Optional. Suggested format: Name &lt;e-mail address&gt</td>
-            </tr>
-            <tr>
-                <th>Other email addresses</th>
-                <th>Action Holder Contacts</th>
-                <td>
-                    The e-mail address(es) of the persons responsible for acting on the statement.
-                </td>
-                <td>Optional. Suggested format: Name &lt;e-mail address&gt</td>
-            </tr>
-            <tr>
-                <th>Other email addresses</th>
-                <th>Cc</th>
-                <td>
-                    The e-mail address(es) of the copy recipient(s) of the liaison statement, one on each line.
-                </td>
-                <td>Optional. Suggested format: Name &lt;e-mail address&gt</td>
-            </tr>
-            <tr>
-                <th>Purpose</th>
-                <th>Purpose</th>
-                <td>
-                    The intent of the liaison statement.  One of four choices: (a) For action, (b) For comment, (c) For information, (d) In Response.
-                </td>
-                <td>
-                    The submitter selects one of the four choices.
-                </td>
-            </tr>
-            <tr>
-                <th>Purpose</th>
-                <th>Deadline</th>
-                <td>The date by which a comment or action is required.</td>
-                <td>
-                    Mandatory if the purpose is "For comment" or "For action."
-                </td>
-            </tr>
-
-            <tr>
-                <th>Liaison statements</th>
-                <th>Title</th>
-                <td>The title of the liaison statement.</td>
-                <td>Mandatory.</td>
-            </tr>
-            <tr>
-                <th>Liaison statements</th>
-                <th>Submission date</th>
-                <td>The date the liaison was originally submitted.</td>
-                <td>Mandatory.</td>
-            </tr>
-            <tr>
-                <th>Liaison statements</th>
-                <th>Body</th>
-                <td>The text of the liaison statement.</td>
-                <td>
-                    Mandatory if there are no attachments. Optional if the text of the liaison statement is provided in an attachment.
-                </td>
-            </tr>
-
-            <tr>
-                <th>Add attachment</th>
-                <th>Title</th>
-                <td>The title of the attachment.</td>
-                <td>
-                    Optional if there is text in the body, mandatory if there is not.
-                </td>
-            </tr>
-            <tr>
-                <th>Add attachment</th>
-                <th>File</th>
-                <td>Browse to find the attachment.</td>
-                <td>
-                    Optional if there is text in the body, mandatory if there is not.
-                </td>
-            </tr>
-        </table>
+        </tr
+        <tr>
+            <th>To</th>
+            <th>Groups</th>
+            <td>The organization(s) (and sub-group, if applicable) to which the liaison statement is being sent.</td>
+            <td>Drop-down menu with available choices.  If an SDO is not listed, please contact statements@ietf.org</td>
+        </tr>
+        <tr>
+            <th>
+                To
+            </th>
+            <th>
+                Contacts
+            </th>
+            <td>
+                The e-mail address(es) of the recipient(s) of the liaison statement, separated by commas.
+            </td>
+            <td>
+                The field may be filled in automatically.
+            </td>
+        </tr>
+        <tr>
+            <th>
+                Other email addresses
+            </th>
+            <th>
+                Technical contact
+            </th>
+            <td>
+                The e-mail address(es) of individuals or lists that may be contacted for clarification of the liaison statement, separated by commas.
+            </td>
+            <td>
+                Optional. Suggested format: Name &lt;e-mail address&gt
+            </td>
+        </tr>
+        <tr>
+            <th>
+                Other email addresses
+            </th>
+            <th>
+                Action Holder Contacts
+            </th>
+            <td>
+                The e-mail address(es) of the persons responsible for acting on the statement.
+            </td>
+            <td>
+                Optional. Suggested format: Name &lt;e-mail address&gt
+            </td>
+        </tr>
+        <tr>
+            <th>
+                Other email addresses
+            </th>
+            <th>
+                Cc
+            </th>
+            <td>
+                The e-mail address(es) of the copy recipient(s) of the liaison statement, one on each line.
+            </td>
+            <td>
+                Optional. Suggested format: Name &lt;e-mail address&gt
+            </td>
+        </tr>
+        <tr>
+            <th>
+                Purpose
+            </th>
+            <th>
+                Purpose
+            </th>
+            <td>
+                The intent of the liaison statement.  One of four choices: (a) For action, (b) For comment, (c) For information, (d) In Response.
+            </td>
+            <td>
+                The submitter selects one of the four choices.
+            </td>
+        </tr>
+        <tr>
+            <th>
+                Purpose
+            </th>
+            <th>
+                Deadline
+            </th>
+            <td>
+                The date by which a comment or action is required.
+            </td>
+            <td>
+                Mandatory if the purpose is "For comment" or "For action."
+            </td>
+        </tr>
+        <tr>
+            <th>
+                Liaison statements
+            </th>
+            <th>
+                Title
+            </th>
+            <td>
+                The title of the liaison statement.
+            </td>
+            <td>
+                Mandatory.
+            </td>
+        </tr>
+        <tr>
+            <th>
+                Liaison statements
+            </th>
+            <th>
+                Submission date
+            </th>
+            <td>
+                The date the liaison was originally submitted.
+            </td>
+            <td>
+                Mandatory.
+            </td>
+        </tr>
+        <tr>
+            <th>
+                Liaison statements
+            </th>
+            <th>
+                Body
+            </th>
+            <td>
+                The text of the liaison statement.
+            </td>
+            <td>
+                Mandatory if there are no attachments. Optional if the text of the liaison statement is provided in an attachment.
+            </td>
+        </tr>
+        <tr>
+            <th>
+                Add attachment
+            </th>
+            <th>
+                Title
+            </th>
+            <td>
+                The title of the attachment.
+            </td>
+            <td>
+                Optional if there is text in the body, mandatory if there is not.
+            </td>
+        </tr>
+        <tr>
+            <th>
+                Add attachment
+            </th>
+            <th>
+                File
+            </th>
+            <td>
+                Browse to find the attachment.
+            </td>
+            <td>
+                Optional if there is text in the body, mandatory if there is not.
+            </td>
+        </tr>
+    </table>
 {% endblock %}
-
 {% block js %}
-    <script src="{% static "ietf/js/list.js" %}"></script>
-{% endblock %}
+    <script src="{% static "ietf/js/list.js" %}">
+    </script>
+{% endblock %}

ietf/templates/liaisons/guide_from_ietf.html

@@ -1,87 +1,141 @@
+{# bs5ok #}
 {% extends "base.html" %}
 {# Copyright The IETF Trust 2015, All Rights Reserved #}
 {% load origin %}
-
 {% load ietf_filters static %}
-
 {% block pagehead %}
     <link rel="stylesheet" href="{% static "ietf/css/list.css" %}">
 {% endblock %}
-
 {% block title %}Liaison statements from the IETF - guidelines for completing the "Cc:" field{% endblock %}
-
 {% block content %}
     {% origin %}
-    <h1>Liaison statements from the IETF<br><small>Guidelines for completing the "Cc:" field</small></h1>
-
-    <p>The individuals copied on a liaison statement that is sent by the IETF to another Standards Development Organization (SDO) depend on the IETF entity that is sending the liaison statement.</p>
+    <h1>
+        Liaison statements from the IETF
+        <br>
+        <small class="text-muted">Guidelines for completing the "Cc:" field</small>
+    </h1>
     <p>
-        The following table provides guidelines for completing the "Cc:" field of liaison statements that are sent by the IETF.</p>
-
-    <p>For definitive information on generating liaison statements, please
-        see:</p>
-
+        The individuals copied on a liaison statement that is sent by the IETF to another Standards Development Organization (SDO) depend on the IETF entity that is sending the liaison statement.
+    </p>
+    <p>
+        The following table provides guidelines for completing the "Cc:" field of liaison statements that are sent by the IETF.
+    </p>
+    <p>
+        For definitive information on generating liaison statements, please
+        see:
+    </p>
     <ul>
-        <li><a href="{{ "4052"|rfcurl }}">RFC 4052 (BCP 102), "IAB Processes for Management of IETF Liaison Relationships"</a></li>
-        <li><a href="{{ "4053"|rfcurl }}">RFC 4053 (BCP 103), "Procedures for Handling Liaison Statements to and from the IETF"</a></li>
+        <li>
+            <a href="{{ "4052"|rfcurl }}">RFC 4052 (BCP 102), "IAB Processes for Management of IETF Liaison Relationships"</a>
+        </li>
+        <li>
+            <a href="{{ "4053"|rfcurl }}">RFC 4053 (BCP 103), "Procedures for Handling Liaison Statements to and from the IETF"</a>
+        </li>
     </ul>
-
     <table class="table table-sm table-striped tablesorter">
         <thead>
             <tr>
-                <th>Submitting entity <sup><small>(1)</small></sup></th>
-                <th>Cc: field <sup><small>(1, 2, 3)</small></sup></th>
+                <th data-sort="from">
+                    Submitting entity <sup><small>(1)</small></sup>
+                </th>
+                <th data-sort="cc">
+                    Cc: field <sup><small>(1, 2, 3)</small></sup>
+                </th>
             </tr>
         </thead>
-
         <tr>
             <td>The IAB</td>
-            <td><a href="https://www.ietf.org/liaison/managers.html">The IETF Liaison Manager for the SDO</a> <sup><small>(4)</small></sup><br>
-                The IAB Chair (if not the submitter) &lt;iab-chair@iab.org&gt;<br>
-                The IAB &lt;iab@iab.org&gt;</li></td></tr>
+            <td>
+                <a href="https://www.ietf.org/liaison/managers.html">The IETF Liaison Manager for the SDO</a>
+                <sup><small>(4)</small></sup>
+                <br>
+                The IAB Chair (if not the submitter) &lt;iab-chair@iab.org&gt;
+                <br>
+                The IAB &lt;iab@iab.org&gt;
+            </li>
+        </td>
+    </tr>
     <tr>
         <td>The IESG</td>
-        <td><a href="https://www.ietf.org/liaison/managers.html">The IETF Liaison Manager for the SDO</a> <sup><small>(4)</small></sup><br>
-            The IETF Chair (if not the submitter) &lt;chair@ietf.org&gt;<br>
-            The IESG &lt;iesg@ietf.org&gt;</li></td></tr>
-    <tr>
-        <td>The IETF</td>
-        <td><a href="https://www.ietf.org/liaison/managers.html">The IETF Liaison Manager for the SDO</a> <sup><small>(4)</small></sup><br>
-            The IETF Chair (if not the submitter) &lt;chair@ietf.org&gt;<br>
-            The IESG &lt;iesg@ietf.org&gt;</li></td></tr>
-    <tr>
-        <td>An IETF Area</td>
-        <td><a href="https://www.ietf.org/liaison/managers.html">The IETF Liaison Manager for the SDO</a> <sup><small>(4)</small></sup><br>
-            <a href="/wg/">The IETF Area Director(s)</a> (if not the submitter)<br>
-            The IETF Chair &lt;chair@ietf.org&gt;<br>
-            The IETF Area Directorate Mailing List (where applicable) <sup><small>(5)</small></sup></li></td></tr>
-    <tr>
-        <td>An IETF Working Group</td>
-        <td><a href="https://www.ietf.org/liaison/managers.html">The IETF Liaison Manager for the SDO</a> <sup><small>(4)</small></sup><br>
-            <a href="/wg/">The IETF Working Group Chair(s)</a> (if not the submitter)<br>
-            <a href="/wg/">The IETF Area Director(s)</a><br>
-            <a href="/wg/">The IETF Working Group Discussion List</a></li></td></tr>
-    </table>
-
-    <p>
-        <sup><small>(1)</small></sup> Please see Section 4., "Approval and Transmission of Liaison Statements,"
-        of <a href="{{ "4052"|rfcurl }}">RFC 4052</a> for information on who may submit a liaison statement on behalf of an IETF entity, and who should be copied.
-    </p>
-    <p>
-        <sup><small>(2)</small></sup> The IETF Secretariat, <a href="mailto:statements@ietf.org">&lt;statements@ietf.org&gt;</a>, is automatically blind-copied on every liaison statement sent by the IETF.
-    </p>
-    <p>
-        <sup><small>(3)</small></sup> Any addresses included in the "Response Contact" and "Technical Contact" fields of a liaison statement will also receive copies of the liaison statement.
-    </p>
-    <p>
-        <sup><small>(4)</small></sup> This guideline does not apply when sending a liaison statement to an SDO where no formal liaison relationship exists between the IETF and that SDO.
-    </p>
-    <p>
-        <sup><small>(5)</small></sup> A list of Area Directorate mailing lists is not currently available.
-    </p>
-
+        <td>
+            <a href="https://www.ietf.org/liaison/managers.html">The IETF Liaison Manager for the SDO</a>
+            <sup><small>(4)</small></sup>
+            <br>
+            The IETF Chair (if not the submitter) &lt;chair@ietf.org&gt;
+            <br>
+            The IESG &lt;iesg@ietf.org&gt;
+        </li>
+    </td>
+</tr>
+<tr>
+    <td>The IETF</td>
+    <td>
+        <a href="https://www.ietf.org/liaison/managers.html">The IETF Liaison Manager for the SDO</a>
+        <sup><small>(4)</small></sup>
+        <br>
+        The IETF Chair (if not the submitter) &lt;chair@ietf.org&gt;
+        <br>
+        The IESG &lt;iesg@ietf.org&gt;
+    </li>
+</td>
+</tr>
+<tr>
+    <td>An IETF Area</td>
+    <td>
+        <a href="https://www.ietf.org/liaison/managers.html">The IETF Liaison Manager for the SDO</a>
+        <sup><small>(4)</small></sup>
+        <br>
+        <a href="/wg/">The IETF Area Director(s)</a>
+        (if not the submitter)
+        <br>
+        The IETF Chair &lt;chair@ietf.org&gt;
+        <br>
+        The IETF Area Directorate Mailing List (where applicable) <sup><small>(5)</small></sup>
+    </li>
+</td>
+</tr>
+<tr>
+    <td>An IETF Working Group</td>
+    <td>
+        <a href="https://www.ietf.org/liaison/managers.html">The IETF Liaison Manager for the SDO</a>
+        <sup><small>(4)</small></sup>
+        <br>
+        <a href="/wg/">The IETF Working Group Chair(s)</a>
+        (if not the submitter)
+        <br>
+        <a href="/wg/">The IETF Area Director(s)</a>
+        <br>
+        <a href="/wg/">The IETF Working Group Discussion List</a>
+    </li>
+</td>
+</tr>
+</table>
+<p>
+    <sup><small>(1)</small></sup> Please see Section 4., "Approval and Transmission of Liaison Statements,"
+    of
+    <a href="{{ "4052"|rfcurl }}">
+        RFC 4052
+    </a>
+    for information on who may submit a liaison statement on behalf of an IETF entity, and who should be copied.
+</p>
+<p>
+    <sup><small>(2)</small></sup> The IETF Secretariat,
+    <a href="mailto:statements@ietf.org">
+        &lt;statements@ietf.org&gt;
+    </a>
+    , is automatically blind-copied on every liaison statement sent by the IETF.
+</p>
+<p>
+    <sup><small>(3)</small></sup> Any addresses included in the "Response Contact" and "Technical Contact" fields of a liaison statement will also receive copies of the liaison statement.
+</p>
+<p>
+    <sup><small>(4)</small></sup> This guideline does not apply when sending a liaison statement to an SDO where no formal liaison relationship exists between the IETF and that SDO.
+</p>
+<p>
+    <sup><small>(5)</small></sup> A list of Area Directorate mailing lists is not currently available.
+</p>
 {% endblock %}
-
 {% block js %}
-    <script src="{% static "ietf/js/list.js" %}"></script>
-{% endblock %}
+    <script src="{% static "ietf/js/list.js" %}">
+    </script>
+{% endblock %}