From c65f68130ae1c53d6cc8456a4833c57546669027 Mon Sep 17 00:00:00 2001
From: Lars Eggert <lars@eggert.org>
Date: Mon, 29 Nov 2021 20:46:21 +0000
Subject: [PATCH] Finalize some bs5 templates  - Legacy-Id: 19714

---
 ietf/static/js/list.js                        |   2 +-
 ietf/templates/doc/search/status_columns.html |  82 +++++-----
 ietf/templates/iesg/agenda.html               |  18 +--
 ietf/templates/iesg/agenda_documents.html     | 116 +++++++-------
 ietf/templates/iesg/discusses.html            | 103 +++++++------
 ietf/templates/iesg/moderator_package.html    | 142 ++++++++++--------
 ietf/templates/iesg/nav.html                  |  45 ++++++
 ietf/templates/iesg/past_documents.html       |  98 +++++-------
 ietf/templates/iesg/photos.html               |  94 +++++-------
 package.json                                  |   3 +-
 10 files changed, 343 insertions(+), 360 deletions(-)
 create mode 100644 ietf/templates/iesg/nav.html

diff --git a/ietf/static/js/list.js b/ietf/static/js/list.js
index 9b3b2aad2..053c4840c 100644
--- a/ietf/static/js/list.js
+++ b/ietf/static/js/list.js
@@ -32,7 +32,7 @@ $(document)
                     })
                     .toArray();
 
