They seem to be one of the only bs5 elements that do not by default wrap, which causes display issues on narrow screens when there are lots of page elements, e.g., on http://127.0.0.1:8000/doc/draft-ietf-ipwave-vehicular-networking/ Adding `flex-wrap` (per https://github.com/twbs/bootstrap/issues/23504) makes this better, but unfortunately doesn't fix it completely, because the layout still jumps when the window is narrowed by the used. It does fix the issue on first load and after a reload though.
185 lines
9.3 KiB
HTML
185 lines
9.3 KiB
HTML
{% extends "nomcom/nomcom_private_base.html" %}
|
|
{# Copyright The IETF Trust 2015, All Rights Reserved #}
|
|
{% load origin %}
|
|
{% load django_bootstrap5 %}
|
|
{% load static %}
|
|
{% load nomcom_tags person_filters %}
|
|
{% block pagehead %}{{ formset.media.css }}{% endblock %}
|
|
{% block subtitle %}- Feeback pending{% endblock %}
|
|
{% block nomcom_content %}
|
|
{% origin %}
|
|
<h2>Feedback pending from email list</h2>
|
|
{% if formset.forms %}
|
|
<form method="post">
|
|
{% csrf_token %}
|
|
{% if extra_ids %}<input type="hidden" name="extra_ids" value="{{ extra_ids }}">{% endif %}
|
|
{% bootstrap_form formset.management_form %}
|
|
{% if extra_step %}
|
|
<p class="alert alert-info my-3">
|
|
Please indicate which nominees and/or topics this feedback should be associated with.
|
|
</p>
|
|
{% for form in formset.forms %}
|
|
<dl class="row">
|
|
<dt class="col-sm-2">
|
|
Date
|
|
</dt>
|
|
<dd class="col-sm-10">
|
|
{{ form.instance.time|date:"r" }}
|
|
</dd>
|
|
<dt class="col-sm-2">
|
|
Author
|
|
</dt>
|
|
<dd class="col-sm-10">
|
|
{{ form.instance.author }}
|
|
</dd>
|
|
<dt class="col-sm-2">
|
|
Subject
|
|
</dt>
|
|
<dd class="col-sm-10">
|
|
{{ form.instance.subject }}
|
|
</dd>
|
|
<dt class="col-sm-2">
|
|
Type
|
|
</dt>
|
|
<dd class="col-sm-10">
|
|
<span class="badge bg-info">{{ form.feedback_type }}</span>
|
|
</dd>
|
|
<dt class="col-sm-2">
|
|
Feedback
|
|
</dt>
|
|
<dd class="col-sm-10">
|
|
<pre>{% decrypt form.instance.comments request year 1 %}</pre>
|
|
</dd>
|
|
<dt class="col-sm-2">
|
|
Information
|
|
</dt>
|
|
<dd class="col-sm-10">
|
|
{% bootstrap_form form %}
|
|
</dd>
|
|
</dl>
|
|
{% if not forloop.last %}<hr>{% endif %}
|
|
{% endfor %}
|
|
<button class="btn btn-primary"
|
|
type="submit"
|
|
name="end">Save feedback</button>
|
|
<a class="btn btn-secondary float-end"
|
|
href="{% url 'ietf.nomcom.views.view_feedback_pending' year %}">Back</a>
|
|
{% else %}
|
|
<table class="table table-sm">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Code</th>
|
|
<th scope="col">Explanation</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">U</th>
|
|
<td>Unclassified</td>
|
|
</tr>
|
|
{% for legend, t in type_dict.items %}
|
|
<tr>
|
|
<th scope="row">{{ legend }}</th>
|
|
<td>{{ t.name }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
<table class="table table-sm table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Date</th>
|
|
<th scope="col" class="text-center" title="Unclassified">U</th>
|
|
{% for legend, t in type_dict.items %}<th scope="col" class="text-center" title="{{ t.name }}">{{ legend }}</th>{% endfor %}
|
|
<th scope="col">Author</th>
|
|
<th scope="col">Subject</th>
|
|
<th scope="col"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for form in formset.forms %}
|
|
{% if form.errors %}
|
|
<tr class="table-warning">
|
|
<td colspan="5" class="info-message-error">Please correct the following errors</td>
|
|
</tr>
|
|
{% endif %}
|
|
<tr>
|
|
<td>{{ form.instance.time|date:"r" }}{{ form.id }}</td>
|
|
{% for choice in form.type.field.choices %}
|
|
<td class="text-center">
|
|
<label class="d-none" aria-label="{{ choice.1 }}" for="{{ choice.1|slugify }}"></label>
|
|
<input type="radio"
|
|
class="form-check-input"
|
|
name="{{ form.type.html_name }}"
|
|
value="{{ choice.0 }}"
|
|
id="{{ choice.1|slugify }}"
|
|
{% if not choice.0 %}checked{% endif %}
|
|
title="{{ choice.1 }}">
|
|
</td>
|
|
{% endfor %}
|
|
<td>{% person_link form.instance.author %}</td>
|
|
<td>{{ form.instance.subject }}</td>
|
|
<td>
|
|
<button type="button"
|
|
class="btn btn-primary btn-sm"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#modal{{ form.instance.id }}">
|
|
View
|
|
</button>
|
|
<div class="modal fade"
|
|
id="modal{{ form.instance.id }}"
|
|
tabindex="-1"
|
|
role="dialog"
|
|
aria-labelledby="label{{ form.instance.id }}"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-scrollable modal-xl">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<p class="h5 modal-title" id="label{{ form.instance.id }}">{{ form.instance.subject }}</p>
|
|
<button type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="modal"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<pre>{% decrypt form.instance.comments request year 1 %}</pre>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
<ul class="pagination pagination-sm flex-wrap mb-3">
|
|
<li class="page-item {% if not page.has_previous %}disabled{% endif %}">
|
|
<a class="page-link" aria-label="<"
|
|
href="{% if not page.has_previous %}#{% else %}?page={{ page.previous_page_number }}{% endif %}">
|
|
<i class="bi bi-caret-left"></i>
|
|
</a>
|
|
</li>
|
|
<li class="page-item active">
|
|
<a class="page-link" href="?page={{ page.number }}">Page {{ page.number }} of {{ page.paginator.num_pages }}</a>
|
|
</li>
|
|
<li class="page-item {% if not page.has_next %}disabled{% endif %}">
|
|
<a class="page-link" aria-label=">"
|
|
href="{% if not page.has_next %}#{% else %}?page={{ page.next_page_number }}{% endif %}">
|
|
<i class="bi bi-caret-right"></i>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<button class="btn btn-primary" type="submit">Classify</button>
|
|
{% endif %}
|
|
</form>
|
|
{% else %}
|
|
<p class="alert alert-success my-3">
|
|
There is no pending feedback.
|
|
</p>
|
|
{% endif %}
|
|
{% endblock %}
|
|
{% block js %}{{ formset.media.js }}{% endblock %}
|