deemanone/padelnomics
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(maps): restore score colors for non-article cities, improve hover UX

Browse Source 
Non-article cities were fully gray (#9CA3AF), stripping informational value.
Now all cities show score-based colors (green/amber/red). Non-article cities
are differentiated via lower opacity, dashed border, desaturation, and
default cursor (no click handler). Tooltips show scores for all cities —
article cities get "Click to explore →", non-article cities get "Coming soon".

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Deeman
2026-03-06 10:09:58 +01:00
parent be9b10c13f
commit e2f54552b0
3 changed files with 23 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
web/src/padelnomics/static/css/input.css
View File

@@ -892,6 +892,18 @@
transform: scale(1.1);
}
/* Non-article city markers: faded + dashed border, no click affordance */
.pn-marker--muted {
opacity: 0.45;
border: 2px dashed rgba(255,255,255,0.6);
cursor: default;
filter: saturate(0.7);
}
.pn-marker--muted:hover {
transform: none;
box-shadow: 0 2px 8px rgba(0,0,0,0.28);
}
/* Small fixed venue dot */
.pn-venue {
width: 10px;

16
web/src/padelnomics/static/js/article-maps.js
View File

@@ -19,11 +19,12 @@
return '#DC2626';
}
function makeIcon(size, color) {
function makeIcon(size, color, muted) {
var s = Math.round(size);
var cls = 'pn-marker' + (muted ? ' pn-marker--muted' : '');
return L.divIcon({
className: '',
html: '<div class="pn-marker" style="width:' + s + 'px;height:' + s + 'px;background:' + color + ';opacity:0.82;"></div>',
html: '<div class="' + cls + '" style="width:' + s + 'px;height:' + s + 'px;background:' + color + ';"></div>',
iconSize: [s, s],
iconAnchor: [s / 2, s / 2],
});
@@ -44,17 +45,20 @@
if (!c.lat || !c.lon) return;
var size = 10 + 36 * Math.sqrt((c.padel_venue_count || 1) / maxV);
var hasArticle = c.has_article !== false;
var color = hasArticle ? scoreColor(c.market_score) : '#9CA3AF';
var color = scoreColor(c.market_score);
var pop = c.population >= 1000000
? (c.population / 1000000).toFixed(1) + 'M'
: (c.population >= 1000 ? Math.round(c.population / 1000) + 'K' : (c.population || ''));
var tip = '<strong>' + c.city_name + '</strong><br>'
+ (c.padel_venue_count || 0) + ' venues'
+ (pop ? ' · ' + pop : '');
+ (pop ? ' · ' + pop : '')
+ '<br><span style="color:' + color + ';font-weight:600;">Score ' + Math.round(c.market_score) + '/100</span>';
if (hasArticle) {
tip += '<br><span style="color:' + color + ';font-weight:600;">Score ' + Math.round(c.market_score) + '/100</span>';
tip += '<br><span style="color:#94A3B8;font-size:0.75rem;">Click to explore →</span>';
} else {
tip += '<br><span style="color:#94A3B8;font-size:0.75rem;">Coming soon</span>';
}
var marker = L.marker([c.lat, c.lon], { icon: makeIcon(size, color) })
var marker = L.marker([c.lat, c.lon], { icon: makeIcon(size, color, !hasArticle) })
.bindTooltip(tip, { className: 'map-tooltip', direction: 'top', offset: [0, -Math.round(size / 2)] })
.addTo(map);
if (hasArticle) {