Skip to content

Commit 92ace41

Browse files
MariattaMariatta
authored
Give every sponsorship page the same content width (#397)
* Give every sponsorship page the same content width The sidebar shell already places page content inside a container + column, but several sponsorship templates wrapped their content in a second `.container` (its own max-width + padding), while the list did not. So the sponsor list and the tier list rendered at different widths and the column visibly jumped when moving between them via the rail. Drop the nested container from the tier list/form/delete, the sponsor detail, and the sponsor delete pages so every sponsorship page fills the content column uniformly. 553 tests pass, 100% coverage; lint clean. * Stop wide tables from widening the content column Removing the nested containers made the sponsor list and tier list *structure* match, but the sponsor list still rendered wider: its ~11-column table is a wide flex-item child, and a Bootstrap .col defaults to min-width:auto, so the column grew to fit the table instead of staying at its grid share. The narrow tier table left its column at the normal width, hence the jump. Give the shell's content column `min-width: 0` so it keeps its grid share regardless of content, and wrap the wide sponsor and team tables in .table-responsive so they scroll inside the column instead of overflowing. 553 tests pass, 100% coverage; lint clean.
1 parent cd4914d commit 92ace41

9 files changed

Lines changed: 75 additions & 63 deletions

File tree

‎portal/static/css/portal.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,3 +92,11 @@ body {
9292
.app-sidebar .nav-pills {
9393
--bs-nav-pills-link-active-bg: var(--bs-primary);
9494
}
95+
96+
/* Flex items default to min-width:auto, so a wide table would stretch the
97+
content column past its grid share and make pages with wide vs narrow
98+
content render at different widths. Let the column shrink to its share; wide
99+
tables scroll inside it (wrap them in .table-responsive). */
100+
.app-content {
101+
min-width: 0;
102+
}

‎sponsorship/templates/sponsorship/sponsorship_profile_confirm_delete.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
{% include "sponsorship/_sponsorship_rail.html" with active="sponsors" %}
1414
{% endblock sidebar %}
1515
{% block content %}
16-
<div class="container px-4 py-3">
16+
<div class="py-3">
1717
<h1 class="display-6 pb-2 border-bottom">
1818
{% trans "Delete Sponsorship" %}
1919
</h1>

‎sponsorship/templates/sponsorship/sponsorship_profile_detail.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
{% include "sponsorship/_sponsorship_rail.html" with active="sponsors" %}
99
{% endblock sidebar %}
1010
{% block content %}
11-
<div class="container">
11+
<div class="py-3">
1212
<div class="row">
1313
<div class="col-12">
1414
<nav aria-label="breadcrumb">

‎sponsorship/templates/sponsorship/sponsorshipprofile_list.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,9 @@ <h2 class="h6 text-secondary mb-2">
107107
{% endif %}
108108
</form>
109109
{% endif %}
110-
{% render_table table %}
110+
<div class="table-responsive">
111+
{% render_table table %}
112+
</div>
111113
</div>
112114
{# Filter chips fetch and swap just the results region, so the page does #}
113115
{# not reload or jump. Without JS, the links navigate normally. #}

‎sponsorship/templates/sponsorship/sponsorshiptier_confirm_delete.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
{% include "sponsorship/_sponsorship_rail.html" with active="tiers" %}
1414
{% endblock sidebar %}
1515
{% block content %}
16-
<div class="container px-4 py-3">
16+
<div class="py-3">
1717
<h1 class="display-6 pb-2 border-bottom">
1818
{% trans "Delete Sponsorship Tier" %}
1919
</h1>

‎sponsorship/templates/sponsorship/sponsorshiptier_form.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
{% include "sponsorship/_sponsorship_rail.html" with active="tiers" %}
1919
{% endblock sidebar %}
2020
{% block content %}
21-
<div class="container px-4 py-3">
21+
<div class="py-3">
2222
<h1 class="display-6 pb-2 border-bottom">
2323
{% if object.pk %}
2424
{% trans "Edit Sponsorship Tier" %}

‎sponsorship/templates/sponsorship/sponsorshiptier_list.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
{% include "sponsorship/_sponsorship_rail.html" with active="tiers" %}
1414
{% endblock sidebar %}
1515
{% block content %}
16-
<div class="container px-4 py-3">
16+
<div class="py-3">
1717
<h1 class="display-5">
1818
{% trans "Sponsorship Tiers" %} — {{ selected_conference.year }}
1919
<a class="btn btn-primary" href="{% url 'sponsorship:tier_new' %}">{% trans "New Tier" %}</a>

‎templates/portal/base_sidebar.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ <h2 class="offcanvas-title h6 mb-0" id="appSidebarLabel">
4949
</div>
5050
</div>
5151
</aside>
52-
<div class="col">
52+
<div class="col app-content">
5353
{% block content %}
5454
{% endblock content %}
5555
</div>

‎templates/team/index.html‎

Lines changed: 58 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -89,63 +89,65 @@ <h1 class="display-4">
8989
{% blocktranslate count counter=unled_count %}{{ counter }} team has no lead assigned.{% plural %}{{ counter }} teams have no lead assigned.{% endblocktranslate %}
9090
</div>
9191
{% endif %}
92-
<table class="table table-hover align-middle">
93-
<thead class="table-light">
94-
<tr>
95-
<th>
96-
{% trans "Name" %}
97-
</th>
98-
<th>
99-
{% trans "Leads" %}
100-
</th>
101-
<th>
102-
{% trans "Open" %}
103-
</th>
104-
<th>
105-
{% trans "Members" %}
106-
</th>
107-
<th>
108-
</th>
109-
</tr>
110-
</thead>
111-
<tbody>
112-
{% for team in teams %}
92+
<div class="table-responsive">
93+
<table class="table table-hover align-middle">
94+
<thead class="table-light">
11395
<tr>
114-
<td>
115-
<a href="{% url 'team_dashboard' team.id %}">{{ team.short_name }}</a>
116-
</td>
117-
<td>
118-
{% for lead in team.team_leads.all %}
119-
<span class="badge text-bg-light border">{{ lead.user.get_full_name|default:lead.user.username }}</span>
120-
{% empty %}
121-
<span class="badge text-bg-danger">{% trans "unassigned" %}</span>
122-
{% endfor %}
123-
</td>
124-
<td>
125-
{% if team.open_to_new_members %}
126-
<span class="badge bg-success">{% trans "Open" %}</span>
127-
{% else %}
128-
<span class="badge bg-secondary">{% trans "Closed" %}</span>
129-
{% endif %}
130-
</td>
131-
<td>
132-
<span class="badge bg-primary rounded-pill" title="Approved">{{ team.approved_members.count }}</span>
133-
<span class="badge bg-warning rounded-pill" title="Pending">{{ team.pending_members.count }}</span>
134-
<span class="badge bg-secondary rounded-pill" title="Waitlisted">{{ team.waitlisted_members.count }}</span>
135-
</td>
136-
<td>
137-
<a href="{% url 'team_edit' team.id %}"
138-
class="btn btn-sm btn-outline-primary"
139-
title="Edit"
140-
aria-label="Edit"><i class="fa-solid fa-pencil"></i></a>
141-
<a href="{% url 'team_delete' team.id %}"
142-
class="btn btn-sm btn-outline-danger"
143-
title="Delete"
144-
aria-label="Delete"><i class="fa-solid fa-trash"></i></a>
145-
</td>
96+
<th>
97+
{% trans "Name" %}
98+
</th>
99+
<th>
100+
{% trans "Leads" %}
101+
</th>
102+
<th>
103+
{% trans "Open" %}
104+
</th>
105+
<th>
106+
{% trans "Members" %}
107+
</th>
108+
<th>
109+
</th>
146110
</tr>
147-
{% endfor %}
148-
</tbody>
149-
</table>
111+
</thead>
112+
<tbody>
113+
{% for team in teams %}
114+
<tr>
115+
<td>
116+
<a href="{% url 'team_dashboard' team.id %}">{{ team.short_name }}</a>
117+
</td>
118+
<td>
119+
{% for lead in team.team_leads.all %}
120+
<span class="badge text-bg-light border">{{ lead.user.get_full_name|default:lead.user.username }}</span>
121+
{% empty %}
122+
<span class="badge text-bg-danger">{% trans "unassigned" %}</span>
123+
{% endfor %}
124+
</td>
125+
<td>
126+
{% if team.open_to_new_members %}
127+
<span class="badge bg-success">{% trans "Open" %}</span>
128+
{% else %}
129+
<span class="badge bg-secondary">{% trans "Closed" %}</span>
130+
{% endif %}
131+
</td>
132+
<td>
133+
<span class="badge bg-primary rounded-pill" title="Approved">{{ team.approved_members.count }}</span>
134+
<span class="badge bg-warning rounded-pill" title="Pending">{{ team.pending_members.count }}</span>
135+
<span class="badge bg-secondary rounded-pill" title="Waitlisted">{{ team.waitlisted_members.count }}</span>
136+
</td>
137+
<td>
138+
<a href="{% url 'team_edit' team.id %}"
139+
class="btn btn-sm btn-outline-primary"
140+
title="Edit"
141+
aria-label="Edit"><i class="fa-solid fa-pencil"></i></a>
142+
<a href="{% url 'team_delete' team.id %}"
143+
class="btn btn-sm btn-outline-danger"
144+
title="Delete"
145+
aria-label="Delete"><i class="fa-solid fa-trash"></i></a>
146+
</td>
147+
</tr>
148+
{% endfor %}
149+
</tbody>
150+
</table>
151+
</div>
150152
</div>
151153
{% endblock content %}

0 commit comments

Comments
 (0)