[Uptd 3/23]Section outline (TOC) 7 improvements

Suggestion Box
1

Thanks Coda team.

Finally, Coda has “Table of content.” and it works so good.

I like Bold Head 1 and small margin as default . So I don’t need tweak it again.

and then I tweak my style about 7 improvements with Stylus (Chrome extension)

If Coda team will improve TOC with my style ,I appreciate it.

Of course , Hope design better style than mine.

1. Add “Bullet” before Head 2 and Head 3 for more clearly and quickly find hierarchies.

Issue: You can’t quickly and clearly find the hierarchies.

Solid bullet is for Head 2
Empty bullet is for Head 3

image

2. Hide scrollbar in TOC for looks clean.

Issue : Scrollbar is not useful and didn’t looks clean.

image
image266×548 7.37 KB
vs
image
image308×534 8.09 KB

3. Hover show and wrap Long Head Text with background

Issue : You can’t see the long Head text.

YRe8JtWoKu

4. Show the whole TOC area

Issue: you have to scroll toc again

image
image422×525 50.5 KB

image
image955×347 30.6 KB

Show the whole TOC area , So don’t need to scroll TOC again , bcz the TOC is not automatic scrolling when scroll up and scroll down document.

5. Small faded black color TOC Head 123

issue : Head 2 and Head 3 are the same color.
Solution: Use faded color for looks clear.
image

6 Bold and wrap text of active Head

issue :

1 . you have to hover active head for check the complete head text .

Idea: no need to hover ,and display active head text.

2. Not very obvious for looking active head text .

image
image

Q: But how margin wrap text ?

image

7. Hover display TOC

So no need option for TOC. Always hover display toc as default .

B07PMRZMSA

Stylus Code

  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/** 
Author: Steve yang
Created: 2020-3-20 
Updated: 3-23-2020
**/
/** 
It works light theme, don't works darker theme.
it works all Docs and sections toc.
**/
/** Add Bullet before Head 2 and 3**/
.KVwXaPVf:before {
	content: "\2022";
	margin-right: 6px;
}

._2bxE2JJg:before {
	content: "\00ba";
	margin-right: 6px;
}

/** Hide toc scrollbar**/
.kr-section-outline {
	--webkit-scrollbar-width-height: 0px;
}

/** Toc position**/
.kr-section-outline {
	will-change: top;
	transition: top .2s ease .2s;
	min-width: 280px;
	max-width: 480px;
	font-size: 12px;
	right: 0px;
	left: auto;
}

/* Hover show and wrap long text in TOC*/
._17Z50j2I {
	height: auto;
	font-size: 1.1rem;
	line-height: 1.9;
	font-family: 'Noto Sans', sans-serif;
}

._17Z50j2I:hover {
	background-color: rgba(180, 179, 179, .14);
	color: #1b94a2;
	overflow: visible;
	white-space: normal;
}

/** show the whole toc **/
._152mdk3C {
	max-height: 100vh;
}


/** Faded Toc Head 123**/
/** Toc Head 1, Bold Head 1 is default in Coda**/
._1Yre37ZT {
	color: rgb(100, 100, 100);
}

/** Toc Head 2 **/
.KVwXaPVf {
	color: rgb(10, 10, 10);
}

/** Toc Head 3 **/
._2bxE2JJg {
	color: rgb(130, 130, 130);
}


/** Active Toc Head color , bold and wrap text**/
.OdAyFSZP {
	color: #1b94a2;
	font-weight: var(--font-weight-bold);
}

/** Hover show TOC **/
._152mdk3C {
	opacity: 1;
}
._152mdk3C:hover {
	opacity: 1;
}

In this case ,you’ll know what is design .

Design is not only looks like , design is how it woks.

6 Likes