Skip to content

Commit 0463003

Browse files
tttptttp
committed
Phase 1: Gulp→ESBuild, Bootstrap 5, jQuery removal
Build: - Replace Gulp 3 with ESBuild (build.cjs) for all JS bundles - New build-css.cjs concatenates Bootstrap 5 + dc.css + custom CSS - Retire gulpfile.js → gulpfile.deprecated.js - Remove 16 devDeps (gulp*, jQuery, Popper 1.x, daemonite-material, Bootstrap 4) - Add Bootstrap 5.3 10/ term pages: - Update all HTML files for BS5: data-*→data-bs-*, float-right→float-end, mr/ml→me/ms, badge-primary→text-bg-primary, badge-pill→rounded-pill, etc. - Add .jumbotron CSS fallback (removed in BS5) - Remove jQuery usage: fix widget.js ($.urlParam→urlParam) - Navbar logo SVG gets explicit height:2em constraint - Primary color set to #9c27b0 (purple) matching old branding - Add bg-primary-light fallback - Navbar date/report styling fix (white date, outline-light button) - Tab spacing fix (remove card-header negative margin) - ?report= URL param support for shareable links - Disable Clear button when no filters active - Remove links from report column in rollcall table - Visually separate report title (grey) from vote title
1 parent dcca1c9 commit 0463003

26 files changed

Lines changed: 1770 additions & 156 deletions

‎10/country.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,8 @@ <h4 class="">Contact</h4>
6565
<button
6666
class="navbar-toggler"
6767
type="button"
68-
data-toggle="collapse"
69-
data-target="#navbarHeader"
68+
data-bs-toggle="collapse"
69+
data-bs-target="#navbarHeader"
7070
aria-controls="navbarHeader"
7171
aria-expanded="false"
7272
aria-label="Toggle navigation"
@@ -84,7 +84,7 @@ <h4 class="">Contact</h4>
8484
<div class="col-md-12">
8585
<div class="card box-shadow" id="country">
8686
<div class="card-body">
87-
<h5 class="card-title text-muted text-right">
87+
<h5 class="card-title text-muted text-end">
8888
<button
8989
type="button"
9090
class="btn-relative btn btn-primary"
@@ -126,7 +126,7 @@ <h5 class="card-title text-muted text-right">
126126
><span class="nb"></span
127127
><span class="total d-none">/</span> MEPs<button
128128
type="button"
129-
class="btn btn-warning float-right"
129+
class="btn btn-warning float-end"
130130
title="reset the filters"
131131
>
132132
↺
@@ -135,18 +135,18 @@ <h5 class="card-title text-muted text-right">
135135
</li>
136136
<li class="list-group-item nbvoted">
137137
<span
138-
class="percent badge badge-primary badge-pill float-right"
138+
class="percent badge text-bg-primary rounded-pill float-end"
139139
>%</span
140140
><span class="nb"></span> voted
141141
</li>
142142
<li class="list-group-item result">
143143
<span
144-
class="percent badge badge-primary badge-pill float-right"
144+
class="percent badge text-bg-primary rounded-pill float-end"
145145
></span
146146
><span class="nb"></span> result
147147
</li>
148148
<li class="list-group-item goal d-none">
149-
<span class="win badge badge-pill float-right">AA</span
149+
<span class="win badge rounded-pill float-end">AA</span
150150
><span class="nb"></span>We wanted
151151
</li>
152152
</ul>
@@ -172,7 +172,7 @@ <h3>Title</h3>
172172

173173
<footer class="text-muted">
174174
<div class="container">
175-
<p class="float-right">
175+
<p class="float-end">
176176
<a href="#">Back to top</a>
177177
</p>
178178
</div>

