Consolidate KPI cards, study-type controls and pagination into shared components

Aperta
  • Qualcosa non va?
#32 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
5/5
Tempo stimato
Più di una settimana
Idoneità per principianti
35/100
Tipo di issue
Refactoring
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
css, javascript
Ambito
design, frontend

Direzione di ricerca

Start by reviewing the existing KPI cards, study-type controls, pagination and citation-and-reuse blocks across every tab, then read the existing --color-* CSS tokens. The issue calls for a design pass and before-and-after screenshots; done means the shared components and sentence-case headings are used consistently across tabs, with one collapsed citation block at each tab’s end and no citation text running under its Copy button.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Source: second usability review, 21 October 2026, finding C19. This was an agent-led review using simulated perspectives, not recruited participants.

Problem

The tabs look as if they come from several design systems:

  • KPI cards: 4 styles (Overview, Citation Impact, Mean Citedness and Authorship Overlap).
  • Study-type controls: 3 styles, worded 4 ways ("SHOW: … Replications only" vs "Replications"). The wording is handled in the vocabulary PR; this issue covers the components.
  • Pagination: 3 styles. Citation Impact uses Bootstrap blue, which is off-palette.
  • Headings: a mix of Title Case and sentence case.
  • Citation text: the Recommended Citation text runs under its Copy button.
  • Copy buttons: "Citation and reuse guidance" blocks appear on every tab, twice on Publication Type, and their inner headings vary.

Chart font, legend order and number formatting are fixed in the accessibility and chart-detail PRs.

Proposal

  • One KPI component (value, label, optional denominator line).
  • One segmented control for the study type, shared by every tab.
  • One pagination component, used by Browse and Citation Impact.
  • Sentence case throughout.
  • One citation-and-reuse block per tab, collapsed by default and placed at the end.

This needs a design pass and before/after screenshots of every tab. The CSS tokens (--color-*) already exist, so most of the work is consolidating components rather than restyling.

Lingua principale
JavaScript
Stelle
12
Fork
0
Merge medio
53m
PR unite (30g)
8

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di forrtproject/flora-explorer

Tutte le issue di forrtproject/flora-explorer

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.