Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[toc2] make toc entries collapsible #1031

Merged
merged 17 commits into from
Aug 19, 2017
Merged

[toc2] make toc entries collapsible #1031

Changes from 1 commit
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
591585b
[toc2] allow collapsing toc items in the sidebar
jcb91 Jul 22, 2017
76f78df
[toc2] simplify toc link generation, allowing collapsing toc cell links
jcb91 Jul 23, 2017
c7551b6
[toc2] adjust styling to suit saving as html
jcb91 Jul 23, 2017
a4aa82f
[toc2] adjust section collapser callback to keep cell & sidebar in sync
jcb91 Jul 23, 2017
599e92c
[toc2] remove redundant css classes from toc2.tpl
jcb91 Jul 24, 2017
3d5c84f
[toc2, collapsible_headings] optional sync of collapsed sections
jcb91 Jul 27, 2017
5fe9cb2
[toc2] Only add collapse controls to items with descendants
jfbercher Aug 7, 2017
1b6d917
[toc2] un-nest collapse_by_id & callback_collapser function definitions
jfbercher Aug 7, 2017
ba2678f
[toc2] Take collapse_to_match_collapsible_headings parameter from sys…
jfbercher Aug 7, 2017
79d4d03
[toc2] Enable full highlight of heading line instead of solely the link
jfbercher Aug 7, 2017
1e93d59
Merge branch 'ttoc' into master
jcb91 Aug 15, 2017
1bd906b
[toc2] Change .click() to scollIntoView for follwing links to target …
jfbercher Aug 16, 2017
cb63154
[toc2] Updated README with last contributions
jfbercher Aug 16, 2017
84bf6f9
[toc2] Updated template to include font-awesome (firefox issue)
jfbercher Aug 16, 2017
8b79b91
[toc2] Updated (again) to enable full highlight of toc items
jfbercher Aug 16, 2017
de7293d
[toc2] Updated to take into account @jcb91 review
jfbercher Aug 16, 2017
973643e
Merge branch 'master' into ttoc
jfbercher Aug 19, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 19 additions & 6 deletions src/jupyter_contrib_nbextensions/nbextensions/toc2/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,18 @@
/*background color for links when you mouse over it
This style is used on export, but can be overwritted in the livenotebook
by selecting a color in the nbextension-configurator*/
#toc-wrapper li > span:hover {



#toc-wrapper ul li span:hover {
Copy link
Member Author

@jcb91 jcb91 Aug 16, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think, this isn't needed li span is sufficient & more efficient, since every li is in a ul anyway, while the > prevents nested child spans from being selected (fewer css redraws, more efficient, hopefully)

background-color: #DAA520;
}

#toc-level0 a {
/*color: #333333;*/ /* now specified in js */
text-decoration: none;
}
#navigate_menu li > span:hover {background-color: #f1f1f1}
#navigate_menu ul li span:hover {background-color: #f1f1f1}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

see above

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok corrected



/* Move menus and tooolbar to the left, following @Kevin-McIsaac suggestion
Expand All @@ -38,13 +41,13 @@ padding-left: 20px;
}

#navigate_menu li {
padding-left: 2px;
padding-left: 0px;
clear: both;
list-style-type: none;
}

#navigate_menu-level0 {padding-left: 10px;}
#navigate_menu-level0 ul {padding-left: 10px;}
#navigate_menu-level0 {padding-left: 0px;}
#navigate_menu-level0 ul {padding-left: 0px;}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not familiar with any of the navigate_menu stuff (haven't had it enabled), but now that I've tried it, it seems a bit weird, and is coming out resizable. Perhaps it deserves altering to make it look like all the other notebook menus?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

although, any such modification should probably go into another, separate PR 😅

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes!



.toc {
Expand All @@ -69,6 +72,7 @@ padding-left: 20px;

.toc ul.toc-item {
list-style-type: none;
display: block;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is redundant, display is block anyway

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok

padding: 0;
margin: 0;
}
Expand Down Expand Up @@ -145,9 +149,18 @@ padding-left: 20px;

/* don't waste so much screen space... */

.toc .toc-item .toc-item {
/*.toc .toc-item .toc-item {
padding-left: 1em;
}
*/
.toc-item ul, li { margin:0; padding:0 }
.toc-item li > span { display:block }
.toc-item li > span { padding-left:0em }
.toc-item li li > span { padding-left:1em }
.toc-item li li li > span { padding-left:2em }
.toc-item li li li li > span { padding-left:3em }
.toc-item li li li li li > span { padding-left:4em }
.toc-item li li li li li li > span { padding-left:5em }
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are we adding extra padding, and why separately for various nesting levels?! If desired (is the regular indenting not sufficient?), could this not be handled by adjusting the ul's padding?

Also note that this has set margin & padding for all li elements to 0 - I guess that was unintentional, and should have been .toc-item li?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wanted to highlight the entire line containning the section item on hover.
I used the answer here and here. There might be a better way to do it but didn't figured it.

  • ok for .toc-item li

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks!


.toc-item-num {
font-style: normal;
Expand Down