diff options
| author | s-ol <s-ol@users.noreply.github.com> | 2021-01-27 15:07:36 +0000 |
|---|---|---|
| committer | s-ol <s-ol@users.noreply.github.com> | 2021-01-27 15:07:36 +0000 |
| commit | 94d1b4a08b145dad8556fd536a2e776391406067 (patch) | |
| tree | 343ffa7876b8c092d23f6c1d75b9c27c96c8f19e | |
| parent | actually visually collapse nodes (diff) | |
| download | fedidag-94d1b4a08b145dad8556fd536a2e776391406067.tar.gz fedidag-94d1b4a08b145dad8556fd536a2e776391406067.zip | |
collapse on header only
| -rw-r--r-- | src/index.js | 2 | ||||
| -rw-r--r-- | src/ui.js | 12 |
2 files changed, 10 insertions, 4 deletions
diff --git a/src/index.js b/src/index.js index 6a20a0c..c90c3ab 100644 --- a/src/index.js +++ b/src/index.js @@ -158,7 +158,7 @@ update(graph) .catch(err => console.error(err)); const hideNote = (e) => { - const clicked = graph[e.currentTarget.dataset.id]; + const clicked = graph[e.currentTarget.parentElement.dataset.id]; clicked.collapsed = clicked.collapsed ? false : 'explicit'; for (const id of updateCollapsed(graph, clicked)) { @@ -66,6 +66,13 @@ section > header { color: var(--theme-header-fg); background: var(--theme-header-bg); + + cursor: pointer; + transition: opacity 0.3s; +} + +section > header:hover { + opacity: 0.5; } section > header.small { @@ -119,11 +126,10 @@ export const Note = ({ id, type, attributedTo, published, content, smallHeader = css={{ '--theme-header-bg': backgroundColor }} class={type === 'Tombstone' ? 'tombstone' : ''} dataset={{ id }} - onClick={onHide} > {smallHeader - ? <header class="small" /> - : <header> + ? <header class="small" onClick={onHide} /> + : <header onClick={onHide}> <img src={new URL(attributedTo.icon.url, attributedTo.id)} /> <span class="user">{username}</span> <Space /> |