From 9429426ded208ca0265c57f4858c298955423c0b Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Fri, 2 Oct 2020 11:22:07 +1000 Subject: [PATCH] #124 tweak: sticky table/list rows. --- CHANGELOG.md | 1 + TWEAKS.md | 26 +++++++++++++++++++++++++- 2 files changed, 26 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 93b1947..7c7eab4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,6 +22,7 @@ a flexibility update. - bugfix: night shift checks every interaction, will respond to system changes without any manual changes. - bugfix: toc blocks can have text colours. +- tweak: sticky table/list rows. - extension: "material ocean" = an oceanic colour palette. ### v0.9.1 (2020-09-26) diff --git a/TWEAKS.md b/TWEAKS.md index a15d9ed..aba6147 100644 --- a/TWEAKS.md +++ b/TWEAKS.md @@ -70,10 +70,34 @@ then use the 3 dots up in the top-right corner to remove them. +### sticky table/list row + +note: this will make the first row stick to the top of the screen when scrolling down. +to stick a specific row replace `:nth-child(2)` with `[data-block-id="ROW_BLOCK_ID_HERE"]`. + +does not apply to inline databases. + +```css +.notion-collection_view_page-block + .notion-page-block.notion-collection-item:nth-child(2) { + background: var(--theme--main); + z-index: 10; + position: sticky; + top: 0; +} +.notion-table-view + .notion-collection_view_page-block + .notion-page-block.notion-collection-item:nth-child(2) { + top: 32px; +} +``` + +![image](https://user-images.githubusercontent.com/16874139/94878420-a1c12400-04a0-11eb-8e74-2f01e2e696cd.png) + ### table columns below 100px **not recommended!** this may cause buggy viewing. -as it is a per-table-column style, unlike all others here, it must be prepended with the block ID and repeated for each column. +as it is a per-table-column style, unlike most others here, it must be prepended with the block ID and repeated for each column. to see how to do this, watch [this video](https://www.youtube.com/watch?v=6V7eqShm_4w).