From 70d8dacc10eacbc7b93ebfa91c7893cac058d7cc Mon Sep 17 00:00:00 2001 From: Brian Rourke Boll Date: Fri, 24 May 2024 12:35:28 -0400 Subject: [PATCH 1/7] Expand details of selected member --- docs/content/fsdocs-theme.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/docs/content/fsdocs-theme.js b/docs/content/fsdocs-theme.js index 9ea6b3f7d..220a6472d 100644 --- a/docs/content/fsdocs-theme.js +++ b/docs/content/fsdocs-theme.js @@ -12,11 +12,18 @@ if (activeItem && mainMenu) { scrollToActiveItem(activeItem); } -if(location.hash) { - const header = document.querySelector(`a[href='${location.hash}']`); - header.scrollIntoView({ behavior: 'instant'}); +function scrollToAndExpandSelectedMember() { + if (location.hash) { + const header = document.querySelector(`a[href='${location.hash}']`); + header.scrollIntoView({ behavior: 'instant'}); + const details = document.querySelector(`tr > td.fsdocs-member-usage:has(a[href='${location.hash}']) ~ td.fsdocs-member-xmldoc > details`); + details?.setAttribute('open', 'true'); + } } +scrollToAndExpandSelectedMember(); +addEventListener('hashchange', _event => scrollToAndExpandSelectedMember()); + if(location.pathname.startsWith('/reference/')) { // Scroll to API Reference header const navHeaders = document.querySelectorAll(".nav-header"); From 189f0862113ef520eee3bca75818fa4c4c1b71c1 Mon Sep 17 00:00:00 2001 From: Brian Rourke Boll Date: Fri, 24 May 2024 12:39:01 -0400 Subject: [PATCH 2/7] Touch up details CSS * Keep member name aligned to the top left (i.e., don't shift around when details are expanded). * Put marker back before the summary. * Make the table readable on mobile by wrapping rows when too narrow. --- docs/content/fsdocs-default.css | 68 ++++++++++++--------------------- 1 file changed, 25 insertions(+), 43 deletions(-) diff --git a/docs/content/fsdocs-default.css b/docs/content/fsdocs-default.css index 90df59aa7..1ca4ffbbb 100644 --- a/docs/content/fsdocs-default.css +++ b/docs/content/fsdocs-default.css @@ -1013,29 +1013,32 @@ span[onmouseout] { padding: var(--spacing-400) 0; } - & tbody td { - border-top: 1px solid var(--header-border); - padding: var(--spacing-300) 0; - padding-right: var(--spacing-300); + & tr { + display: flex; + flex-flow: row wrap; + column-gap: 1rem; - &:first-child a { + & td:first-of-type { + flex: 25 0 0; + min-width: 20em; overflow-x: hidden; text-overflow: ellipsis; - width: 100%; - display: block; + overflow-wrap: break-word; + + & p { + margin: unset; + } } - &:last-child { - padding-right: 0; + & td:nth-of-type(2) { + flex: 75 0 0; + min-width: 15em; } } - & thead tr td:first-child, & td.fsdocs-entity-name, & td.fsdocs-member-usage { - width: 25%; - - & p { - margin: 0; - } + & tbody td { + border-top: 1px solid var(--header-border); + padding: var(--spacing-300) 0; } .fsdocs-entity-xmldoc { @@ -1061,7 +1064,11 @@ span[onmouseout] { .fsdocs-member-xmldoc { & summary { - list-style: none; + display: list-item; + counter-increment: list-item 0; + list-style: disclosure-closed outside; + cursor: pointer; + margin-left: 1rem; > .fsdocs-summary { display: flex; @@ -1080,23 +1087,15 @@ span[onmouseout] { overflow-x: auto; } } - - &::after { - content: '▶'; - cursor: pointer; - } } & details[open] summary { + list-style-type: disclosure-open; margin-bottom: var(--spacing-200); } - & details[open] summary::after { - content: "▼"; - } - .fsdocs-returns, .fsdocs-params { - margin: var(--spacing-200) 0; + margin: var(--spacing-200); &:first-child { margin-top: 0; @@ -1110,23 +1109,6 @@ span[onmouseout] { .fsdocs-return-name, .fsdocs-param-name { font-weight: 500; } - - /* hide the browser mark and display one after the summary */ - - & ::marker { - display: none; - } - - > div.fsdocs-summary { - display: flex; - flex-direction: row-reverse; - justify-content: space-between; - align-items: center; - - > p { - margin: 0; - } - } } } From f52a6ab3472579443a8256ec9a5015d3e4c1391c Mon Sep 17 00:00:00 2001 From: Brian Rourke Boll Date: Sat, 25 May 2024 11:23:31 -0400 Subject: [PATCH 3/7] Expand details before scrolling --- docs/content/fsdocs-theme.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/content/fsdocs-theme.js b/docs/content/fsdocs-theme.js index 220a6472d..88576ec5f 100644 --- a/docs/content/fsdocs-theme.js +++ b/docs/content/fsdocs-theme.js @@ -14,10 +14,10 @@ if (activeItem && mainMenu) { function scrollToAndExpandSelectedMember() { if (location.hash) { - const header = document.querySelector(`a[href='${location.hash}']`); - header.scrollIntoView({ behavior: 'instant'}); const details = document.querySelector(`tr > td.fsdocs-member-usage:has(a[href='${location.hash}']) ~ td.fsdocs-member-xmldoc > details`); details?.setAttribute('open', 'true'); + const header = document.querySelector(`a[href='${location.hash}']`); + header.scrollIntoView({ behavior: 'instant'}); } } From 38f3121abe93f090cdcc50eb80e1f808e7eec805 Mon Sep 17 00:00:00 2001 From: Brian Rourke Boll Date: Sat, 25 May 2024 11:23:56 -0400 Subject: [PATCH 4/7] Only scroll if we have something to scroll to --- docs/content/fsdocs-theme.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/fsdocs-theme.js b/docs/content/fsdocs-theme.js index 88576ec5f..3cea86828 100644 --- a/docs/content/fsdocs-theme.js +++ b/docs/content/fsdocs-theme.js @@ -17,7 +17,7 @@ function scrollToAndExpandSelectedMember() { const details = document.querySelector(`tr > td.fsdocs-member-usage:has(a[href='${location.hash}']) ~ td.fsdocs-member-xmldoc > details`); details?.setAttribute('open', 'true'); const header = document.querySelector(`a[href='${location.hash}']`); - header.scrollIntoView({ behavior: 'instant'}); + header?.scrollIntoView({ behavior: 'instant'}); } } From 6a8521eef4d1b99df415ade7ddb83663f35a3c49 Mon Sep 17 00:00:00 2001 From: Brian Rourke Boll Date: Sat, 25 May 2024 11:41:49 -0400 Subject: [PATCH 5/7] Align to flex start to match left-hand column * ...I think this looks better, especially when the summary is multiline. --- docs/content/fsdocs-default.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/content/fsdocs-default.css b/docs/content/fsdocs-default.css index 1ca4ffbbb..b2e050c4b 100644 --- a/docs/content/fsdocs-default.css +++ b/docs/content/fsdocs-default.css @@ -1046,7 +1046,7 @@ span[onmouseout] { display: flex; flex-direction: row-reverse; justify-content: flex-start; - align-items: center; + align-items: flex-start; & p.fsdocs-summary { margin: 0; @@ -1072,8 +1072,9 @@ span[onmouseout] { > .fsdocs-summary { display: flex; - align-items: center; flex-direction: row-reverse; + justify-content: flex-start; + align-items: flex-start; & p.fsdocs-summary { margin: 0; From 8a57c4b22c83d96c5719dd135a22719c22109060 Mon Sep 17 00:00:00 2001 From: nojaf Date: Fri, 31 May 2024 08:49:30 +0200 Subject: [PATCH 6/7] Nitpicks --- docs/content/fsdocs-default.css | 10 ++++++---- docs/content/fsdocs-theme.js | 2 +- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/docs/content/fsdocs-default.css b/docs/content/fsdocs-default.css index b2e050c4b..e2063f56f 100644 --- a/docs/content/fsdocs-default.css +++ b/docs/content/fsdocs-default.css @@ -47,6 +47,8 @@ --main-grid-row: 2; --main-grid-column: 2; --dialog-width: 500px; + --api-docs-first-column-min-width: 320px; + --api-docs-second-column-min-width: 240px; /* light theme */ --primary: #1e8bc3; @@ -1016,11 +1018,11 @@ span[onmouseout] { & tr { display: flex; flex-flow: row wrap; - column-gap: 1rem; + column-gap: var(--spacing-300); & td:first-of-type { flex: 25 0 0; - min-width: 20em; + min-width: var(--api-docs-first-column-min-width); overflow-x: hidden; text-overflow: ellipsis; overflow-wrap: break-word; @@ -1032,7 +1034,7 @@ span[onmouseout] { & td:nth-of-type(2) { flex: 75 0 0; - min-width: 15em; + min-width: var(--api-docs-second-column-min-width); } } @@ -1068,7 +1070,7 @@ span[onmouseout] { counter-increment: list-item 0; list-style: disclosure-closed outside; cursor: pointer; - margin-left: 1rem; + margin-left: var(--spacing-300); > .fsdocs-summary { display: flex; diff --git a/docs/content/fsdocs-theme.js b/docs/content/fsdocs-theme.js index 3cea86828..eea7d521f 100644 --- a/docs/content/fsdocs-theme.js +++ b/docs/content/fsdocs-theme.js @@ -22,7 +22,7 @@ function scrollToAndExpandSelectedMember() { } scrollToAndExpandSelectedMember(); -addEventListener('hashchange', _event => scrollToAndExpandSelectedMember()); +addEventListener('hashchange', scrollToAndExpandSelectedMember); if(location.pathname.startsWith('/reference/')) { // Scroll to API Reference header From f3c7326f79365022ac73daa6cc7346166576b45c Mon Sep 17 00:00:00 2001 From: nojaf Date: Fri, 31 May 2024 08:52:36 +0200 Subject: [PATCH 7/7] Add changelog entry --- RELEASE_NOTES.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md index d9d5b281a..fe1e76e63 100644 --- a/RELEASE_NOTES.md +++ b/RELEASE_NOTES.md @@ -1,5 +1,8 @@ # Changelog +## 20.0.1 - 2024-05-31 +* Details improvements. [#917](https://github.com/fsprojects/FSharp.Formatting/pull/917) + ## 20.0.0 - 2024-02-14 Stable release