From de5348c48da0c16785d4e3dadbdb796af64298f6 Mon Sep 17 00:00:00 2001 From: Ole Eskild Steensen Date: Tue, 7 Feb 2023 13:26:26 +0100 Subject: [PATCH 01/11] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index d6b11a5..e402070 100644 --- a/README.md +++ b/README.md @@ -5,5 +5,5 @@ See the README in the plugin repo for information on how to set it up. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/oleeskild/digitalgarden) --- -## Custom Styling -I encourage you to change the default styling to make the site your own. Please modify the custom-style.scss when doing so to avoid future conflict when updating the template. \ No newline at end of file +## Docs +Docs are available at [dg-docs.ole.dev](https://dg-docs.ole.dev/) From 74225fd40562a809f2b61af5b81091b68c8ac045 Mon Sep 17 00:00:00 2001 From: Utsob Roy Date: Thu, 9 Feb 2023 15:14:19 +0600 Subject: [PATCH 02/11] quote symbol in callout fix (#67) --- src/site/styles/obsidian-base.scss | 2 +- src/site/styles/style.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/site/styles/obsidian-base.scss b/src/site/styles/obsidian-base.scss index 563409a..6240859 100644 --- a/src/site/styles/obsidian-base.scss +++ b/src/site/styles/obsidian-base.scss @@ -5867,7 +5867,7 @@ body { .callout[data-callout="quote"], .callout[data-callout="cite"] { --callout-color: 158, 158, 158; - --callout-icon: quote-glyph; + --callout-icon: lucide-quote; } .callout { overflow: hidden; diff --git a/src/site/styles/style.scss b/src/site/styles/style.scss index d1b55bb..9170df5 100644 --- a/src/site/styles/style.scss +++ b/src/site/styles/style.scss @@ -168,7 +168,7 @@ p>code { .callout[data-callout="quote"], .callout[data-callout="cite"] { --callout-color: 158, 158, 158; - --callout-icon: quote-glyph; + --callout-icon: lucide-quote; } .callout { overflow: hidden; From d4b8c96586f180d06a487386a5fd7f73cc128f95 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Thu, 9 Feb 2023 10:14:40 +0100 Subject: [PATCH 03/11] Bump sass from 1.57.1 to 1.58.0 (#65) Bumps [sass](https://github.com/sass/dart-sass) from 1.57.1 to 1.58.0. - [Release notes](https://github.com/sass/dart-sass/releases) - [Changelog](https://github.com/sass/dart-sass/blob/main/CHANGELOG.md) - [Commits](https://github.com/sass/dart-sass/compare/1.57.1...1.58.0) --- updated-dependencies: - dependency-name: sass dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 136691f..ce83806 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5103,9 +5103,9 @@ } }, "node_modules/sass": { - "version": "1.57.1", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.57.1.tgz", - "integrity": "sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==", + "version": "1.58.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.58.0.tgz", + "integrity": "sha512-PiMJcP33DdKtZ/1jSjjqVIKihoDc6yWmYr9K/4r3fVVIEDAluD0q7XZiRKrNJcPK3qkLRF/79DND1H5q1LBjgg==", "dev": true, "dependencies": { "chokidar": ">=3.0.0 <4.0.0", @@ -10502,9 +10502,9 @@ } }, "sass": { - "version": "1.57.1", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.57.1.tgz", - "integrity": "sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==", + "version": "1.58.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.58.0.tgz", + "integrity": "sha512-PiMJcP33DdKtZ/1jSjjqVIKihoDc6yWmYr9K/4r3fVVIEDAluD0q7XZiRKrNJcPK3qkLRF/79DND1H5q1LBjgg==", "dev": true, "requires": { "chokidar": ">=3.0.0 <4.0.0", From efb951179df5dcae79a1240c72682a338af2e622 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Thu, 9 Feb 2023 10:14:46 +0100 Subject: [PATCH 04/11] Bump axios from 1.2.6 to 1.3.2 (#64) Bumps [axios](https://github.com/axios/axios) from 1.2.6 to 1.3.2. - [Release notes](https://github.com/axios/axios/releases) - [Changelog](https://github.com/axios/axios/blob/v1.x/CHANGELOG.md) - [Commits](https://github.com/axios/axios/compare/v1.2.6...v1.3.2) --- updated-dependencies: - dependency-name: axios dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index ce83806..829d5df 100644 --- a/package-lock.json +++ b/package-lock.json @@ -785,9 +785,9 @@ "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==" }, "node_modules/axios": { - "version": "1.2.6", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.2.6.tgz", - "integrity": "sha512-rC/7F08XxZwjMV4iuWv+JpD3E0Ksqg9nac4IIg6RwNuF0JTeWoCo/mBNG54+tNhhI11G3/VDRbdDQTs9hGp4pQ==", + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.2.tgz", + "integrity": "sha512-1M3O703bYqYuPhbHeya5bnhpYVsDDRyQSabNja04mZtboLNSuZ4YrltestrLXfHgmzua4TpUqRiVKbiQuo2epw==", "dependencies": { "follow-redirects": "^1.15.0", "form-data": "^4.0.0", @@ -7153,9 +7153,9 @@ "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==" }, "axios": { - "version": "1.2.6", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.2.6.tgz", - "integrity": "sha512-rC/7F08XxZwjMV4iuWv+JpD3E0Ksqg9nac4IIg6RwNuF0JTeWoCo/mBNG54+tNhhI11G3/VDRbdDQTs9hGp4pQ==", + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.2.tgz", + "integrity": "sha512-1M3O703bYqYuPhbHeya5bnhpYVsDDRyQSabNja04mZtboLNSuZ4YrltestrLXfHgmzua4TpUqRiVKbiQuo2epw==", "requires": { "follow-redirects": "^1.15.0", "form-data": "^4.0.0", From 862a6a5dcd437422e9cbeec77038d6130a93ddad Mon Sep 17 00:00:00 2001 From: Utsob Roy Date: Tue, 14 Feb 2023 11:37:52 +0600 Subject: [PATCH 05/11] implement focus on hovered and neigbors --- src/site/_includes/components/graphScript.njk | 52 +++++++++++++++---- 1 file changed, 43 insertions(+), 9 deletions(-) diff --git a/src/site/_includes/components/graphScript.njk b/src/site/_includes/components/graphScript.njk index 1e8f970..b3b189b 100644 --- a/src/site/_includes/components/graphScript.njk +++ b/src/site/_includes/components/graphScript.njk @@ -51,6 +51,12 @@ var Graph; function renderGraph(graphData, id, width, height, delay) { + + const highlightNodes = new Set(); + let hoverNode = null; + const color = getCssVar("--text-accent"); + const mutedColor = getCssVar("--text-faint"); + let Graph = ForceGraph() (document.getElementById(id)) .graphData(graphData) @@ -63,15 +69,34 @@ .height(height) .linkDirectionalArrowLength(2) .linkDirectionalArrowRelPos(0.5) - .linkColor(() => getCssVar("--text-muted") || getCssVar("--text-normal")) + .autoPauseRedraw(false) + .linkColor((link) => { + if (hoverNode == null) { + return color; + } + if (link.source.id == hoverNode.id || link.target.id == hoverNode.id) { + return color; + } else { + return mutedColor; + } + + }) .nodeCanvasObject((node, ctx) => { - const color = getCssVar("--text-accent"); const numberOfNeighbours = (node.neighbors && node.neighbors.length) || 2; const nodeR = Math.min(7, Math.max(numberOfNeighbours / 2, 2)); ctx.beginPath(); ctx.arc(node.x, node.y, nodeR, 0, 2 * Math.PI, false); - ctx.fillStyle = color; + if (hoverNode == null) { + ctx.fillStyle = color; + } else { + if (node == hoverNode || highlightNodes.has(node.url)) { + ctx.fillStyle = color; + } else { + ctx.fillStyle = mutedColor; + } + } + ctx.fill(); if (node.current) { @@ -91,13 +116,22 @@ ctx.fillText(label, node.x, node.y + nodeR + 2); }) .onNodeClick(node => { - window.location = node.url; - }); - if (delay != null && graphData.nodes.length > 2) { - setTimeout(() => { - Graph.zoomToFit(5, 75); - }, delay); + window.location = node.url; + }) + .onNodeHover(node => { + highlightNodes.clear(); + if (node) { + highlightNodes.add(node); + node.neighbors.forEach(neighbor => highlightNodes.add(neighbor)); } + hoverNode = node || null; + + }); + if (delay != null && graphData.nodes.length > 4) { + setTimeout(() => { + Graph.zoomToFit(5, 75); + }, delay); + } return Graph; } From 353e2094b6868b057903726c3f5edd0e0b2ff814 Mon Sep 17 00:00:00 2001 From: Utsob Roy Date: Tue, 14 Feb 2023 15:07:13 +0600 Subject: [PATCH 06/11] graph enhancements --- src/site/_includes/components/graphScript.njk | 30 +++- src/site/_includes/components/sidebar.njk | 5 +- src/site/styles/digital-garden-base.scss | 149 ++++++++++-------- 3 files changed, 112 insertions(+), 72 deletions(-) diff --git a/src/site/_includes/components/graphScript.njk b/src/site/_includes/components/graphScript.njk index b3b189b..055e732 100644 --- a/src/site/_includes/components/graphScript.njk +++ b/src/site/_includes/components/graphScript.njk @@ -50,15 +50,17 @@ var Graph; - function renderGraph(graphData, id, width, height, delay) { - + function renderGraph(graphData, id, delay) { + const el = document.getElementById(id); + width = el.offsetWidth; + height = el.offsetHeight; const highlightNodes = new Set(); let hoverNode = null; const color = getCssVar("--text-accent"); const mutedColor = getCssVar("--text-faint"); let Graph = ForceGraph() - (document.getElementById(id)) + (el) .graphData(graphData) .nodeId('id') .nodeLabel('title') @@ -138,7 +140,7 @@ function fetchGraphData() { fetch('/graph.json').then(res => res.json()).then(data => { window.graphData = data; - Graph = renderGraph(filterToDepth(JSON.parse(JSON.stringify(data))), "link-graph", 320, 320, 1); + Graph = renderGraph(filterToDepth(JSON.parse(JSON.stringify(data))), "link-graph", 1); }); } @@ -153,7 +155,7 @@ Graph._destructor(); Graph = null; } - renderGraph(filterToDepth(JSON.parse(JSON.stringify(window.graphData))), "link-graph", 320, 320, 1); + renderGraph(filterToDepth(JSON.parse(JSON.stringify(window.graphData))), "link-graph", 1); }) window.fullGraph = null; @@ -169,7 +171,7 @@ g.classList.add('show'); document.body.appendChild(g); g.innerHTML = '
'; - window.fullGraph = renderGraph(graphData, "full-graph-container", g.offsetWidth, g.offsetHeight, 200); + window.fullGraph = renderGraph(graphData, "full-graph-container", 200); document.getElementById('full-graph-close').addEventListener('click', (evt) => { g.classList.remove('show'); window.fullGraph._destructor(); @@ -180,8 +182,20 @@ } - document.getElementById('graph-full-btn').addEventListener('click', (evt) => { - if (!fullGraph) { + document.getElementById('graph-fs-btn').addEventListener('click', (evt) => { + const el = document.querySelector('.graph'); + if (el.classList.contains('graph-fs')) { + el.classList.remove('graph-fs'); + Graph.width(el.offsetWidth).height(el.offsetHeight); + } else { + el.classList.add('graph-fs'); + Graph.width(el.offsetWidth).height(el.offsetHeight); + } + + }); + + document.getElementById('global-graph-btn').addEventListener('click', (evt) => { + if (!window.fullGraph) { renderFullGraph(); } }); diff --git a/src/site/_includes/components/sidebar.njk b/src/site/_includes/components/sidebar.njk index 9946350..c51cece 100644 --- a/src/site/_includes/components/sidebar.njk +++ b/src/site/_includes/components/sidebar.njk @@ -19,7 +19,10 @@ - +
+ + +
diff --git a/src/site/styles/digital-garden-base.scss b/src/site/styles/digital-garden-base.scss index ce9d506..7146b10 100644 --- a/src/site/styles/digital-garden-base.scss +++ b/src/site/styles/digital-garden-base.scss @@ -15,16 +15,15 @@ body { margin-top: 90px; position: relative; - @media(max-width: 800px) { + @media (max-width: 800px) { margin-top: 75px; } - } .external-link { background-position: center right; background-repeat: no-repeat; - background-image: linear-gradient(transparent, transparent), url('/img/outgoing.svg'); + background-image: linear-gradient(transparent, transparent), url("/img/outgoing.svg"); background-size: 13px; padding-right: 16px; background-position-y: 4px; @@ -62,6 +61,33 @@ ul.task-list { display: flex; z-index: 3; max-width: 350px; + + .graph { + width: 320px; + height: 320px; + + #link-graph { + width: 100%; + height: 100%; + } + } + .graph-fs { + position: fixed; + top: 50%; + left: 50%; + height: calc(100vmin - 100px); + width: calc(100vmin - 100px); + min-height: 350px; + min-width: 350px; + transform: translate(-50%, -50%); + z-index: 9999; + display: none; + background-color: var(--background-secondary); + + .graph-title { + display: none; + } + } } .expand-line { @@ -88,10 +114,10 @@ ul.task-list { } .toc-container { - font-size: 1rem; - max-height: 220px; + font-size: 1rem; + max-height: 220px; overflow-y: auto; - margin-bottom:10px; + margin-bottom: 10px; border-left: 1px solid var(--text-accent); ul { list-style-type: none; @@ -100,19 +126,19 @@ ul.task-list { margin-bottom: 0; } ul:not(:first-child) { - margin-bottom:3px; + margin-bottom: 3px; } - li{ + li { padding-top: 4px; - &::before{ - content: '# ' !important; + &::before { + content: "# " !important; color: var(--text-accent); font-size: 0.8rem; } - a{ + a { text-decoration: none; - &:hover{ + &:hover { text-decoration: underline; } } @@ -149,7 +175,7 @@ ul.task-list { border-left: 1px solid var(--text-accent); max-height: 200px; overflow-y: auto; - overflow-x:hidden; + overflow-x: hidden; } .backlink-card { @@ -164,15 +190,14 @@ ul.task-list { } } -.no-backlinks-message{ +.no-backlinks-message { font-size: 0.8rem; color: var(--text-normal); } .graph { - .graph-title-container { - display: flex; + display: flex; justify-content: flex-end; width: 320px; } @@ -195,9 +220,7 @@ ul.task-list { width: fit-content; } - - -@media(max-width: 1400px) { +@media (max-width: 1400px) { #link-graph { border-radius: 0 10px 10px 10px; } @@ -209,11 +232,11 @@ ul.task-list { max-width: 700px; margin: auto; border-radius: 0; - border-top: 2px solid var(--background-secondary); + border-top: 2px solid var(--background-secondary); justify-content: space-between; } - .sidebar-container{ + .sidebar-container { display: flex; flex-direction: row; justify-content: space-between; @@ -221,7 +244,7 @@ ul.task-list { .graph { flex: 1; - .graph-title-container{ + .graph-title-container { justify-content: flex-start; } } @@ -230,8 +253,8 @@ ul.task-list { display: none; } } -@media(max-width: 800px) { - .sidebar-container{ +@media (max-width: 800px) { + .sidebar-container { display: flex; flex-direction: column-reverse; } @@ -252,7 +275,7 @@ ul.task-list { h1 { font-size: 32px !important; } - @media(max-width: 800px) { + @media (max-width: 800px) { h1 { display: none; } @@ -269,7 +292,7 @@ ul.task-list { justify-content: flex-end; margin-bottom: -60px; - @media(max-width: 800px) { + @media (max-width: 800px) { justify-content: center; } @@ -290,11 +313,11 @@ ul.task-list { display: flex; justify-content: space-between; align-items: center; - @media(max-width: 1400px) { + @media (max-width: 1400px) { position: fixed; } - @media(max-width: 800px) { + @media (max-width: 800px) { h1 { font-size: 18px !important; } @@ -307,8 +330,7 @@ ul.task-list { } .search-button { - - @media(max-width: 800px) { + @media (max-width: 800px) { min-width: 36px; margin: 10px 25px 10px 25px; } @@ -317,7 +339,7 @@ ul.task-list { .search-text { display: flex; justify-content: center; - @media(max-width: 800px){ + @media (max-width: 800px) { display: none; } } @@ -325,7 +347,7 @@ ul.task-list { .notelink { padding: 5px 0 5px 25px; - a{ + a { &:hover { text-decoration: underline !important; } @@ -361,10 +383,9 @@ ul.task-list { right: 0; left: 0; bottom: 0; - z-index: 5 + z-index: 5; } - .search-container { background-color: rgba(0, 0, 0, 0.5); position: fixed; @@ -400,7 +421,6 @@ ul.task-list { font-size: 2rem; background-color: var(--background-primary); color: var(--text-primary); - } .search-box input:focus { @@ -425,7 +445,7 @@ ul.task-list { font-size: 1.2rem; cursor: pointer; - &.active{ + &.active { border: 2px solid var(--text-accent); } } @@ -459,25 +479,21 @@ ul.task-list { border: 1px solid var(--text-normal); cursor: pointer; - >span { + > span { padding: 3px 3px 3px 10px; } - >i { + > i { margin-left: 10px; } &:hover { border: 1px solid var(--text-accent); } - - } - - .search-keys { - @media(max-width: 800px) { + @media (max-width: 800px) { display: none; } } @@ -487,12 +503,12 @@ ul.task-list { .callout-icon, .callout-fold, .callout-content { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } -.callout-fold{ - cursor: pointer; +.callout-fold { + cursor: pointer; } .callout-title { @@ -501,10 +517,10 @@ ul.task-list { } .callout { - font-family: "Roboto", sans-serif; - word-wrap: break-word; - display: block; - font-size: 1rem; + font-family: "Roboto", sans-serif; + word-wrap: break-word; + display: block; + font-size: 1rem; } .callout.is-collapsed { @@ -524,13 +540,11 @@ ul.task-list { .referred { border: 1px dashed; border-color: var(--text-accent); - padding: 10px; + padding: 10px; margin-left: -10px; - margin-right: -10px; + margin-right: -10px; } - - // Graph Controls .graph-title-container { position: relative; @@ -540,15 +554,20 @@ ul.task-list { position: fixed; top: 50%; left: 50%; - height: 60vh; - width: 60vw; - min-height: 400px; - min-width: 400px; + height: calc(100vmin - 100px); + width: calc(100vmin - 100px); + min-height: 350px; + min-width: 350px; transform: translate(-50%, -50%); z-index: 9999; display: none; background-color: var(--background-secondary); + #full-graph-container { + width: 100%; + height: 100%; + } + #full-graph-close { position: absolute; top: 10px; @@ -580,12 +599,16 @@ ul.task-list { color: var(--text-accent); z-index: 9; + i { + cursor: pointer; + } + .depth-control { display: flex; flex-direction: row; align-items: flex-start; gap: 7px; - + .slider { datalist { display: flex; @@ -616,7 +639,7 @@ ul.task-list { } } -input[type=range]::-webkit-slider-thumb { - -webkit-appearance: none; - margin-top: -10px; +input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + margin-top: -10px; } From 2e24548a718796c6f8e2873f8c32b41f7da97e9f Mon Sep 17 00:00:00 2001 From: Utsob Roy Date: Tue, 14 Feb 2023 15:38:12 +0600 Subject: [PATCH 07/11] graph enhancements --- src/site/styles/digital-garden-base.scss | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/site/styles/digital-garden-base.scss b/src/site/styles/digital-garden-base.scss index 7146b10..74aaaef 100644 --- a/src/site/styles/digital-garden-base.scss +++ b/src/site/styles/digital-garden-base.scss @@ -64,11 +64,11 @@ ul.task-list { .graph { width: 320px; - height: 320px; + min-height: 320px; #link-graph { - width: 100%; - height: 100%; + width: 320px; + height: 320px; } } .graph-fs { @@ -79,11 +79,16 @@ ul.task-list { width: calc(100vmin - 100px); min-height: 350px; min-width: 350px; - transform: translate(-50%, -50%); + transform: translate(-112%, -58%); z-index: 9999; - display: none; + display: block; background-color: var(--background-secondary); + #link-graph { + width: 100%; + height: 100%; + } + .graph-title { display: none; } From f0e8eeb569b40d1da542994870c2be7cce05e239 Mon Sep 17 00:00:00 2001 From: Utsob Roy Date: Tue, 14 Feb 2023 15:41:55 +0600 Subject: [PATCH 08/11] css fix --- src/site/styles/digital-garden-base.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/site/styles/digital-garden-base.scss b/src/site/styles/digital-garden-base.scss index 74aaaef..09c2d8e 100644 --- a/src/site/styles/digital-garden-base.scss +++ b/src/site/styles/digital-garden-base.scss @@ -239,6 +239,12 @@ ul.task-list { border-radius: 0; border-top: 2px solid var(--background-secondary); justify-content: space-between; + + @media (max-width: 1400px) { + .graph-fs { + transform: translate(-50%, -50%); + } + } } .sidebar-container { From a32574db4868f054c32818b1f6b309a7f65ba042 Mon Sep 17 00:00:00 2001 From: Utsob Roy Date: Tue, 14 Feb 2023 15:48:34 +0600 Subject: [PATCH 09/11] css fix --- src/site/styles/digital-garden-base.scss | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/src/site/styles/digital-garden-base.scss b/src/site/styles/digital-garden-base.scss index 09c2d8e..c0e3def 100644 --- a/src/site/styles/digital-garden-base.scss +++ b/src/site/styles/digital-garden-base.scss @@ -53,8 +53,7 @@ ul.task-list { .sidebar { position: fixed; - top: 50%; - transform: translateY(calc(-50% + 75px)); + top: 75px; right: 0; height: 100%; min-width: 25px; @@ -79,7 +78,7 @@ ul.task-list { width: calc(100vmin - 100px); min-height: 350px; min-width: 350px; - transform: translate(-112%, -58%); + transform: translate(-50%, -50%); z-index: 9999; display: block; background-color: var(--background-secondary); @@ -239,12 +238,6 @@ ul.task-list { border-radius: 0; border-top: 2px solid var(--background-secondary); justify-content: space-between; - - @media (max-width: 1400px) { - .graph-fs { - transform: translate(-50%, -50%); - } - } } .sidebar-container { From 34b9b34775d28756733d4b1e6716d61282aae097 Mon Sep 17 00:00:00 2001 From: Utsob Roy Date: Tue, 14 Feb 2023 16:01:41 +0600 Subject: [PATCH 10/11] graph fixes --- src/site/_includes/components/graphScript.njk | 26 ++++++++++++------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/src/site/_includes/components/graphScript.njk b/src/site/_includes/components/graphScript.njk index 055e732..cb20e7d 100644 --- a/src/site/_includes/components/graphScript.njk +++ b/src/site/_includes/components/graphScript.njk @@ -145,18 +145,21 @@ } fetchGraphData(); - window.document.getElementById('graph-depth').value = window.maxGraphDepth; - window.document.getElementById('depth-display').innerText = window.maxGraphDepth; - window.document.getElementById('graph-depth').addEventListener('input', (evt) => { - - window.maxGraphDepth = evt.target.value; - window.document.getElementById('depth-display').innerText = window.maxGraphDepth; + window.document.getElementById('graph-depth').value = window.maxGraphDepth; + window.document.getElementById('depth-display').innerText = window.maxGraphDepth; + window.document.getElementById('graph-depth').addEventListener('input', (evt) => { + + window.maxGraphDepth = evt.target.value; + window.document.getElementById('depth-display').innerText = window.maxGraphDepth; if (Graph != null) { Graph._destructor(); Graph = null; } - renderGraph(filterToDepth(JSON.parse(JSON.stringify(window.graphData))), "link-graph", 1); - }) + Graph = renderGraph(filterToDepth(JSON.parse(JSON.stringify(window.graphData))), "link-graph", 1); + setTimeout(() => { + Graph.zoomToFit(5, 75); + }, 1); + }); window.fullGraph = null; function renderFullGraph() { @@ -186,11 +189,14 @@ const el = document.querySelector('.graph'); if (el.classList.contains('graph-fs')) { el.classList.remove('graph-fs'); - Graph.width(el.offsetWidth).height(el.offsetHeight); + Graph.width(el.offsetWidth).height(el.offsetWidth); } else { el.classList.add('graph-fs'); - Graph.width(el.offsetWidth).height(el.offsetHeight); + Graph.width(el.offsetWidth).height(el.offsetWidth); } + setTimeout(() => { + Graph.zoomToFit(5, 75); + }, 1); }); From 700ca73c9b7f528ffb833200532b7dc4f9b91b8d Mon Sep 17 00:00:00 2001 From: Ole Eskild Steensen Date: Tue, 14 Feb 2023 16:59:54 +0100 Subject: [PATCH 11/11] Some graph style enhancements --- src/site/_includes/components/graphScript.njk | 2 +- .../_includes/components/searchScript.njk | 2 +- src/site/styles/digital-garden-base.scss | 20 ++++++++++++++++--- 3 files changed, 19 insertions(+), 5 deletions(-) diff --git a/src/site/_includes/components/graphScript.njk b/src/site/_includes/components/graphScript.njk index cb20e7d..33072a3 100644 --- a/src/site/_includes/components/graphScript.njk +++ b/src/site/_includes/components/graphScript.njk @@ -57,7 +57,7 @@ const highlightNodes = new Set(); let hoverNode = null; const color = getCssVar("--text-accent"); - const mutedColor = getCssVar("--text-faint"); + const mutedColor = getCssVar("--text-muted"); let Graph = ForceGraph() (el) diff --git a/src/site/_includes/components/searchScript.njk b/src/site/_includes/components/searchScript.njk index ecadf2a..6b70d32 100644 --- a/src/site/_includes/components/searchScript.njk +++ b/src/site/_includes/components/searchScript.njk @@ -227,4 +227,4 @@ resultsHTML += ''; resultsDiv.innerHTML = resultsHTML; } - \ No newline at end of file + diff --git a/src/site/styles/digital-garden-base.scss b/src/site/styles/digital-garden-base.scss index c0e3def..c931009 100644 --- a/src/site/styles/digital-garden-base.scss +++ b/src/site/styles/digital-garden-base.scss @@ -69,6 +69,10 @@ ul.task-list { width: 320px; height: 320px; } + + #graph-fs-btn { + margin-right: 10px; + } } .graph-fs { position: fixed; @@ -82,12 +86,19 @@ ul.task-list { z-index: 9999; display: block; background-color: var(--background-secondary); + border: 1px solid var(--text-accent); + border-radius: 5px; + padding-top: 5px; #link-graph { width: 100%; height: 100%; } + #graph-controls{ + margin-top: 10px; + } + .graph-title { display: none; } @@ -203,7 +214,7 @@ ul.task-list { .graph-title-container { display: flex; justify-content: flex-end; - width: 320px; + width: 100%; } .graph-title { @@ -566,6 +577,8 @@ ul.task-list { z-index: 9999; display: none; background-color: var(--background-secondary); + border: 1px solid var(--text-accent); + border-radius: 5px; #full-graph-container { width: 100%; @@ -605,6 +618,7 @@ ul.task-list { i { cursor: pointer; + padding-right: 10px; } .depth-control { @@ -631,8 +645,8 @@ ul.task-list { #depth-display { background-color: var(--text-accent); color: white; - width: 1rem; - height: 1rem; + width: 1.3rem; + height: 1.3rem; font-size: 0.8rem; display: flex; justify-content: center;