Skip to content

Commit ee32ee7

Browse files
committed
TOC and style improvements
1 parent b7bbfdb commit ee32ee7

File tree

3 files changed

+23
-10
lines changed

3 files changed

+23
-10
lines changed

app/app.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
$family-primary: 'Helvetica Neue', 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, sans-serif;
22
$super-color: #ffca29;
3+
$link-color: #00d1b2;
4+
$link-hover: darken($link-color, 0.5);
5+
36
@import '~bulma/bulma.sass';
47

58
.input {

app/components/Reader/Reader.scss

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ $toc-menu-width: 300px;
44

55
.reader__container {
66
background-color: #fcfcfc;
7+
padding: 25px;
78
}
89

910
.reader__controls {
@@ -18,12 +19,10 @@ $toc-menu-width: 300px;
1819
.reader__toc {
1920
background-color: $dark-gray;
2021
color: #fff;
21-
display: flex;
22-
flex-direction: column;
2322
height: 100vh;
24-
justify-content: center;
2523
-webkit-overflow-scrolling: touch;
2624
overflow-y: auto;
25+
padding: $base-spacing $small-spacing;
2726
position: fixed;
2827
top: 0;
2928
left: 0;
@@ -35,4 +34,9 @@ $toc-menu-width: 300px;
3534
z-index: 600;
3635

3736
&.is-visible { transform: translateX(0%); }
37+
38+
&__item {
39+
a {}
40+
a:hover { color: #fff; }
41+
}
3842
}

app/components/Reader/index.js

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -37,17 +37,23 @@ class Reader extends Component {
3737
return (
3838
<div className="reader__container">
3939
<div id="toc-nav" className="reader__toc">
40-
<div>
40+
<ul>
41+
<h2>Table of Contents</h2>
4142
{
4243
this.state.nav.map((item, index) =>
43-
<a key={`navitem_${index}`}
44-
className="nav-item"
45-
onClick={() => { this._onNavClick(item) }}>
46-
{item.label}
47-
</a>
44+
<li>
45+
<a key={`navitem_${index}`}
46+
className="reader__toc__item"
47+
onClick={() => {
48+
this._onNavClick(item)
49+
this.tocToggle()
50+
}}>
51+
{item.label}
52+
</a>
53+
</li>
4854
)
4955
}
50-
</div>
56+
</ul>
5157
</div>
5258
<nav className="nav is-fixed">
5359
<div className="nav-left">

0 commit comments

Comments
 (0)