Skip to content

Commit b7788e6

Browse files
Copilotbrunoborges
Copilot
and
brunoborges
committed
Reduce visual noise: replace JDK pill row with compact dropdown alongside Expand All
Co-authored-by: brunoborges <129743+brunoborges@users.noreply.github.com>
1 parent f3bd709 commit b7788e6

File tree

3 files changed

+136
-33
lines changed

3 files changed

+136
-33
lines changed

‎site/app.js‎

Lines changed: 40 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -203,7 +203,6 @@
203203
========================================================== */
204204
const initFilters = () => {
205205
const pills = document.querySelectorAll('#categoryFilter .filter-pill');
206-
const jdkPills = document.querySelectorAll('#jdkFilter .filter-pill');
207206
const cards = document.querySelectorAll('.tip-card');
208207
if (!pills.length || !cards.length) return;
209208

@@ -257,20 +256,50 @@
257256
});
258257
});
259258

260-
jdkPills.forEach(pill => {
261-
pill.addEventListener('click', () => {
262-
const version = pill.dataset.jdkFilter || 'all';
263-
const wasActive = pill.classList.contains('active');
259+
// JDK Dropdown
260+
const jdkDropdown = document.getElementById('jdkDropdown');
261+
if (jdkDropdown) {
262+
const toggleBtn = jdkDropdown.querySelector('.jdk-dropdown-toggle');
263+
const labelEl = jdkDropdown.querySelector('.jdk-label');
264+
const list = jdkDropdown.querySelector('ul');
264265

265-
// Update active JDK pill (toggle off if re-clicked)
266-
jdkPills.forEach(p => p.classList.remove('active'));
267-
if (!wasActive) pill.classList.add('active');
266+
const openDropdown = () => {
267+
list.style.display = 'block';
268+
toggleBtn.setAttribute('aria-expanded', 'true');
269+
};
268270

269-
activeJdk = (!wasActive && version !== 'all') ? version : null;
271+
const closeDropdown = () => {
272+
list.style.display = 'none';
273+
toggleBtn.setAttribute('aria-expanded', 'false');
274+
};
270275

271-
applyFilters();
276+
toggleBtn.addEventListener('click', (e) => {
277+
e.stopPropagation();
278+
list.style.display === 'block' ? closeDropdown() : openDropdown();
272279
});
273-
});
280+
281+
document.addEventListener('click', closeDropdown);
282+
document.addEventListener('keydown', (e) => {
283+
if (e.key === 'Escape') closeDropdown();
284+
});
285+
286+
list.querySelectorAll('li').forEach(li => {
287+
li.addEventListener('click', (e) => {
288+
e.stopPropagation();
289+
closeDropdown();
290+
291+
const version = li.dataset.jdkFilter;
292+
list.querySelectorAll('li').forEach(l => l.classList.remove('active'));
293+
li.classList.add('active');
294+
295+
activeJdk = version !== 'all' ? version : null;
296+
if (labelEl) labelEl.textContent = li.textContent.trim();
297+
toggleBtn.classList.toggle('has-filter', !!activeJdk);
298+
299+
applyFilters();
300+
});
301+
});
302+
}
274303

275304
// Apply filter from a given category string (or "all" / empty for no filter)
276305
const applyHashFilter = (category) => {

‎site/styles.css‎

Lines changed: 84 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -407,18 +407,6 @@ nav {
407407
}
408408

409409
/* ---------- Filter Pills ---------- */
410-
.filter-group {
411-
margin-bottom: 40px;
412-
}
413-
414-
.filter-group .filter-pills {
415-
margin-bottom: 12px;
416-
}
417-
418-
.filter-group .filter-pills:last-child {
419-
margin-bottom: 0;
420-
}
421-
422410
.filter-pills {
423411
display: flex;
424412
flex-wrap: wrap;
@@ -679,9 +667,93 @@ nav {
679667
.view-toggle-wrap {
680668
display: flex;
681669
justify-content: center;
670+
align-items: center;
671+
gap: 10px;
682672
margin: 16px 0;
683673
}
684674

675+
/* ---------- JDK Dropdown ---------- */
676+
.jdk-dropdown {
677+
position: relative;
678+
display: inline-flex;
679+
}
680+
681+
.jdk-dropdown-toggle {
682+
display: inline-flex;
683+
align-items: center;
684+
gap: 6px;
685+
padding: 10px 16px;
686+
font-size: 0.88rem;
687+
font-weight: 500;
688+
color: var(--text);
689+
background: var(--surface);
690+
border: 1px solid var(--border);
691+
border-radius: var(--radius-sm);
692+
cursor: pointer;
693+
transition: all 0.25s;
694+
white-space: nowrap;
695+
}
696+
697+
.jdk-dropdown-toggle:hover {
698+
background: var(--surface-2);
699+
border-color: var(--border-light);
700+
transform: translateY(-2px);
701+
}
702+
703+
.jdk-dropdown-toggle.has-filter {
704+
border-color: var(--accent);
705+
color: var(--accent);
706+
}
707+
708+
.jdk-label {
709+
font-weight: 600;
710+
}
711+
712+
.dropdown-caret {
713+
font-size: 0.75rem;
714+
opacity: 0.6;
715+
}
716+
717+
.jdk-dropdown ul {
718+
display: none;
719+
position: absolute;
720+
bottom: calc(100% + 6px);
721+
left: 50%;
722+
transform: translateX(-50%);
723+
margin: 0;
724+
padding: 4px 0;
725+
list-style: none;
726+
background: var(--surface);
727+
border: 1px solid var(--border);
728+
border-radius: var(--radius-sm);
729+
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
730+
z-index: 100;
731+
min-width: 130px;
732+
}
733+
734+
.jdk-dropdown li {
735+
padding: 8px 16px;
736+
cursor: pointer;
737+
font-size: 0.88rem;
738+
color: var(--text);
739+
white-space: nowrap;
740+
transition: background 0.15s;
741+
}
742+
743+
.jdk-dropdown li:hover {
744+
background: var(--accent);
745+
color: #fff;
746+
}
747+
748+
.jdk-dropdown li.active {
749+
font-weight: 600;
750+
color: var(--accent);
751+
}
752+
753+
.jdk-dropdown li.active:hover {
754+
color: #fff;
755+
}
756+
685757
.view-toggle-btn {
686758
display: inline-flex;
687759
align-items: center;

‎templates/index.html‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -233,7 +233,6 @@ <h1>{{site.tagline_line1}}<br><span class="gradient">{{site.tagline_line2}}</spa
233233
<h2 class="section-title">{{site.allComparisons}}</h2>
234234
<span class="section-badge">{{site.snippetsBadge}}</span>
235235
</div>
236-
<div class="filter-group">
237236
<div class="filter-pills" id="categoryFilter">
238237
<span class="filter-label">{{filters.show}}</span>
239238
<button class="filter-pill" data-filter="all">{{filters.all}}</button>
@@ -249,16 +248,19 @@ <h2 class="section-title">{{site.allComparisons}}</h2>
249248
<button class="filter-pill" data-filter="tooling">Tooling</button>
250249
<button class="filter-pill" data-filter="enterprise">Enterprise</button>
251250
</div>
252-
<div class="filter-pills" id="jdkFilter">
253-
<span class="filter-label">{{filters.jdk}}</span>
254-
<button class="filter-pill" data-jdk-filter="all">{{filters.all}}</button>
255-
<button class="filter-pill" data-jdk-filter="11">Java 11</button>
256-
<button class="filter-pill" data-jdk-filter="17">Java 17</button>
257-
<button class="filter-pill" data-jdk-filter="21">Java 21</button>
258-
<button class="filter-pill" data-jdk-filter="25">Java 25</button>
259-
</div>
260-
</div>
261251
<div class="view-toggle-wrap">
252+
<div class="jdk-dropdown" id="jdkDropdown">
253+
<button class="jdk-dropdown-toggle" aria-haspopup="listbox" aria-expanded="false">
254+
{{filters.jdk}} <span class="jdk-label">{{filters.all}}</span> <span class="dropdown-caret">▾</span>
255+
</button>
256+
<ul role="listbox">
257+
<li data-jdk-filter="all" class="active">{{filters.all}}</li>
258+
<li data-jdk-filter="11">Java 11</li>
259+
<li data-jdk-filter="17">Java 17</li>
260+
<li data-jdk-filter="21">Java 21</li>
261+
<li data-jdk-filter="25">Java 25</li>
262+
</ul>
263+
</div>
262264
<button class="view-toggle-btn" id="viewToggle" aria-label="Toggle view mode">
263265
<span class="view-toggle-icon">⊞</span>
264266
<span class="view-toggle-text">{{view.expandAll}}</span>

0 commit comments

Comments
 (0)