From 6f25a4d9498134715aa3eb3dd8d64b69d280647a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marie=20Wahlstr=C3=B8m?= Date: Wed, 29 Oct 2025 12:14:51 +0100 Subject: [PATCH] refactor($48): :lipstick: Made the Accepted filtering more intuitive --- src/AcceptedFiltering/threePanels.css | 16 +++++++++------- src/AcceptedFiltering/threePanels.js | 4 ++-- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/AcceptedFiltering/threePanels.css b/src/AcceptedFiltering/threePanels.css index e83b9e6..8dbde01 100644 --- a/src/AcceptedFiltering/threePanels.css +++ b/src/AcceptedFiltering/threePanels.css @@ -128,22 +128,24 @@ align-items: center; margin: 3px 0; font-size: 13px; - color: #ddd; /* visible text */ + color: #ddd; } -/* Color boxes */ +/* Color boxes → now circles */ #accepted_legend .legend-color { - width: 16px; - height: 16px; - border: 1px solid #777; - margin-right: 8px; - border-radius: 2px; + width: 20px; + height: 8px; + border-radius: 4px; /* pill shape */ + margin-left: 6px; } #accepted_legend .legend-color.accepted { background-color: #fff; + border: #0008; + box-shadow: 0 0 4px 1px #fff8; } #accepted_legend .legend-color.not-accepted { background-color: #000; + box-shadow: 0 0 4px 1px #fff8; } diff --git a/src/AcceptedFiltering/threePanels.js b/src/AcceptedFiltering/threePanels.js index 249df0f..e39cf65 100644 --- a/src/AcceptedFiltering/threePanels.js +++ b/src/AcceptedFiltering/threePanels.js @@ -299,12 +299,12 @@ function ensureAcceptedLegend() { legend.style.display = 'none' legend.innerHTML = `
+ Accepted points displayed as:
- Accepted points
+ Not accepted points displayed as:
- Not accepted points
` list.appendChild(legend)