-                if (fields.length && fields.filter(field => field != "")) {
+                if (fields.length == 0 || !fields.filter(field => field != "")) {
                     console.log("No table fields defined, disabling search/sort.");
 
                 } else {
diff --git a/ietf/templates/doc/search/status_columns.html b/ietf/templates/doc/search/status_columns.html
index fda581c12..cbcd6f1bd 100644
--- a/ietf/templates/doc/search/status_columns.html
+++ b/ietf/templates/doc/search/status_columns.html
@@ -1,86 +1,86 @@
-{# Copyright The IETF Trust 2015, All Rights Reserved #}{% load origin %}{% origin %}
+{# Copyright The IETF Trust 2015, All Rights Reserved #}
+{% load origin %}
+{% origin %}
 {% load ietf_filters ballot_icon person_filters %}
-
 <td>
-    <div class="float-end" id="ballot-icon-{{doc.name}}">
-        {% if doc.ballot %}{% ballot_icon doc %}{% endif %}
+    <div class="float-end mx-3 mb-3" id="ballot-icon-{{ doc.name }}">
+        {% if doc.ballot %}
+            {% ballot_icon doc %}
+        {% endif %}
     </div>
-
     {% if not doc.get_state_slug == "rfc" %}
         {% if '::' in doc.friendly_state %}
             {{ doc.friendly_state|safe|split:"::"|join:"::<wbr>" }}
         {% else %}
             {{ doc.friendly_state|safe }}
         {% endif %}
-
         {% if doc|state:"draft-rfceditor" %}
             <wbr>: <a href="https://www.rfc-editor.org/queue2.html#{{ doc.name }}">{{ doc|state:"draft-rfceditor" }}</a>
         {% endif %}
-
-        <wbr>{{ doc|auth48_alert_badge }}
-
-        <wbr>{{ doc|state_age_colored }}
-
+        {{ doc|auth48_alert_badge }}
+        {{ doc|state_age_colored }}
         {% if doc.telechat_date %}
-            <br>IESG telechat: {{ doc.telechat_date }}
+            <br>
+            IESG telechat: {{ doc.telechat_date }}
         {% endif %}
-
         {% with doc.active_defer_event as defer %}
             {% if defer %}
-                <br>Deferred by {{ defer.by }} on {{ defer.time|date:"Y-m-d" }})
+                <br>
+                Deferred by {{ defer.by }} on {{ defer.time|date:"Y-m-d" }})
             {% endif %}
         {% endwith %}
-
         {% if doc.stream %}
             <br>
             {% if doc|state:"stream" %}
-                {{ doc|state:"stream" }}{% if doc.intended_std_level %}:<wbr>{% endif %}
+                {{ doc|state:"stream" }}
+                {% if doc.intended_std_level %}
+                    :<wbr>
+                {% endif %}
             {% else %}
-                {{ doc.stream }} stream{% if doc.intended_std_level %}:<wbr>{% endif %}
+                {{ doc.stream }} stream
+                {% if doc.intended_std_level %}
+                    :<wbr>
+                {% endif %}
             {% endif %}
         {% endif %}
-
-        {% if doc.intended_std_level %}
-            {{ doc.intended_std_level }}
-        {% endif %}
-
+        {% if doc.intended_std_level %}{{ doc.intended_std_level }}{% endif %}
         {% if doc.duedate %}
             <br>
             Due date: {{ doc.duedate }}
-        {%endif %}
-
+        {% endif %}
         {% if doc.reviewed_by_teams %}
-            <br>Reviews:
+            <br>
+            Reviews:
             {% spaceless %}
-            {% for acronym in doc.reviewed_by_teams %}
-                <a href="{% url "ietf.group.views.group_home" acronym=acronym %}">{{ acronym }}</a>{% if not forloop.last %}, {% endif %}
-            {% endfor %}
+                {% for acronym in doc.reviewed_by_teams %}
+                    <a href="{% url "ietf.group.views.group_home" acronym=acronym %}">{{ acronym }}</a>
+                    {% if not forloop.last %},{% endif %}
+                {% endfor %}
             {% endspaceless %}
         {% endif %}
-
         {% for m in doc.milestones %}
             {% if forloop.first %}<br>{% endif %}
-            <span title="Part of {{ m.group.acronym }} milestone: {{ m.desc }}" class="milestone">{{ m.due|date:"M Y" }}</span>{% if not forloop.last %}, {% endif %}
+            <span title="Part of {{ m.group.acronym }} milestone: {{ m.desc }}"
+                  class="milestone">{{ m.due|date:"M Y" }}</span>
+            {% if not forloop.last %},{% endif %}
         {% endfor %}
-
         {% if doc.action_holders_enabled and doc.action_holders.exists %}
-            <br>Action Holders:
+            <br>
+            Action Holders:
             {% for action_holder in doc.documentactionholder_set.all %}
-                <wbr>{% person_link action_holder.person title=action_holder.role_for_doc %}{{ action_holder|action_holder_badge }}{% if not forloop.last %}, {% endif %}
+                {% person_link action_holder.person title=action_holder.role_for_doc %} {{ action_holder|action_holder_badge }}{% if not forloop.last %},{% endif %}
             {% endfor %}
         {% endif %}
-    {% else %}{# RFC #}
+    {% else %}
+        {# RFC #}
         {{ doc.std_level|safe }} RFC
-
         {% if doc.obsoleted_by_list %}
-            <br>Obsoleted by {{ doc.obsoleted_by_list|join:", "|urlize_ietf_docs }}
+            <br>
+            Obsoleted by {{ doc.obsoleted_by_list|join:", "|urlize_ietf_docs }}
         {% endif %}
-
         {% if doc.updated_by_list %}
-            <br>Updated by {{ doc.updated_by_list|join:", "|urlize_ietf_docs }}
+            <br>
+            Updated by {{ doc.updated_by_list|join:", "|urlize_ietf_docs }}
         {% endif %}
     {% endif %}
-
-
-
 </td>
\ No newline at end of file
diff --git a/ietf/templates/iesg/agenda.html b/ietf/templates/iesg/agenda.html
index f707082be..f52ef249e 100644
--- a/ietf/templates/iesg/agenda.html
+++ b/ietf/templates/iesg/agenda.html
@@ -11,23 +11,7 @@
 {% block content %}
     {% origin %}
     <h1>IESG agenda: {{ date }}</h1>
-    <ul class="nav nav-tabs mb-3">
-        <li class="nav-item">
-            <a class="nav-link active" href="{% url 'ietf.iesg.views.agenda' %}">IESG Agenda</a>
-        </li>
-        <li class="nav-item">
-            <a class="nav-link" href="{% url 'ietf.iesg.views.agenda_documents' %}">Documents on future agendas</a>
-        </li>
-        <li class="nav-item">
-            <a class="nav-link" href="{% url 'ietf.iesg.views.discusses' %}">DISCUSS positions</a>
-        </li>
-        <li class="nav-item">
-            <a class="nav-link" href="{% url 'ietf.iesg.views.past_documents' %}">Documents on recent agendas</a>
-        </li>
-        <li class="nav-item">
-            <a class="nav-link" href="{% url 'ietf.iesg.views.photos' %}">IESG Photos</a>
-        </li>
-    </ul>
+    {% include "iesg/nav.html" with active="agenda" %}
     {% for num, section in sections %}
         {% if num|sectionlevel == 1 %}
             <h2 class="anchor-target" id="sec-{{ num|slugify }}">{{ num }}. {{ section.title|safe }}</h2>
diff --git a/ietf/templates/iesg/agenda_documents.html b/ietf/templates/iesg/agenda_documents.html
index d13526b8b..a2d9fb918 100644
--- a/ietf/templates/iesg/agenda_documents.html
+++ b/ietf/templates/iesg/agenda_documents.html
@@ -1,88 +1,74 @@
 {% extends "base.html" %}
+{% comment %}bs5ok{% endcomment %}
 {# Copyright The IETF Trust 2015, All Rights Reserved #}
 {% load origin static %}
-
 {% load ballot_icon %}
 {% load ietf_filters %}
 {% load django_bootstrap5 %}
-
 {% block pagehead %}
     <link rel="alternate" type="application/atom+xml" href="/feed/iesg-agenda/">
     <link rel="stylesheet" href="{% static "ietf/css/list.css" %}">
 {% endblock %}
-
 {% block title %}Documents on future IESG telechat agendas{% endblock %}
-
 {% block content %}
     {% origin %}
     <h1>Documents on future IESG telechat agendas</h1>
-
-    <ul class="nav nav-tabs mb-3">
-        <li class="nav-item       "><a class="nav-link" href="{% url 'ietf.iesg.views.agenda' %}">IESG Agenda</a></li>
-        <li class="nav-item"><a class="nav-link active" href="{% url 'ietf.iesg.views.agenda_documents' %}">Documents on future agendas</a></li>
-        <li class="nav-item       "><a class="nav-link" href="{% url 'ietf.iesg.views.discusses' %}">DISCUSS positions</a></li>
-        <li class="nav-item       "><a class="nav-link" href="{% url 'ietf.iesg.views.past_documents' %}">Documents on recent agendas</a></li>
-        <li class="nav-item       "><a class="nav-link" href="{% url 'ietf.iesg.views.photos' %}">IESG Photos</a></li>
-    </ul>
-
+    {% include "iesg/nav.html" with active="agenda_documents" %}
     {% if user|has_role:"Secretariat" %}
         <form class="form-inline" method="post">
             {% csrf_token %}
-    {% endif %}
-
-    {% for t in telechats %}
-        <h2>IESG telechat {{t.date}}
-            <br><small class="text-muted">{{t.pages}} page{{t.pages|pluralize}}</small>
-        </h2>
-        <div class="buttonlist">
-            <a class="btn btn-primary" role="button" href="/iesg/agenda/">
-                <span class="bi bi-list"></span>
-                Full IESG agenda
-            </a>
-
-            <a class="btn btn-primary" role="button" href="/iesg/agenda/telechat-{{t.date|date:"Y"}}-{{t.date|date:"m"}}-{{t.date|date:"d"}}-docs.tgz">
-                <span class="bi bi-download"></span>
-                Download documents
-            </a>
-        </div>
-
-        {% for num, section in t.sections %}
-            {% if "docs" not in section or section.docs %}
-                {% if num|sectionlevel == 1 %}<h3 class="mt-3">{{ num }}. {{ section.title|safe }}</h3>{% endif %}
-                {% if num|sectionlevel == 2 %}<h4 class="mt-3">{{ num }} {{ section.title|safe }}</h4>{% endif %}
-                {% if num|sectionlevel == 3 %}<h5 class="mt-3">{{ num }} {{ section.title|safe }}</h5>{% endif %}
-            {% endif %}
-
-            {% if "docs" in section and section.docs %}
-                <table class="table table-sm table-striped tablesorter">
-                    <thead>
-                        <tr>
-                            <th></th>
-                            <th data-sort="document">Document</th>
-                            <th data-sort="date">Date</th>
-                            <th data-sort="status">Status</th>
-                            <th data-sort="ipr">IPR</th>
-                            <th data-sort="ad">AD/Shepherd</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {% for doc in section.docs %}
-                            {% include "doc/search/search_result_row.html" with color_row_positions=True %}
-                        {% endfor %}
-                    </tbody>
-                </table>
-            {% endif %}
+        {% endif %}
+        {% for t in telechats %}
+            <h2>
+                IESG telechat {{ t.date }}
+                <br>
+                <small class="text-muted">{{ t.pages }} page{{ t.pages|pluralize }}</small>
+            </h2>
+            <div class="buttonlist">
+                <a class="btn btn-primary" role="button" href="/iesg/agenda/">
+                    <span class="bi bi-list"></span>
+                    Full IESG agenda
+                </a>
+                <a class="btn btn-primary"
+                   role="button"
+                   href="/iesg/agenda/telechat-{{ t.date|date:'Y' }}-{{ t.date|date:'m' }}-{{ t.date|date:'d' }}-docs.tgz">
+                    <span class="bi bi-download"></span>
+                    Download documents
+                </a>
+            </div>
+            {% for num, section in t.sections %}
+                {% if "docs" not in section or section.docs %}
+                    {% if num|sectionlevel == 1 %}<h3 class="mt-3">{{ num }}. {{ section.title|safe }}</h3>{% endif %}
+                    {% if num|sectionlevel == 2 %}<h4 class="mt-3">{{ num }} {{ section.title|safe }}</h4>{% endif %}
+                    {% if num|sectionlevel == 3 %}<h5 class="mt-3">{{ num }} {{ section.title|safe }}</h5>{% endif %}
+                {% endif %}
+                {% if "docs" in section and section.docs %}
+                    <table class="table table-sm table-striped tablesorter">
+                        <thead>
+                            <tr>
+                                <th></th>
+                                <th data-sort="document">Document</th>
+                                <th data-sort="date">Date</th>
+                                <th data-sort="status">Status</th>
+                                <th data-sort="ipr">IPR</th>
+                                <th data-sort="ad">AD/Shepherd</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {% for doc in section.docs %}
+                                {% include "doc/search/search_result_row.html" with color_row_positions=True %}
+                            {% endfor %}
+                        </tbody>
+                    </table>
+                {% endif %}
+            {% endfor %}
+            <hr>
         {% endfor %}
-        <hr>
-    {% endfor %}
-
-    {% if user|has_role:"Secretariat" %}
-        {% bootstrap_button button_type="submit" content="Save reschedules" title="Save reschedule changes done with the drop-down boxes below" %}
+        {% if user|has_role:"Secretariat" %}
+            {% bootstrap_button button_type="submit" content="Save reschedules" title="Save reschedule changes done with the drop-down boxes below" %}
         </form>
     {% endif %}
-
 {% endblock content %}
-
 {% block js %}
     <script src="{% static "ietf/js/list.js" %}"></script>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/ietf/templates/iesg/discusses.html b/ietf/templates/iesg/discusses.html
index 4f7a651f0..cf60892b2 100644
--- a/ietf/templates/iesg/discusses.html
+++ b/ietf/templates/iesg/discusses.html
@@ -1,74 +1,74 @@
 {% extends "base.html" %}
+{% comment %}bs5ok{% endcomment %}
 {# Copyright The IETF Trust 2015, All Rights Reserved #}
 {% load origin static %}
-
 {% load ballot_icon %}
 {% load ietf_filters %}
-
 {% block pagehead %}
     <link rel="stylesheet" href="{% static "ietf/css/list.css" %}">
 {% endblock %}
-
 {% block title %}IESG discuss positions{% endblock %}
-
 {% block content %}
     {% origin %}
     <h1>IESG discuss positions</h1>
-
-    <ul class="nav nav-tabs">
-        <li class="nav-item       "><a class="nav-link" href="{% url 'ietf.iesg.views.agenda' %}">IESG Agenda</a></li>
-        <li class="nav-item       "><a class="nav-link" href="{% url 'ietf.iesg.views.agenda_documents' %}">Documents on future agendas</a></li>
-        <li class="nav-item"><a class="nav-link active" href="{% url 'ietf.iesg.views.discusses' %}">DISCUSS positions</a></li>
-        <li class="nav-item       "><a class="nav-link" href="{% url 'ietf.iesg.views.past_documents' %}">Documents on recent agendas</a></li>
-        <li class="nav-item       "><a class="nav-link" href="{% url 'ietf.iesg.views.photos' %}">IESG Photos</a></li>
-    </ul>
-
-
-
+    {% include "iesg/nav.html" with active="discusses" %}
     {% if user|has_role:"Area Director" %}
-        <p class="btn-group" data-bs-toggle="buttons">
-            <label class="btn btn-primary active discuss">
-                <input type="radio" value="all">All
-            </label>
-            <label class="btn btn-primary discuss">
-                <input type="radio" value="byme">By me
-            </label>
-            <label class="btn btn-primary discuss">
-                <input type="radio" value="forme">For me
-            </label>
-        </p>
+        <div class="btn-group my-3" role="group" aria-label="Choose DISCUSSes">
+            <input type="radio"
+                   class="btn-check"
+                   autocomplete="off"
+                   name="btnradio"
+                   value="all"
+                   id="all"
+                   checked>
+            <label for="all" class="btn btn-outline-primary discuss">All</label>
+            <input type="radio"
+                   class="btn-check"
+                   autocomplete="off"
+                   name="btnradio"
+                   value="byme"
+                   id="byme">
+            <label for="byme" class="btn btn-outline-primary discuss">By me</label>
+            <input type="radio"
+                   class="btn-check"
+                   autocomplete="off"
+                   name="btnradio"
+                   value="forme"
+                   id="forme">
+            <label for="forme" class="btn btn-outline-primary discuss">For me</label>
+        </div>
     {% endif %}
-
     <table class="table table-sm table-striped tablesorter">
         <thead>
             <tr>
-                <th>Document</th>
-                <th>Status</th>
-                <th>Responsible AD</th>
-                <th>Discusses</th>
+                <th data-sort="document">Document</th>
+                <th data-sort="status">Status</th>
+                <th data-sort="ad" class="text-nowrap">Responsible AD</th>
+                <th data-sort="discusses">Discusses</th>
             </tr>
         </thead>
-
         <tbody id="doclist">
             {% for doc in docs %}
-                <tr class="{% if doc.by_me %}byme{% endif %} {% if doc.for_me %}forme{% endif %}">
-                    <td>
-                        {{ doc.displayname_with_link }}
-                    </td>
+                <tr class="{% if doc.by_me %}
+                               byme
+                           {% endif %}
+
+                           {% if doc.for_me %}
+                               forme
+                           {% endif %}">
+                    <td>{{ doc.displayname_with_link }}</td>
                     {% include "doc/search/status_columns.html" %}
                     <td>{{ doc.ad|default:"" }}</td>
                     <td>
                         {% for p in doc.blocking_positions %}
-                            {% if p.is_old_pos %}
-                                <span class="text-muted">
-                            {% endif %}
+                            {% if p.is_old_pos %}<span class="text-muted">{% endif %}
                             {{ p.balloter }}
-                            ({% if p.discuss_time %}{{ p.discuss_time|timesince_days }}{% endif %}
-                            days ago{% if doc.get_state_url != "rfc" and p.rev != doc.rev %}
-                                for -{{ p.rev }}{% endif %})<br>
-                            {% if p.is_old_pos %}
-                                </span>
-                            {% endif %}
+                            (
+                            {% if p.discuss_time %}{{ p.discuss_time|timesince_days }} days ago{% endif %}
+                            {% if doc.get_state_url != "rfc" and p.rev != doc.rev %}for -{{ p.rev }}{% endif %}
+                            )
+                            <br>
+                            {% if p.is_old_pos %}</span>{% endif %}
                         {% endfor %}
                     </td>
                 </tr>
@@ -76,18 +76,17 @@
         </tbody>
     </table>
 {% endblock %}
-
 {% block js %}
     <script src="{% static "ietf/js/list.js" %}"></script>
     <script>
-        $(".discuss").click(function () {
-            var x = $(this).find("input").val();
+        $(".discuss").on("click", function () {
+            var x = $(this).prev("input").val();
             if (x === "all") {
-                $("#doclist>tr").removeClass("hidden");
+                $("#doclist>tr").removeClass("visually-hidden");
             } else {
-                $("#doclist>tr." + x).removeClass("hidden");
-                $("#doclist>tr:not(." + x + ")").addClass("hidden");
+                $("#doclist>tr." + x).removeClass("visually-hidden");
+                $("#doclist>tr:not(." + x + ")").addClass("visually-hidden");
             }
         });
     </script>
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/ietf/templates/iesg/moderator_package.html b/ietf/templates/iesg/moderator_package.html
index d827dd19a..a074310b5 100644
--- a/ietf/templates/iesg/moderator_package.html
+++ b/ietf/templates/iesg/moderator_package.html
@@ -1,3 +1,4 @@
+{% comment %}bs5ok{% endcomment %}
 {% comment %}
 Copyright (C) 2008-2009 Nokia Corporation and/or its subsidiary(-ies).
 All rights reserved. Contact: Pasi Eronen <pasi.eronen@nokia.com> 
@@ -32,11 +33,15 @@ THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 {% endcomment %}{% comment %}
 Some parts Copyright (c) 2009 The IETF Trust, all rights reserved.
-{% endcomment %}<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html>
+{% endcomment %}
+{% load ietf_filters static %}
+<html lang="en">
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+        <meta charset="utf-8"/>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1"/>
         <title>Moderator Package for {{ date }} IESG Telechat</title>
+        <link rel="stylesheet" href="{% static 'ietf/css/ietf.css' %}"/>
         <style type="text/css">
             h3 { page-break-before:always; }
             @media print {
@@ -49,86 +54,105 @@ Some parts Copyright (c) 2009 The IETF Trust, all rights reserved.
             }
         </style>
     </head>
-    <body>
-
-        {% load ietf_filters %}
-
+    <body class="container-fluid">
         <h1>Moderator Package for {{ date }} IESG Telechat</h1>
-
-        <p>Generated at {% now "Y-m-d H:i:s T" %}.</p>
-
+        <p>
+            Generated at {% now "Y-m-d H:i:s T" %}.
+        </p>
         {% for num, section in sections %}
-            <h3>{% for parent_num, parent_section in section.parents %}{{ parent_num }}{% if parent_num|sectionlevel == 1 %}.{% endif %} {{ parent_section.title }}<br>{% endfor %}{{ num }}{% if num|sectionlevel == 1 %}.{% endif %} {{ section.title }}</h3>
-
+            <h3>
+                {% for parent_num, parent_section in section.parents %}
+                    {{ parent_num }}
+                    {% if parent_num|sectionlevel == 1 %}.{% endif %}
+                    {{ parent_section.title }}
+                    <br>
+                {% endfor %}
+                {{ num }}
+                {% if num|sectionlevel == 1 %}.{% endif %}
+                {{ section.title }}
+            </h3>
             {% if num == "1.1" %}
-                {% filter linebreaks_crlf %}<pre>
-	  {{ section.text }}
-        </pre>
+                {% filter linebreaks_crlf %}
+                    <pre>{{ section.text }}</pre>
                 {% endfilter %}
             {% endif %}
-
             {% if num == "1.2" %}
-                <p>Does anyone want to add anything NEW to the agenda?</p>
-
-                <p>Does anyone have any other changes to the agenda as it stands?</p>
+                <p>
+                    Does anyone want to add anything NEW to the agenda?
+                </p>
+                <p>
+                    Does anyone have any other changes to the agenda as it stands?
+                </p>
             {% endif %}
-
             {% if num == "1.3" %}
-                <p>Does anyone have an objection to the minutes of the __________ IESG
-                    Teleconference being approved?</p>
-
-                <p>IF APPROVED: The minutes are approved for the __________
-                    teleconference.  The Secretariat will post them in the public archive.</p>
-
-                <p>Are there narrative minutes to approve for today?</p>
-
-                {% filter linebreaks_crlf %}<pre>
-	  {{ section.text }}
-        </pre>
+                <p>
+                    Does anyone have an objection to the minutes of the __________ IESG
+                    Teleconference being approved?
+                </p>
+                <p>
+                    IF APPROVED: The minutes are approved for the __________
+                    teleconference.  The Secretariat will post them in the public archive.
+                </p>
+                <p>
+                    Are there narrative minutes to approve for today?
+                </p>
+                {% filter linebreaks_crlf %}
+                    <pre>{{ section.text }}</pre>
                 {% endfilter %}
             {% endif %}
-
             {% if num == "1.4" %}
-                {% filter linebreaks_crlf %}<pre>
-	  {{ section.text }}
-        </pre>
+                {% filter linebreaks_crlf %}
+                    <pre>{{ section.text }}</pre>
                 {% endfilter %}
             {% endif %}
-
             {% if num >= "2" and num < "5" %}
                 {% if "doc" in section %}
-                    {% with section.doc as doc %}{% with section.downrefs as downrefs %}
-                        {% if doc.type_id == "draft" or doc.type_id == "statchg" %}{% include "iesg/moderator_doc.html" %}{% endif %}
-                        {% if doc.type_id == "conflrev" %}{% include "iesg/moderator_conflict_doc.html" %}{% endif %}
-                        {% if doc.type_id == "charter" %}{% include "iesg/moderator_charter.html" %}{% endif %}
-                    {% endwith %}{% endwith %}
+                    {% with section.doc as doc %}
+                        {% with section.downrefs as downrefs %}
+                            {% if doc.type_id == "draft" or doc.type_id == "statchg" %}
+                                {% include "iesg/moderator_doc.html" %}
+                            {% endif %}
+                            {% if doc.type_id == "conflrev" %}
+                                {% include "iesg/moderator_conflict_doc.html" %}
+                            {% endif %}
+                            {% if doc.type_id == "charter" %}
+                                {% include "iesg/moderator_charter.html" %}
+                            {% endif %}
+                        {% endwith %}
+                    {% endwith %}
                 {% else %}
-                    <p>NONE</p>
+                    <p>
+                        NONE
+                    </p>
                 {% endif %}
             {% endif %}
-
             {% if num >= "6" and num < "7" %}
                 {% if num == "6" %}
-                    <p>NONE</p>
+                    <p>
+                        NONE
+                    </p>
                 {% else %}
-                    <p>Is there anything that you would like the Secretariat to record in the minutes for this management issue?</p>
-
-                    <p>Decision:</p>
-
-                    <p>The management issue was discussed.</p>
-
-                    <p>Action Item (if applicable):</p>
+                    <p>
+                        Is there anything that you would like the Secretariat to record in the minutes for this management issue?
+                    </p>
+                    <p>
+                        Decision:
+                    </p>
+                    <p>
+                        The management issue was discussed.
+                    </p>
+                    <p>
+                        Action Item (if applicable):
+                    </p>
                 {% endif %}
             {% endif %}
-
             {% if num == "7" %}
-                {% filter linebreaks_crlf %}<pre>
-	  {% for ad in section.ads %}[ ] {{ ad.plain_name }}
-	  {% endfor %}
-	</pre>{% endfilter %}
+                {% filter linebreaks_crlf %}
+                    {% for ad in section.ads %}
+                        <pre>[ ] {{ ad.plain_name }}</pre>
+                    {% endfor %}
+                {% endfilter %}
             {% endif %}
-
         {% endfor %}
-
     </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/ietf/templates/iesg/nav.html b/ietf/templates/iesg/nav.html
new file mode 100644
index 000000000..b15311b53
--- /dev/null
+++ b/ietf/templates/iesg/nav.html
@@ -0,0 +1,45 @@
+{% comment %}bs5ok{% endcomment %}
+<ul class="nav nav-tabs my-3">
+    <li class="nav-item">
+        <a class="nav-link
+                  {% if active == 'agenda' %}
+                      active
+                  {% endif %}"
+           href="{% url 'ietf.iesg.views.agenda' %}">
+            IESG Agenda
+        </a>
+    </li>
+    <li class="nav-item">
+        <a class="nav-link
+                  {% if active == 'agenda_documents' %}
+                      active
+                  {% endif %}"
+           href="{% url 'ietf.iesg.views.agenda_documents' %}">
+            Docs on future agendas
+        </a>
+    </li>
+    <li class="nav-item">
+        <a class="nav-link
+            {% if active == 'discusses' %}active{% endif %}""
+            href="{% url 'ietf.iesg.views.discusses' %}">DISCUSS positions
+        </a>
+    </li>
+    <li class="nav-item">
+        <a class="nav-link
+                  {% if active == 'past_documents' %}
+                      active
+                  {% endif %}"
+           href="{% url 'ietf.iesg.views.past_documents' %}">
+            Docs on recent agendas
+        </a>
+    </li>
+    <li class="nav-item">
+        <a class="nav-link
+                  {% if active == 'photos' %}
+                      active
+                  {% endif %}"
+           href="{% url 'ietf.iesg.views.photos' %}">
+            IESG Photos
+        </a>
+    </li>
+</ul>
\ No newline at end of file
diff --git a/ietf/templates/iesg/past_documents.html b/ietf/templates/iesg/past_documents.html
index cc308aa0c..27b2e93c9 100644
--- a/ietf/templates/iesg/past_documents.html
+++ b/ietf/templates/iesg/past_documents.html
@@ -1,81 +1,63 @@
 {% extends "base.html" %}
+{% comment %}bs5ok{% endcomment %}
 {# Copyright The IETF Trust 2015, All Rights Reserved #}
 {% load origin static %}
-
 {% load ballot_icon %}
 {% load ietf_filters %}
-
 {% block pagehead %}
     <link rel="stylesheet" href="{% static "ietf/css/list.css" %}">
 {% endblock %}
-
 {% block title %}Documents on recent agendas{% endblock %}
-
 {% block content %}
     {% origin %}
-    <h1>Documents on recent agendas <small>in states {% for state in states %}{{state.name}}{% if not forloop.last %}, {% endif %} {% endfor %}</small></h1>
-
-    <ul class="nav nav-tabs">
-        <li class="nav-item      "><a class="nav-link" href="{% url 'ietf.iesg.views.agenda' %}">IESG Agenda</a></li>
-        <li class="nav-item      "><a class="nav-link" href="{% url 'ietf.iesg.views.agenda_documents' %}">Documents on future agendas</a></li>
-        <li class="nav-item      "><a class="nav-link" href="{% url 'ietf.iesg.views.discusses' %}">DISCUSS positions</a></li>
-        <li class="nav-item"><a class="nav-link active" href="{% url 'ietf.iesg.views.past_documents' %}">Documents on recent agendas</a></li>
-        <li class="nav-item      "><a class="nav-link" href="{% url 'ietf.iesg.views.photos' %}">IESG Photos</a></li>
-    </ul>
-
-
-
-    <!--
-  {% if user|has_role:"Area Director" %}
-    <p class="btn-group" data-bs-toggle="buttons">
-      <label class="btn btn-primary active discuss">
-        <input type="radio" value="all">All
-      </label>
-      <label class="btn btn-primary discuss">
-        <input type="radio" value="byme">By me
-      </label>
-      <label class="btn btn-primary discuss">
-        <input type="radio" value="forme">For me
-      </label>
-    </p>
-  {% endif %}
-  -->
+    <h1>
+        Documents on recent agendas
+        <br>
+        <small class="text-muted">in states
+            {% for state in states %}
+                {{ state.name }}{% if not forloop.last %},{% endif %}
+            {% endfor %}
+        </small>
+    </h1>
+    {% include "iesg/nav.html" with active="past_documents" %}
     <table class="table table-sm table-striped tablesorter">
         <thead>
             <tr>
-                <th class="col-md-4">Document</th>
-                <th>Telechat Date</th>
-                <th>Status</th>
-                <th>Responsible AD</th>
-                <th>Discusses</th>
+                <th data-sort="doc">Document</th>
+                <th data-sort="date">Telechat Date</th>
+                <th data-sort="status">Status</th>
+                <th data-sort="ad">Responsible AD</th>
+                <th data-sort="discusses">Discusses</th>
             </tr>
         </thead>
-
         <tbody>
             {% for doc in docs %}
-                <tr class="{% if doc.by_me %}byme{% endif %} {% if doc.for_me %}forme{% endif %}">
+                <tr class="{% if doc.by_me %}
+                               byme
+                           {% endif %}
+
+                           {% if doc.for_me %}
+                               forme
+                           {% endif %}">
                     <td>
                         {{ doc.displayname_with_link }}
                         <br>
-                        {{ doc.title }}
-                    </td>
-                    <td>
-                        {{ doc.telechat }}
+                        <span class="fw-bold">{{ doc.title }}</span>
                     </td>
+                    <td>{{ doc.telechat }}</td>
                     {% include "doc/search/status_columns.html" %}
                     <td>{{ doc.ad|default:"" }}</td>
                     <td>
                         {% for p in doc.blocking_positions %}
-                            {% if p.is_old_pos %}
-                                <span class="text-muted">
-                            {% endif %}
+                            {% if p.is_old_pos %}<span class="text-muted">{% endif %}
                             {{ p.balloter }}
-                            ({% if p.discuss_time %}{{ p.discuss_time|timesince_days }}{% endif %}
-                            days ago{% if doc.get_state_url != "rfc" and p.rev != doc.rev %}
-                                for -{{ p.rev }}{% endif %})<br>
-                            {% if p.is_old_pos %}
-                                </span>
-                            {% endif %}
+                            (
+                            {% if p.discuss_time %}{{ p.discuss_time|timesince_days }}{% endif %}
+                            days ago
+                            {% if doc.get_state_url != "rfc" and p.rev != doc.rev %}for -{{ p.rev }}{% endif %}
+                            )
+                            <br>
+                            {% if p.is_old_pos %}</span>{% endif %}
                         {% endfor %}
                     </td>
                 </tr>
@@ -83,18 +65,6 @@
         </tbody>
     </table>
 {% endblock %}
-
 {% block js %}
     <script src="{% static "ietf/js/list.js" %}"></script>
-    <script>
-        $(".discuss").click(function () {
-            var x = $(this).find("input").val();
-            if (x === "all") {
-                $("tbody tr").removeClass("hidden");
-            } else {
-                $("tbody tr." + x).removeClass("hidden");
-                $("tbody tr:not(." + x + ")").addClass("hidden");
-            }
-        });
-    </script>
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/ietf/templates/iesg/photos.html b/ietf/templates/iesg/photos.html
index 88f97a671..8785b54d9 100644
--- a/ietf/templates/iesg/photos.html
+++ b/ietf/templates/iesg/photos.html
@@ -1,74 +1,48 @@
 {% extends "base.html" %}
+{% comment %}bs5ok{% endcomment %}
 {# Copyright The IETF Trust 2015, All Rights Reserved #}
 {% load origin static %}
 {% load ietf_filters %}
-
-{% block morecss %}
-    .well { max-width: 150px;}
-    .nav-tabs { position: relative; z-index: 100; }
-    .anchor-target { position: relative; z-index: 0; }
-{% endblock %}
-
 {% block title %}{{ group_type | upper }} {{ role }} Photos{% endblock %}
-
 {% block bodyAttrs %}data-bs-spy="scroll" data-bs-target="#affix"{% endblock %}
-
 {% block content %}
     {% origin %}
-
     <h1>{{ group_type | upper }} {{ role }} Photos</h1>
-
-    <ul class="nav nav-tabs">
-        <li class="nav-item       "><a class="nav-link" href="{% url 'ietf.iesg.views.agenda' %}">IESG Agenda</a></li>
-        <li class="nav-item       "><a class="nav-link" href="{% url 'ietf.iesg.views.agenda_documents' %}">Documents on future agendas</a></li>
-        <li class="nav-item       "><a class="nav-link" href="{% url 'ietf.iesg.views.discusses' %}">DISCUSS positions</a></li>
-        <li class="nav-item       "><a class="nav-link" href="{% url 'ietf.iesg.views.past_documents' %}">Documents on recent agendas</a></li>
-        <li class="nav-item"><a class="nav-link active" href="{% url 'ietf.iesg.views.photos' %}">IESG Photos</a></li>
-    </ul>
-
+    {% include "iesg/nav.html" with active="photos" %}
     {% regroup roles by group.acronym as alphabet_blocks %}
-    <div class="col-md-11" >
-        {% for letter in alphabet_blocks %}
-            <div class="row anchor-target" id="{{letter.grouper}}">
-                <div class="panel ">
-                    <div class="card-header">
-                        <a href="{% url 'ietf.group.views.group_home' acronym=letter.grouper %}">
-                            {{letter.list.0.group.name}}
-                        </a>
-                    </div>
-                    <div class="card-body">
-                        <ul class="list-inline">
-                            {% regroup letter.list by person as person_groups %}
-                            {% for person_with_groups in person_groups %}
-                                <li class="list-inline-item">
-                                    {% if person_with_groups.grouper.photo %}<a href="{% url 'ietf.person.views.profile' email_or_name=person_with_groups.grouper.name %}">{% endif %}
-                                    <div class="well photo-thumbnail">
-                                        <div>
-                                            {% if person_with_groups.grouper.photo_thumb %}
-                                                <img width=100 src="{{person_with_groups.grouper.photo_thumb.url}}"  alt="Photo of {{person_with_groups.grouper.name}}"/>
-                                            {% else %}
-                                                <img width=100 src="{{ MEDIA_URL }}photo/nopictureavailable.jpg" alt="No photo available"/>
-                                            {% endif %}
-                                        </div>
-                                        <div class="photo-name" style="height: 60px;">
-                                            <strong>{{person_with_groups.grouper.plain_name}}</strong>
-                                        </div>
-                                    </div>
+    {% for letter in alphabet_blocks %}
+        <div class="anchor-target mb-3">
+            <h2 class="mt-5">
+                <a href="{% url 'ietf.group.views.group_home' acronym=letter.grouper %}">{{ letter.list.0.group.name }}</a>
+            </h2>
+            <div class="row row-cols-1 row-cols-sm-3 g-5">
+                {% regroup letter.list by person as person_groups %}
+                {% for person_with_groups in person_groups %}
+                    <div class="col">
+                        <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 }}"/>
+                            {% else %}
+                                <img class="card-img-top"
+                                     src="{% static "ietf/images/nopictureavailable.jpg" %}"
+                                     alt="No photo available"/>
+                            {% 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 %}">
+                                    {% endif %}
+                                    {{ person_with_groups.grouper.plain_name }}
                                     {% if person_with_groups.grouper.photo %}</a>{% endif %}
-                                </li>
-                            {% endfor %}
-                        </ul>
+                                </p>
+                            </div>
+                        </div>
                     </div>
-                </div>
+                {% endfor %}
             </div>
-        {% endfor %}
-    </div>
-
-    <div class="col-md-1 d-print-none" id="affix">
-        <ul class="nav nav-pills nav-stacked small fixed" data-bs-spy="affix">
-            {% for letter in alphabet_blocks %}
-                <li><a href="#{{letter.grouper}}">{{letter.grouper}}</a></li>
-            {% endfor %}
-        </ul>
-    </div>
+        </div>
+    {% endfor %}
 {% endblock %}
\ No newline at end of file
diff --git a/package.json b/package.json
index 1d5de0d89..ff4fd823a 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,8 @@
     "ietf/static/images/ietflogo-small-transparent.png",
     "ietf/static/images/ietflogo.png",
     "ietf/static/images/apple-touch-icon.png",
-    "ietf/static/images/ietf-icon-red3.png"
+    "ietf/static/images/ietf-icon-red3.png",
+    "ietf/static/images/nopictureavailable.jpg"
   ],
   "targets": {
     "default": {