diff --git a/static/script.js b/static/script.js index 9d96ab93..b5a1afe1 100644 --- a/static/script.js +++ b/static/script.js @@ -238,6 +238,13 @@ if (clearFiltersBtn) { // Prevent the input blur handler from closing the menu before click runs. item.addEventListener("mousedown", function (evt) { evt.preventDefault(); + selectSuggestion(skill); + }); + + // Handle touch devices to select immediately on touchstart without blur delay + item.addEventListener("touchstart", function (evt) { + evt.preventDefault(); + selectSuggestion(skill); }); item.addEventListener("mouseenter", function () { @@ -245,10 +252,6 @@ if (clearFiltersBtn) { renderActiveSuggestion(); }); - item.addEventListener("click", function () { - selectSuggestion(skill); - }); - suggestionsDiv.appendChild(item); }); suggestionsDiv.style.display = "block"; diff --git a/static/style.css b/static/style.css index 13cd1c94..c6fc97be 100644 --- a/static/style.css +++ b/static/style.css @@ -883,6 +883,22 @@ ol { flex-shrink: 0; } +.skill-strip-marquee { + overflow: hidden; + width: 100%; + position: relative; + display: flex; + mask-image: linear-gradient(to right, transparent, white 15%, white 85%, transparent); + -webkit-mask-image: linear-gradient(to right, transparent, white 15%, white 85%, transparent); +} + +.skill-strip-track { + display: flex; + width: max-content; + animation: skill-strip-marquee 30s linear infinite; + gap: 0; +} + @keyframes skill-strip-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } diff --git a/templates/index.html b/templates/index.html index da7072b2..9abf8892 100644 --- a/templates/index.html +++ b/templates/index.html @@ -708,7 +708,10 @@ - + + + +