Toc as the sidebar

Features
1

Although toc has already been supported, I really hope there is a floating toc, which will facilitate the search and switch of notes.

14 Likes
2

+1 I need this feature as well, maybe an option to show or hide the floating toc for people who don’t need it.

3

Laurent worked on something like that - before we added the toc plugin.

Here’s the relevant commit. Maybe this can be used as a starting point. A floating toc sounds like a nice feature.

2 Likes
4

Thanks, looking forward to this feature!

5

I don’t think that Laurent is still working on it, so somebody else would have to give it a go.

6

Another way would be a dropdown TOC ( navigation bar). A full floating TOC can be too long.

3 Likes
7

I really like this idea.

8

At this moment I've set this css:

nav.table-of-contents ul {
	top: 0;
    right: 0;
    position: fixed;
    z-index: 99;
    background: white;
    padding: 30px;
}

That's better than nothing :slight_smile:

Peek 2020-05-26 15-21
Peek 2020-05-26 15-211279Ă—1101 2.18 MB

11 Likes
9

Hi,

thank you, it's very useful.
What rule can be used to prevent the TOC from hiding the text of the note?
I'm not familiar with CSS so I can't find it.

10

I’ve made these changes:

@media all and (min-width: 920px) {
	nav.table-of-contents ul {
	top: 0;
    right: 0;
    position: fixed;
    z-index: 99;
    background: white;
    padding: 30px;
    box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.33);
    border-radius: 2px;
    max-width: 15%;
}

	#rendered-md {
		width: 85%;
	}
}

Now exported note in pdf doesn’t show floating toc and also text doesn’t gets hidden behind it.

5 Likes
11

Just out of curiosity. is this information saved in the userstyle.css or in the userchrome.css.
Have you done something more than exit Joplin and restart?

Is there any other CSS in the file?

I have tried in both files on Windows and have seen no difference…

12

I’ve saved it in userstyle.css. Just save, restart joplin and voila!.

2 Likes
13

This is awesome! Didn't know I needed it, and now can't live without it. :slight_smile: Thanks for sharing.

I made a few more tweaks, including truncating long titles, shrinking the font size, and removing the bullets.

nav.table-of-contents>ul {
    top: 0;
    right: 0;
    position: fixed;
    z-index: var(--z-toc);
    background: var(--dark-grey);
    padding: var(--base-size-13);
    border-radius: var(--base-size-4);
    max-width: 15%;
    font-size: var(--base-size-13);
}

nav.table-of-contents ul {
    list-style-type: none
}

nav.table-of-contents li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

nav.table-of-contents li a {
    padding: 0;
}

#rendered-md {
    width: 75%;
}
``
3 Likes
14

you can add

overflow:auto;
height: 100%;

if your TOC is long to be able to scroll

3 Likes
15

Here is my take on it:

/* TOC */ 

nav.table-of-contents>ul {
	background: var(--Sidebar-background);
	font-size: 11px;
	text-transform: uppercase !important;
	padding: 10px;
	margin: 0px;
	margin-bottom: 50px;
}

nav.table-of-contents ul {
    list-style-type: none
}

nav.table-of-contents li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

nav.table-of-contents li a {
    padding: 0;
}

@media all and (min-width: 920px) {
	nav.table-of-contents>ul {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 99;
		margin-right: 10px;
		border-radius: 4px;
		max-width: 15%;
		overflow:auto;
		height: 100%;
	}

	#rendered-md {
   	width: 82%;
	}
}

It renders as a colored block on top of the note contents (with a margin from them) when the editor is visible, and it renders as a full height fixed block with its own scroll bar (with a margin to the right so it doesn’t hide the note’s scroll bar) when the editor is hidden.

3 Likes
16

brilliant, anyone know if it's possible to ignore items on the TOC....say I want a page header, then the TOC to pickup all the other headings?

My cool article

  • sub 1
  • sub 2

sub 1

sub 2

17

I’m not sure what tou want but maybe if you use

$<toc{"level":[2,3],"listType":"ul"}>

this is it ?

18

If you want to hide the H1 / # top header, you can target it with:

nav.table-of-contents>ul>li>a{
display:none
}

If you only wanted to hide the H1 at the top of the page, I think you could do it with a :first-child

19

Cool, I like the responsive idea! Iterated on mine, treating it a little more like a “minimap” in an IDE.

nav.table-of-contents>ul {
    top: 0;
    right: 0;
    position: fixed;
    z-index: var(--z-toc);
    background: var(--dark-grey);
    padding: var(--base-size-8);
    border-radius: var(--base-size-4);
    max-width: 15%;
    font-size: var(--base-size-10);
    max-height: var(--base-size-272);
    overflow: scroll;
    opacity: 0.6;
}

nav.table-of-contents ul {
    list-style-type: none;
    margin-left: var(--base-size-4);
}

nav.table-of-contents li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0;
}

nav.table-of-contents li a {
    padding: 0;
}

@media all and (min-width: 920px) {
    nav.table-of-contents>ul {
        height: 100%;
        max-height: 100%;
    }

    #rendered-md {
        width: 75%;
    }
}

narrow
narrow1024Ă—814 105 KB
wide
wide1024Ă—818 49.9 KB

5 Likes
20

Really you can use the level of toc to specify which header you want. It’s really nice dev