From 0b08ca64a80bbb0e6ac8b9c651082c659987cd0a Mon Sep 17 00:00:00 2001 From: "Paul Gauthier (aider)" Date: Sun, 13 Apr 2025 13:50:59 -0700 Subject: [PATCH] feat: Add diagonal stripes to large cost bars for hazard pattern --- aider/website/_includes/leaderboard_table.js | 6 +++--- aider/website/docs/leaderboards/index.md | 8 ++++++++ 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/aider/website/_includes/leaderboard_table.js b/aider/website/_includes/leaderboard_table.js index c24d2639b..12fe2e47f 100644 --- a/aider/website/_includes/leaderboard_table.js +++ b/aider/website/_includes/leaderboard_table.js @@ -215,7 +215,7 @@ document.addEventListener('DOMContentLoaded', function() { // Mark bars that exceed the limit if (cost > MAX_DISPLAY_COST) { - // Create a darker section at the end + // Create a darker section at the end with diagonal stripes const darkSection = document.createElement('div'); darkSection.className = 'bar-viz'; darkSection.style.width = '10%'; // From 90% to 100% @@ -223,9 +223,9 @@ document.addEventListener('DOMContentLoaded', function() { darkSection.style.backgroundColor = 'rgba(13, 110, 253, 0.6)'; // Darker blue darkSection.style.borderRight = '1px solid rgba(13, 110, 253, 0.8)'; darkSection.style.zIndex = '1'; + // Add diagonal stripes with CSS background + darkSection.style.backgroundImage = 'repeating-linear-gradient(45deg, rgba(255,255,255,0.3), rgba(255,255,255,0.3) 5px, transparent 5px, transparent 10px)'; bar.parentNode.appendChild(darkSection); - - // No marker at the end of the bar } } else { // Set width to 0 if cost is 0 or negative diff --git a/aider/website/docs/leaderboards/index.md b/aider/website/docs/leaderboards/index.md index 34e55e31e..f9908dfb8 100644 --- a/aider/website/docs/leaderboards/index.md +++ b/aider/website/docs/leaderboards/index.md @@ -181,6 +181,14 @@ human intervention. border-radius: 0 2px 2px 0; /* Slightly rounded end corners */ /* Width and colors are set inline via style attribute */ } + /* Add a tooltip class for showing cost information on hover */ + .cost-bar-cell:hover .bar-viz[style*="background-image"] { + animation: stripe-animation 2s linear infinite; + } + @keyframes stripe-animation { + 0% { background-position: 0 0; } + 100% { background-position: 20px 0; } + } .bar-cell span { position: absolute; /* Position relative to the cell */ left: 5px; /* Position slightly inside the left edge */