‎10/embed.html‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -132,11 +132,11 @@
132132
<div class="row card-body" id="main-row">
133133
<div class="col-md-4 col-6">
134134
<ul class="list-group">
135-
<li class="list-group-item nbmep"><a class="resetall"><span class="nb" id="download"></span><span class="total d-none">/</span> MEPs<button type="button" class="btn btn-warning float-right" title="reset the filters">↺</button></a></li>
136-
<li class="list-group-item nbvoted"><span class="percent badge badge-primary badge-pill float-right">%</span><span class="nb"></span> voted</li>
137-
<li class="list-group-item result"><span class="percent badge badge-primary badge-pill float-right"></span><span class="nb"></span> result</li>
135+
<li class="list-group-item nbmep"><a class="resetall"><span class="nb" id="download"></span><span class="total d-none">/</span> MEPs<button type="button" class="btn btn-warning float-end" title="reset the filters">↺</button></a></li>
136+
<li class="list-group-item nbvoted"><span class="percent badge text-bg-primary rounded-pill float-end">%</span><span class="nb"></span> voted</li>
137+
<li class="list-group-item result"><span class="percent badge text-bg-primary rounded-pill float-end"></span><span class="nb"></span> result</li>
138138
<li class="list-group-item">
139-
<div class="btn-group-toggle btn-group-sm" data-toggle="buttons">
139+
<div class="btn-group-sm" data-bs-toggle="buttons">
140140
<label class="btn btn-primary btn-country">
141141
<input type="checkbox" checked autocomplete="off">Countries
142142
</label>
@@ -152,18 +152,18 @@
152152
<div class="graph justify-content-center"></div>
153153
</div>
154154
<div class="col-md-4 col-6 rotated90" id="eugroup">
155-
<div class="graph float-right"></div>
155+
<div class="graph float-end"></div>
156156
</div>
157157
<div class="col-md-4 col-6 rotated90 d-none" id="party">
158-
<div class="graph float-right"></div>
158+
<div class="graph float-end"></div>
159159
</div>
160160
</div>
161161

