freeCodeCamp / freeCodeCamp/devdocs

Improve sidebar styling

Offen
#668 3 Kommentare 7 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
improvement
Vorherrschende Sprache
Ruby
Sterne
39.5k
Forks
2.6k
Ø Merge
4 T. 32 Min.
Gemergte PRs (30 T.)
13

Beschreibung

I feel like the sidebar could give mouse users better feedback with some cursor changes and hover color. Here's what I propose:

* Remove `__.list-item`'s `cursor: default` [(this line)](https://github.com/Thibaut/devdocs/blob/437eb8dd542e2a26b72a90ff723ead51aa719a9b/assets/stylesheets/components/_sidebar.scss#L112) to set it back to `auto` (which will be `cursor: pointer` on most browsers). Currently only the arrow provides feedback that the element is clickable.
* Add a `:hover` background color for `.list_item`:
```scss
.__list-item:hover {
background-color: #e3e3e3;
}
```

Current | New
--- | ---
![](https://i.imgur.com/XE8RZyI.gif) | ![](https://i.imgur.com/DRTaHTb.gif)

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Start in assets/stylesheets/components/_sidebar.scss at the linked __.list-item cursor rule. Review the proposed cursor and hover background changes, then compare the sidebar's mouse feedback with the current and reference behavior shown in the issue. Done means clickable sidebar items provide the proposed cursor and hover color without affecting other styling.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
scss
Bereich
frontend
Issue-Typ
Feature
Schwierigkeit
1/5
Geschätzter Aufwand
Unter einer Stunde
Aktivitätsstatus
Veraltet
Klarheit
Klar beschrieben
Anfängerfreundlichkeit
45/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.