feat: Add diagonal stripes to large cost bars for hazard pattern

This commit is contained in:
Paul Gauthier (aider) 2025-04-13 13:50:59 -07:00
parent 0f8e7fbd34
commit 0b08ca64a8
2 changed files with 11 additions and 3 deletions

View file

@ -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

View file

@ -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 */