Sidebar has misleading visual hierarchy

Open
  • Is something wrong?
#248 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
48/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Quiet
Tech stack
css
Domain
design, frontend

Research direction

Start by inspecting the site's sidebar markup and CSS for the indentation, fold-arrow, and guide positioning shown in the screenshots. Reproduce the collapsed and expanded states, then confirm that sibling pages no longer appear nested and that indentation guides align with the intended parent text or fold arrows.

Written by the indexing model from the issue text.

Description

Pages that are siblings of a folder appear to be its children. In the following example, Events and Vault look like children of Releasing because they are indented under it, and at a glance the indentation guide looks aligned with Releasing (it's a little outside it, but still more closely aligned to it than to Plugins). The only clue that they're not is the fold arrow off to the right where it's unlikely to be noticed while scanning the list.

Image

When Releasing is unfolded, the actual situation becomes clear (after a moment of confusion).

Image

I vaguely recall this may have been an issue in the app's default theme in the past, so the site's CSS may just be outdated.

I suggest putting all siblings at the same indentation level, and aligning the indentation guides with the start of parent word. Or move the fold arrows to the start of the word and align the guides with those.

Dominant language
JavaScript
Stars
532
Forks
174
Avg merge
3d 3h
Merged PRs (30d)
2

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from obsidianmd/obsidian-developer-docs

All issues in obsidianmd/obsidian-developer-docs

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.