Skip to content

Commit e786e41

Browse files
disberddisberd
authored
Merge pull request #45 from disberd/fix_toc
2 parents 8575360 + 5dd5853 commit e786e41

6 files changed

Lines changed: 1142 additions & 1054 deletions

File tree

‎Project.toml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
name = "PlutoExtras"
22
uuid = "ed5d0301-4775-4676-b788-cf71e66ff8ed"
33
authors = ["Alberto Mengali <disberd@gmail.com>"]
4-
version = "0.7.15"
4+
version = "0.7.16-DEV"
55

66
[deps]
77
AbstractPlutoDingetjes = "6e696c72-6542-2067-7265-42206c756150"

‎src/extended_toc.css‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
/* Extended Table of Contents CSS Styles */
2+
3+
/* ==========================================================================
4+
Header Styles
5+
========================================================================== */
6+
7+
.plutoui-toc header {
8+
cursor: pointer;
9+
}
10+
11+
span.toc-header-container {
12+
position: fixed;
13+
display: none;
14+
--size: 25px;
15+
height: calc(51px - 1rem);
16+
flex-direction: row-reverse;
17+
right: calc(1rem + min(80vh, 300px));
18+
}
19+
20+
.toc-header-icon {
21+
margin-right: 0.3rem;
22+
align-self: stretch;
23+
display: inline-block;
24+
width: var(--size);
25+
background-size: var(--size) var(--size);
26+
background-repeat: no-repeat;
27+
background-position: center;
28+
filter: var(--image-filters);
29+
cursor: pointer;
30+
}
31+
32+
.toc-header-filler {
33+
margin: .25rem;
34+
}
35+
36+
header:hover span.toc-header-container,
37+
span.toc-header-container:hover {
38+
display: flex;
39+
}
40+
41+
.toc-header-hide {
42+
background-image: url(https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.5.1/src/svg/eye-outline.svg);
43+
opacity: 50%;
44+
--size: 1em;
45+
}
46+
47+
.toc-header-save {
48+
background-image: url(https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.5.1/src/svg/save-outline.svg);
49+
opacity: 50%;
50+
}
51+
52+
nav:not(.file-state-differs) .toc-header-save {
53+
display: none;
54+
}
55+
56+
pluto-notebook[hide-enabled] span.toc-header-hide {
57+
background-image: url(https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.5.1/src/svg/eye-off-outline.svg);
58+
}
59+
60+
/* ==========================================================================
61+
Table of Contents Row Styles
62+
========================================================================== */
63+
64+
span.toc-hide-container {
65+
--width: min(80vw, 300px);
66+
position: fixed;
67+
display: flex;
68+
right: calc(var(--width) + 1rem + 22px - 100px);
69+
height: var(--height);
70+
width: 100px;
71+
z-index: -1;
72+
}
73+
74+
span.toc-hide {
75+
visibility: hidden;
76+
opacity: 50%;
77+
background-image: url(https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.5.1/src/svg/eye-outline.svg);
78+
cursor: pointer;
79+
}
80+
81+
div.toc-row.hidden span.toc-hide {
82+
background-image: url(https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.5.1/src/svg/eye-off-outline.svg);
83+
}
84+
85+
span.toc-hide-container:hover > .toc-hide,
86+
div.toc-row:hover .toc-hide {
87+
visibility: visible;
88+
}
89+
90+
div.toc-row a {
91+
display: flex;
92+
}
93+
94+
span.toc-icon {
95+
--size: 17px;
96+
display: block;
97+
align-self: stretch;
98+
background-size: var(--size) var(--size);
99+
background-repeat: no-repeat;
100+
background-position: center;
101+
width: var(--size);
102+
filter: var(--image-filters);
103+
}
104+
105+
span.toc-collapse {
106+
background-image: url(https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.5.1/src/svg/chevron-down.svg);
107+
margin-right: 3px;
108+
min-width: var(--size);
109+
}
110+
111+
.plutoui-toc section div.toc-row.collapsed span.toc-collapse {
112+
background-image: url(https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.5.1/src/svg/chevron-forward.svg);
113+
}
114+
115+
.plutoui-toc section div.toc-row a span.toc-collapse.no-children {
116+
background-image: none;
117+
}
118+
119+
div.toc-row.parent-hidden {
120+
text-decoration: underline dotted .5px;
121+
text-underline-offset: 2px;
122+
}
123+
124+
div.toc-row.hidden {
125+
text-decoration: underline dashed 1px;
126+
text-underline-offset: 2px;
127+
}
128+
129+
.plutoui-toc div.parent-collapsed {
130+
display: none;
131+
}
132+
133+
pluto-notebook[hide-enabled] div.toc-row.hidden,
134+
pluto-notebook[hide-enabled] div.toc-row.parent-hidden {
135+
display: none;
136+
}
137+
138+
.drag_enabled .toc-row.dragged {
139+
border: 2px dashed grey;
140+
}
141+
142+
/* ==========================================================================
143+
Row Separator Styles
144+
========================================================================== */
145+
146+
div.toc-row-separator {
147+
height: 2px;
148+
margin: 3px 0px;
149+
background: #aaa;
150+
display: none;
151+
}
152+
153+
div.toc-row-separator.active {
154+
display: block;
155+
}
156+
157+
div.toc-row-separator.active.noshow {
158+
display: none;
159+
}
160+
161+
/* ==========================================================================
162+
Always Show Output Styles
163+
========================================================================== */
164+
165+
/* This style permits to have a cell whose output is still being shown when
166+
the cell is hidden. This is useful for having hidden cells that still are
167+
sending HTML as output (like ToC and BondTable) */
168+
169+
pluto-notebook[hide-enabled] pluto-cell[always-show-output] {
170+
display: block !important;
171+
}
172+
173+
pluto-notebook[hide-enabled] pluto-cell[always-show-output]:not(.code_differs) > pluto-input,
174+
pluto-notebook[hide-enabled] pluto-cell[always-show-output]:not(.code_differs) > pluto-shoulder,
175+
pluto-notebook[hide-enabled] pluto-cell[always-show-output]:not(.code_differs) > pluto-trafficlight,
176+
pluto-notebook[hide-enabled] pluto-cell[always-show-output]:not(.code_differs) > pluto-runarea,
177+
pluto-notebook[hide-enabled] pluto-cell[always-show-output]:not(.code_differs) > button {
178+
display: none;
179+
}
180+
181+
pluto-notebook[hide-enabled] pluto-cell[always-show-output]:not(.code_differs) {
182+
margin-top: 0px;
183+
}

0 commit comments

Comments
 (0)