[PR #570] [MERGED] Add CSS to make top doc box have a fade, rather than hard cutoff #623

New Issue

2025-12-30T01:25:43+01:00

adam commented

2025-12-30 01:25:43 +01:00

📋 Pull Request Information

Original PR: https://github.com/apple/pkl/pull/570
Author: @thomaspurchas
Created: 7/7/2024
Status: ✅ Merged
Merged: 7/8/2024
Merged by: @holzensp

Base: main ← Head: improved-doc-box

📝 Commits (1)

dd6cd05 Add CSS to make top doc box have a fade, rather than hard cutoff

📊 Changes

2 files changed (+28 additions, -0 deletions)

View changed files

📝 pkl-doc/src/main/resources/org/pkl/doc/styles/pkldoc.css (+14 -0)
📝 pkl-doc/src/test/files/DocGeneratorTest/output/styles/pkldoc.css (+14 -0)

📄 Description

The current hard cutoff in the docs often results in people not realising that the doc box can be expanded, and often resulting in confusion because the most helpful examples are often in the module doc box.

This change uses some simple CSS tweaks to replace the hard cut-off with a visualfade, so it's obvious that there's content hidden out of view. Doing this required removing the CSS transition, as it hard to correctly transition the height property of CSS element of unknown target height. But the improved discoverablility of the doc content seems like a worthwhile tradeoff.

Before:

After:

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/apple/pkl/pull/570 **Author:** [@thomaspurchas](https://github.com/thomaspurchas) **Created:** 7/7/2024 **Status:** ✅ Merged **Merged:** 7/8/2024 **Merged by:** [@holzensp](https://github.com/holzensp) **Base:** `main` ← **Head:** `improved-doc-box` --- ### 📝 Commits (1) - [`dd6cd05`](https://github.com/apple/pkl/commit/dd6cd056774c30720bd234af07e930c460ad7da3) Add CSS to make top doc box have a fade, rather than hard cutoff ### 📊 Changes **2 files changed** (+28 additions, -0 deletions) <details> <summary>View changed files</summary> 📝 `pkl-doc/src/main/resources/org/pkl/doc/styles/pkldoc.css` (+14 -0) 📝 `pkl-doc/src/test/files/DocGeneratorTest/output/styles/pkldoc.css` (+14 -0) </details> ### 📄 Description The current hard cutoff in the docs often results in people not realising that the doc box can be expanded, and often resulting in confusion because the most helpful examples are often in the module doc box. This change uses some simple CSS tweaks to replace the hard cut-off with a visualfade, so it's obvious that there's content hidden out of view. Doing this required removing the CSS transition, as it hard to correctly transition the height property of CSS element of unknown target height. But the improved discoverablility of the doc content seems like a worthwhile tradeoff. Before: <img width="1231" alt="image" src="https://github.com/apple/pkl/assets/782311/2e0d60c1-89b8-4fc2-8e4e-ad25a7858512"> After: <img width="1222" alt="image" src="https://github.com/apple/pkl/assets/782311/4d036327-56b4-4ca1-9c73-2ee47cd37263"> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

adam added the pull-request label 2025-12-30 01:25:43 +01:00

adam closed this issue

2025-12-30 01:25:43 +01:00

adam referenced this issue

2025-12-30 01:25:55 +01:00

[PR #623] [MERGED] [docs] Correct the link for `ANTLR 4 Documentation` (404 - page not found). #643

adam referenced this issue

2025-12-30 01:25:58 +01:00

[PR #636] [MERGED] [docs] Cherry pick documentation into 0.26 release branch #653

Sign in to join this conversation.