Details improvements

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

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;
@@ -1013,37 +1015,40 @@ 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: var(--spacing-300);
 
-        &:first-child a {
+        & td:first-of-type {
+            flex: 25 0 0;
+            min-width: var(--api-docs-first-column-min-width);
             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: var(--api-docs-second-column-min-width);
         }
     }
 
-    & 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 {
         > div {
             display: flex;
             flex-direction: row-reverse;
             justify-content: flex-start;
-            align-items: center;
+            align-items: flex-start;
 
             & p.fsdocs-summary {
                 margin: 0;
@@ -1061,12 +1066,17 @@ 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: var(--spacing-300);
 
             > .fsdocs-summary {
                 display: flex;
-                align-items: center;
                 flex-direction: row-reverse;
+                justify-content: flex-start;
+                align-items: flex-start;
 
                 & p.fsdocs-summary {
                     margin: 0;
@@ -1080,23 +1090,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 +1112,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;
-            }
-        }
     }
 }
 

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 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'});
+    }
 }
 
+scrollToAndExpandSelectedMember();
+addEventListener('hashchange', scrollToAndExpandSelectedMember);
+
 if(location.pathname.startsWith('/reference/')) {
     // Scroll to API Reference header
     const navHeaders = document.querySelectorAll(".nav-header");