Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

site: small interaction bugs — sticky filter bar covers 28% of a desktop viewport; arrow keys push history; hash navigation wipes typing; no cap on `q`

Cerrado
  • ¿Algo no está bien?
#157 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
68/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
javascript
Área
frontend

Línea de trabajo

Start with site/public/app.js for chip keyboard handling, popstate behavior, and the existing is-collapsed machinery; check site/public/styles.css for sticky controls and anchor offsets. Read site/lib/search.mjs for query parsing and inspect how input updates the URL. Done when the bar is under 100 px on desktop, arrowing across chips adds at most one history entry, hash navigation preserves typing, and q is bounded.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

bug priority: low

Why it matters

Each one breaks a small expectation: a quarter of the screen should not be a permanent control panel, Back should undo a choice rather than every key press, typing should never be erased, and the URL should not grow without bound.

Evidence (at 69387df, local build)

  • .controls { position: sticky; top: 0 } (site/public/styles.css:297-299). At 1440x900 while scrolled into the catalog the bar is 252 px tall (283 px with an active-filter row), and --sticky-h drives scroll-margin-top (styles.css:1109), so anchor jumps ("Show all", chip links) land 300 px down.
  • site/public/app.js:231-242 keydown handler calls apply({ push: true }) per arrow press: 5 ArrowRight presses -> history.length +5.
  • app.js:693-697 popstate handler runs readUrl(); syncControls(); apply() on every popstate, which also fires on hash-only navigation (topnav #stacks, #catalog): type "ken" then click #stacks within the 120 ms debounce -> the search input is emptied.
  • site/lib/search.mjs:117 if (p.has("q")) state.q = p.get("q") has no cap; a 4000-character query produced a 4 KB URL and a 4 KB active-filter chip.

Suggested approach

Collapse the controls to one row (search, active chips, a "Filters" disclosure) once scrolled past, using the existing is-collapsed machinery (app.js:773-780) driven by an IntersectionObserver, or make only the search row sticky. Arrows -> apply() (replace) and push only on click/Enter/Space. In popstate, return early when location.search equals the query string last written by writeUrl. Clamp q to about 200 characters in readState and on input.

Done when

The stuck bar is under 100 px on desktop; arrowing across all chips adds at most one history entry; hash navigation never changes the search box; q is bounded.

Lenguaje dominante
JavaScript
Estrellas
58
Forks
15
Merge medio
16 h 53 min
PR fusionados (30 d)
14

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de TMHSDigital/Free-Game-Dev-Assets

Todos los issues de TMHSDigital/Free-Game-Dev-Assets

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.