162162
<div class="row">
163163
<div class="col-md-12">
164164
<div class="mb-3 mx-3" id="country">
165165
<div class="">
166-
<h5 class="card-title text-muted text-right">
166+
<h5 class="card-title text-muted text-end">
167167
<div class="btn-group">
168168
<button type="button" class="btn-sm btn-relative btn btn-primary" title="Vote results as a % of the number of MEPs in the country">%</button>
169169
<button type="button" class="btm-sm btn-absolute active btn btn-primary" title="Vote results as the number of MEPs">#</button>
@@ -198,12 +198,12 @@ <h5 class="card-title text-muted text-right">
198198
</div>
199199
<div class="container">
200200
<div class="row footer">
201-
<div class="col-sm-8 text-right">
201+
<div class="col-sm-8 text-end">
202202
<button type="button" id="download" class="btn btn-default btn-sm">
203203
<svg aria-label="download votes" width=24 height=24><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96M17 13l-5 5-5-5h3V9h4v4z"></path></svg>
204204
</button>
205205
</div>
206-
<div class="col-sm-4 text-right">
206+
<div class="col-sm-4 text-end">
207207
<a href="https://mepwatch.eu/" target="_blank" id="powered">Powered by MEPwatch
208208
<svg class="logo"><use href="#logo" /></svg>
209209
</a>
@@ -448,10 +448,10 @@ <h5 class="card-title text-muted text-right">
448448
.attr('class', 'd3-tip wide-tip')
449449
.offset([-10, 0])
450450
.html(function (d) {
451-
var t= "<h3 class='d-flex flex-row justify-content-between' ><span>"+ d.data.key + "</span><span class='d-inline-flex p-2 badge badge-primary ml-2'>"+d.data.value.count+"</span></h3>";
451+
var t= "<h3 class='d-flex flex-row justify-content-between' ><span>"+ d.data.key + "</span><span class='d-inline-flex p-2 badge text-bg-primary ms-2'>"+d.data.value.count+"</span></h3>";
452452
results.forEach(function(r){
453453
if (d.data.value[r].count > 0){
454-
t += "<div class='d-flex flex-row justify-content-between'><div class='p-2 bd-highlight mr-auto w-50'>"+r+"</div><div class='p-1 w-25'>"+d.data.value[r].count+"</div><div class='p-1 w-25'>"+formatPercent(d.data.value[r].count/d.data.value.count)+"</div></div>";
454+
t += "<div class='d-flex flex-row justify-content-between'><div class='p-2 bd-highlight me-auto w-50'>"+r+"</div><div class='p-1 w-25'>"+d.data.value[r].count+"</div><div class='p-1 w-25'>"+formatPercent(d.data.value[r].count/d.data.value.count)+"</div></div>";
455455
}
456456
});
457457
return t+"";
@@ -653,10 +653,10 @@ <h5 class="card-title text-muted text-right">
653653
d = c;
654654
});
655655
if (d.id) return d.id + " is not in EU";
656-
var t= "<h3 class='d-flex flex-row justify-content-between' >"+iconify(d.key.toLowerCase(),"flag")+"<span>"+ countries[d.key.toLowerCase()] + "</span><span class='d-inline-flex p-2 badge badge-primary ml-2'>"+d.value.count+"</span></h3>";
656+
var t= "<h3 class='d-flex flex-row justify-content-between' >"+iconify(d.key.toLowerCase(),"flag")+"<span>"+ countries[d.key.toLowerCase()] + "</span><span class='d-inline-flex p-2 badge text-bg-primary ms-2'>"+d.value.count+"</span></h3>";
657657
results.forEach(function(r){
658658
if (d.value[r].count > 0){
659-
t += "<div class='d-flex flex-row justify-content-between'><div class='p-1 bd-highlight mr-auto w-50'>"
659+
t += "<div class='d-flex flex-row justify-content-between'><div class='p-1 bd-highlight me-auto w-50'>"
660660
+iconify(r)
661661
+r+"</div><div class='p-1 w-25'>"+d.value[r].count+"</div><div class='p-1 w-25'>"+formatPercent(d.value[r].count/d.value.count)+"</div></div>";
662662
}
@@ -1163,7 +1163,7 @@ <h5 class="card-title text-muted text-right">
11631163
}
11641164
d3.selectAll("#pagination")
11651165
.html (`
1166-
Showing <span id="begin"></span>-<span id="end"></span> of <span id="size"></span><span class="btn-group btn-group-sm float-right">
1166+
Showing <span id="begin"></span>-<span id="end"></span> of <span id="size"></span><span class="btn-group btn-group-sm float-end">
11671167
<button id="first" disabled="disabled" class="btn btn-primary"><i class="glyphicon glyphicon-fast-backward"></i>First</button>
11681168
<button id="prev" disabled="disabled" class="btn btn-primary"><i class="glyphicon glyphicon-step-backward"></i>Prev</button>
11691169
<button id="next" class="btn btn-primary">Next<i class="glyphicon glyphicon-step-forward"></i></button>
@@ -1240,7 +1240,7 @@ <h5 class="card-title text-muted text-right">
12401240
<div class="mep col d-none">
12411241
<div class="card">
12421242
<div class="d-flex">
1243-
<div class="mr-auto card-img-top">
1243+
<div class="me-auto card-img-top">
12441244
<img src="img/person.svg" data-src="http://www.europarl.europa.eu/mepphoto/{epid}.jpg">
12451245
</div>
12461246
<div class="p-2 m-2">

‎10/index.html‎

Lines changed: 56 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,12 @@
2525
background: #ffbc2d !important;
2626
}
2727

28-
.card-header .nav-tabs {
29-
margin-bottom: -1rem;
28+
.card-header.nav-tabs-scrollable {
29+
padding: 0;
30+
border-bottom: none;
31+
}
32+
.card-header.nav-tabs-scrollable .nav-tabs {
33+
margin-bottom: 0;
3034
}
3135

3236
td span.committee {
@@ -35,6 +39,10 @@
3539
td a {
3640
color: rgb(33, 150, 243);
3741
}
42+
.report-title {
43+
color: #6c757d;
44+
font-size: 0.85em;
45+
}
3846

3947
.icon {
4048
display: inline-block;
@@ -49,6 +57,7 @@
4957

5058
.navbar-brand svg {
5159
width: 2em;
60+
height: 2em;
5261
fill: white;
5362
animation: pulse 3s 9s;
5463
}
@@ -110,18 +119,18 @@ <h4 class="">Contact</h4>
110119

111120
<form id="search" class="form-inline my-2 my-lg-0">
112121
<input
113-
class="form-control mr-sm-2"
122+
class="form-control me-sm-2"
114123
type="search"
115124
placeholder="Search"
116125
aria-label="Search"
117126
/>
118127
</form>
119-
<a class="resetall">&olarr;</a>
128+
<a class="resetall btn btn-outline-light btn-sm" title="Clear all filters">✕ Clear</a>
120129
<button
121130
class="navbar-toggler"
122131
type="button"
123-
data-toggle="collapse"
124-
data-target="#navbarHeader"
132+
data-bs-toggle="collapse"
133+
data-bs-target="#navbarHeader"
125134
aria-controls="navbarHeader"
126135
aria-expanded="false"
127136
aria-label="Toggle navigation"
@@ -149,14 +158,14 @@ <h3 class="jumbotron-heading nbvotes">
149158
<div class="card-header nav-tabs-scrollable">
150159
<ul class="nav nav-tabs nav-justified" role="tablist">
151160
<li class="nav-item">
152-
<a class="nav-link" data-toggle="tab" href="#plenary" role="tab"
161+
<a class="nav-link" data-bs-toggle="tab" href="#plenary" role="tab"
153162
><span class="nb_plenary"></span> Plenaries</a
154163
>
155164
</li>
156165
<li class="nav-item">
157166
<a
158167
class="nav-link active"
159-
data-toggle="tab"
168+
data-bs-toggle="tab"
160169
href="#report"
161170
role="tab"
162171
><span class="nb_text"></span> Texts Tabled</a
@@ -165,7 +174,7 @@ <h3 class="jumbotron-heading nbvotes">
165174
<li class="nav-item">
166175
<a
167176
class="nav-link"
168-
data-toggle="tab"
177+
data-bs-toggle="tab"
169178
href="#rollcall"
170179
role="tab"
171180
><span class="nb_rollcall"></span> RollCalls</a
@@ -339,7 +348,30 @@ <h3 class="jumbotron-heading nbvotes">
339348

340349
drawNumbers(graphs);
341350

351+
// Track whether any filter is active for the reset button
352+
var _reportFilterActive = false;
353+
function updateResetButton() {
354+
var hasFilter = _reportFilterActive
355+
|| dc.chartRegistry.list().some(function (c) { return c.hasFilter(); });
356+
d3.select(".resetall").classed("disabled", !hasFilter);
357+
}
358+
359+
dc.chartRegistry.list().forEach(function (c) {
360+
c.on("filtered.updateReset", updateResetButton);
361+
});
362+
342363
dc.renderAll();
364+
updateResetButton();
365+
366+
// Restore ?report= from URL on page load
367+
var reportParam = urlParam("report");
368+
if (reportParam && graphs.report) {
369+
_reportFilterActive = true;
370+
graphs.report.dim.filter(reportParam);
371+
new bootstrap.Tab(document.querySelector('a[href="#rollcall"]')).show();
372+
dc.redrawAll();
373+
updateResetButton();
374+
}
343375
}
344376

345377
function drawNumbers(graphs) {
@@ -380,9 +412,15 @@ <h3 class="jumbotron-heading nbvotes">
380412
.formatNumber(d3.format("d"));
381413

382414
d3.select(".resetall").on("click", function () {
415+
_reportFilterActive = false;
383416
graphs.report.dim.filterAll();
384417
dc.filterAll();
385418
dc.renderAll();
419+
// Remove report param from URL
420+
var u = new URL(window.location);
421+
u.searchParams.delete('report');
422+
history.replaceState({}, '', u.toString());
423+
updateResetButton();
386424
});
387425
}
388426

@@ -429,7 +467,7 @@ <h3 class="jumbotron-heading nbvotes">
429467
function (d) {
430468
return (
431469
docs[d.key] &&
432-
"<a title='view on oeil' class='badge badge-secondary' href='" +
470+
"<a title='view on oeil' class='badge text-bg-secondary' href='" +
433471
docs[d.key].oeil +
434472
"' target='oeil'>👁</a>"
435473
);
@@ -464,9 +502,12 @@ <h3 class="jumbotron-heading nbvotes">
464502
g.selectAll("tr.dc-table-row").on("click", function (d) {
465503
var id = d3.select(this).datum().key;
466504
console.log(id);
505+
_reportFilterActive = true;
467506
graphs.report.dim.filter(id);
468-
$('a[href="#rollcall"]').tab("show");
507+
urlParam("report", id);
508+
new bootstrap.Tab(document.querySelector('a[href="#rollcall"]')).show();
469509
dc.redrawAll();
510+
updateResetButton();
470511
});
471512
});
472513

@@ -501,7 +542,7 @@ <h3 class="jumbotron-heading nbvotes">
501542
"<h5>" +
502543
dayFormat(d.key) +
503544
"</h5><div>Rollcalls" +
504-
"<span class='p-2 badge badge-primary ml-2'>" +
545+
"<span class='p-2 badge text-bg-primary ms-2'>" +
505546
d.value +
506547
"</span></div>"
507548
);
@@ -623,39 +664,20 @@ <h3 class="jumbotron-heading nbvotes">
623664
);
624665
},
625666
function (d) {
626-
var r = "";
627667
var f = "";
628-
var url = null;
629-
var s = d.report.match(/^A(\d)-(\d+)\/(\d+)$/); // A8-1234/2018
630-
if (s && s.length == 4)
631-
url =
632-
"http://www.europarl.europa.eu/doceo/document/A-" +
633-
s[1] +
634-
"-" +
635-
s[3] +
636-
"-" +
637-
s[2] +
638-
"_EN.html?redirect";
639668
if (docs[d.report]) {
640669
f =
641670
"<div class='rapporteur'>" +
642671
docs[d.report].rapporteur +
643672
"</div>";
644-
if (!url) url = docs[d.report].oeil;
645673
}
646-
647-
return (
648-
f +
649-
(url ? "<a href='" + url + "'>" + d.report + "</a>" : d.report)
650-
);
674+
return f + d.report;
651675
},
652676
function (d) {
653677
return docs[d.report]
654-
? "<a href='" +
655-
docs[d.report].oeil +
656-
"' target='oeil'>" +
678+
? "<span class='report-title'>" +
657679
docs[d.report].title +
658-
"</a>&nbsp;" +
680+
"</span>&nbsp;" +
659681
d.title
660682
: d.title;
661683
},

0 commit comments

Comments
 (0)