search for standard sites
pub-search.waow.tech
search
zig
blog
atproto
fix: replace active filter box with dismissable filter chips
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
+54
-25
+54
-25
site/index.html
+54
-25
site/index.html
···
455
455
}
456
456
457
457
458
-
.active-filter {
458
+
.active-filters {
459
459
display: flex;
460
+
flex-wrap: wrap;
460
461
align-items: center;
461
462
gap: 0.5rem;
462
463
margin-bottom: 1rem;
463
-
padding: 0.5rem;
464
-
background: rgba(27, 115, 64, 0.1);
464
+
font-size: 11px;
465
+
}
466
+
467
+
.active-filters-label {
468
+
color: #555;
469
+
}
470
+
471
+
.filter-chip {
472
+
display: inline-flex;
473
+
align-items: center;
474
+
gap: 4px;
475
+
padding: 3px 8px;
476
+
border-radius: 3px;
477
+
font-size: 11px;
478
+
}
479
+
480
+
.filter-chip.tag {
481
+
background: rgba(27, 115, 64, 0.2);
465
482
border: 1px solid #1B7340;
466
-
border-radius: 4px;
467
-
font-size: 12px;
483
+
color: #2a9d5c;
484
+
}
485
+
486
+
.filter-chip.platform {
487
+
background: rgba(180, 100, 64, 0.2);
488
+
border: 1px solid #d4956a;
489
+
color: #d4956a;
490
+
}
491
+
492
+
.filter-chip.date {
493
+
background: rgba(14, 165, 233, 0.2);
494
+
border: 1px solid #0ea5e9;
495
+
color: #38bdf8;
468
496
}
469
497
470
-
.active-filter .clear {
471
-
margin-left: auto;
472
-
color: #666;
498
+
.filter-chip .x {
473
499
cursor: pointer;
500
+
opacity: 0.6;
501
+
margin-left: 2px;
474
502
}
475
503
476
-
.active-filter .clear:hover {
504
+
.filter-chip .x:hover {
505
+
opacity: 1;
477
506
color: #c44;
478
507
}
479
508
···
549
578
}
550
579
551
580
/* ensure minimum 44px touch targets */
552
-
.tag, .platform-option, .mode-option, .date-option, .suggestion, input.tag-input {
581
+
.tag, .platform-option, .mode-option, .date-option, .suggestion, input.tag-input, .filter-chip {
553
582
min-height: 44px;
554
583
display: inline-flex;
555
584
align-items: center;
···
627
656
628
657
/* ensure touch targets on tablets too */
629
658
@media (hover: none) and (pointer: coarse) {
630
-
.tag, .platform-option, .mode-option, .date-option, .suggestion, .related-item, input.tag-input {
659
+
.tag, .platform-option, .mode-option, .date-option, .suggestion, .related-item, input.tag-input, .filter-chip {
631
660
min-height: 44px;
632
661
display: inline-flex;
633
662
align-items: center;
···
1174
1203
}
1175
1204
}
1176
1205
1206
+
const DATE_PRESET_LABELS = { week: 'last week', month: 'last month', year: 'last year' };
1207
+
1177
1208
function renderActiveFilter() {
1178
1209
if (!currentTag && !currentPlatform && !currentSince) {
1179
1210
activeFilterDiv.innerHTML = '';
1180
1211
return;
1181
1212
}
1182
-
let parts = [];
1183
-
if (currentTag) parts.push(`tag: <strong>#${escapeHtml(currentTag)}</strong>`);
1184
-
if (currentPlatform) parts.push(`platform: <strong>${escapeHtml(currentPlatform)}</strong>`);
1185
-
if (currentSince) parts.push(`since: <strong>${escapeHtml(currentSince)}</strong>`);
1186
-
const clearActions = [];
1187
-
if (currentTag) clearActions.push(`<span class="clear" onclick="clearTag()">× tag</span>`);
1188
-
if (currentPlatform) clearActions.push(`<span class="clear" onclick="clearPlatform()">× platform</span>`);
1189
-
if (currentSince) clearActions.push(`<span class="clear" onclick="setDateFilter(null)">× date</span>`);
1190
-
activeFilterDiv.innerHTML = `
1191
-
<div class="active-filter">
1192
-
<span>filtering by ${parts.join(', ')} <span style="color:#666;font-size:10px">(documents only)</span></span>
1193
-
${clearActions.join(' ')}
1194
-
</div>
1195
-
`;
1213
+
let chips = [];
1214
+
if (currentTag) {
1215
+
chips.push(`<span class="filter-chip tag">#${escapeHtml(currentTag)}<span class="x" onclick="clearTag()">\u00d7</span></span>`);
1216
+
}
1217
+
if (currentPlatform) {
1218
+
chips.push(`<span class="filter-chip platform">${escapeHtml(currentPlatform)}<span class="x" onclick="clearPlatform()">\u00d7</span></span>`);
1219
+
}
1220
+
if (currentSince) {
1221
+
const label = DATE_PRESET_LABELS[currentDatePreset] || currentSince;
1222
+
chips.push(`<span class="filter-chip date">${escapeHtml(label)}<span class="x" onclick="setDateFilter(null)">\u00d7</span></span>`);
1223
+
}
1224
+
activeFilterDiv.innerHTML = `<div class="active-filters"><span class="active-filters-label">active filters:</span>${chips.join('')}</div>`;
1196
1225
}
1197
1226
1198
1227
function renderTags() {