fix: Fix layout issue in ballot modals on narrow screens (#4911)

* fix: Fix layout issue in ballot modals on narrow screens

Fixes #4902

* Also apply change to old positions

* Fix tests

* Use badge to indicate former ADs
This commit is contained in:
Lars Eggert 2022-12-16 21:09:55 +02:00 committed by GitHub
parent e6e0d8fc1a
commit ad5cf0bb01
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 23 additions and 18 deletions

View file

@ -140,7 +140,7 @@ def ballot_icon(context, doc):
i = i + 1
res.append("</tr></tbody></table></a>")
res.append('<div id="modal-%d" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"><div class="modal-dialog modal-dialog-scrollable modal-xl"><div class="modal-content"></div></div></div>' % ballot.pk)
res.append('<div id="modal-%d" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"><div class="modal-dialog modal-dialog-scrollable modal-xl modal-fullscreen-lg-down"><div class="modal-content"></div></div></div>' % ballot.pk)
return mark_safe("".join(res))

View file

@ -1707,7 +1707,7 @@ class DocTestCase(TestCase):
href = q(f'div.balloter-name a[href$="{author_slug}"]').attr('href')
ids = [
target.attr('id')
for target in q(f'p.h5[id$="{author_slug}"]').items()
for target in q(f'div.h5[id$="{author_slug}"]').items()
]
self.assertEqual(len(ids), 1, 'Should be exactly one link for the balloter')
self.assertEqual(href, f'#{ids[0]}', 'Anchor href should match ID')

View file

@ -1198,9 +1198,9 @@ class BallotContentTests(TestCase):
)
def _assertBallotMessage(self, q, balloter, expected):
heading = q(f'p.h5[id$="_{slugify(balloter.plain_name())}"]')
heading = q(f'div.h5[id$="_{slugify(balloter.plain_name())}"]')
self.assertEqual(len(heading), 1)
# <p.h5/> is followed by a panel with the message of interest, so use next()
# <div.h5> is followed by a panel with the message of interest, so use next()
self.assertEqual(
len(heading.next().find(
f'*[title="{expected}"]'
@ -1381,4 +1381,4 @@ class BallotContentTests(TestCase):
q = PyQuery(content)
self._assertBallotMessage(q, balloters[0], 'No email send requests for this discuss')
self._assertBallotMessage(q, balloters[1], 'No ballot position send log available')
self._assertBallotMessage(q, old_balloter, 'No ballot position send log available')
self._assertBallotMessage(q, old_balloter, 'No ballot position send log available')

View file

@ -4,7 +4,7 @@
{% load ietf_filters %}
{% load textfilters %}
<div class="row">
<div class="col-md-2 d-none d-md-block d-sm-block d-lg-block d-xl-block d-xxl-block">
<div class="col-md-2">
{% for n, positions in position_groups %}
<p class="h5">
<span class="badge rounded-pill {{ n|pos_to_label_format }}">{{ n.name }}</span>
@ -85,10 +85,12 @@
{% for n, positions in position_groups %}
{% for p in positions %}
{% if not p.is_old_pos %}
<p class="h5 mt-4"
id="{{ doc.name|slugify }}_{{ p.balloter.plain_name|slugify }}">
{{ p.balloter.plain_name }}
<span class="float-end">
<div class="h5 d-flex mt-4"
id="{{ doc.name|slugify }}_{{ p.balloter.plain_name|slugify }}">
<div class="flex-fill">
{{ p.balloter.plain_name }}
</div>
<div class="flex-fill text-end">
{% if p.old_positions %}<span class="text-muted small">(was {{ p.old_positions|join:", " }})</span>{% endif %}
<span class="badge rounded-pill {{ p.pos|pos_to_label_format }}">{{ p.pos }}</span>
{% if user|has_role:"Secretariat" %}
@ -98,8 +100,8 @@
Edit
</a>
{% endif %}
</span>
</p>
</div>
</div>
{% if p.pos.blocking and p.discuss %}
<div class="card border-danger {% if p.comment %} mb-2{% endif %}">
<div class="card-header bg-danger text-light">
@ -158,9 +160,12 @@
{% for n, positions in position_groups %}
{% for p in positions %}
{% if p.is_old_pos %}
<p class="h5 mt-4" id="{{ doc.name|slugify }}_{{ p.balloter.plain_name|slugify }}">
<span class="text-muted">({{ p.balloter.plain_name }}; former steering group member)</span>
<span class="float-end">
<div class="h5 d-flex mt-4"
id="{{ doc.name|slugify }}_{{ p.balloter.plain_name|slugify }}">
<div class="flex-fill text-muted">
{{ p.balloter.plain_name }} <span class="badge rounded-pill bg-secondary">Former IESG member</span>
</div>
<div class="flex-fill text-end">
{% if p.old_positions %}<span class="text-muted small">(was {{ p.old_positions|join:", " }})</span>{% endif %}
<span class="badge rounded-pill {{ p.pos|pos_to_label_format }}">{{ p.pos }}</span>
{% if user|has_role:"Secretariat" %}
@ -170,8 +175,8 @@
Edit
</a>
{% endif %}
</span>
</p>
</div>
</div>
<div class="card {{ p.pos|pos_to_border_format }}">
<div class="card-header {{ p.pos|pos_to_label_format }}">
<div>
@ -211,4 +216,4 @@
{% endfor %}
{% endfor %}
</div>
</div>
</div>