Add vertical line left of package children in sidebar

Author: felixmulder

doc-tool/resources/_includes/sidebar.html

@@ -8,22 +8,25 @@
     {% endif %}
     {% for pkg in docs %}
         <li class="index-entity entity-package">
-            <a class="entity-name" href="{{ site.baseurl }}/api/{{ pkg.path | join: "/" }}/index.html">{{ pkg.name }}</a>
+            <h1><a class="entity-name" href="{{ site.baseurl }}/api/{{ pkg.path | join: "/" }}/index.html">{{ pkg.name }}</a></h1>
+            <ul class="package-entities">
+                <div id="cover-block"></div>
+            {% for member in pkg.children %}
+                {% if member.kind == "object" and member.hasCompanion %}
+                {% elsif member.kind != "package" %}
+                <li class="{% if member.hasCompanion %} with-companion {% endif %}">
+                    <div class="entity-kinds">
+                        {% if member.hasCompanion %}
+                        <a class="letter-anchor object" href="{{ site.baseurl }}/api/{{ member.companionPath | join: "/" }}.html">O</a>
+                        {% endif %}
+                        <a class="letter-anchor {{ member.kind }}" href="{{ site.baseurl }}/api/{{ member.path | join: "/" }}.html">{{ member.kind | first | capitalize }}</a>
+                    </div>
+                    <a class="entity-name" href="{{ site.baseurl }}/api/{{ member.path | join: "/" }}.html">{{ member.name }}</a>
+                </li>
+                {% endif %}
+            {% endfor %}
+            </ul>
         </li>
-        {% for member in pkg.children %}
-            {% if member.kind == "object" and member.hasCompanion %}
-            {% elsif member.kind != "package" %}
-            <li class="index-entity {% if member.hasCompanion %} with-companion {% endif %}">
-                <div class="entity-kinds">
-                    {% if member.hasCompanion %}
-                    <a class="letter-anchor object" href="{{ site.baseurl }}/api/{{ member.companionPath | join: "/" }}.html">O</a>
-                    {% endif %}
-                    <a class="letter-anchor {{ member.kind }}" href="{{ site.baseurl }}/api/{{ member.path | join: "/" }}.html">{{ member.kind | first | capitalize }}</a>
-                </div>
-                <a class="entity-name" href="{{ site.baseurl }}/api/{{ member.path | join: "/" }}.html">{{ member.name }}</a>
-            </li>
-            {% endif %}
-        {% endfor %}
     {% endfor %}
     </ul>
 </div>

doc-tool/resources/_layouts/api-page.html

@@ -1,6 +1,7 @@
 ---
 layout: main
 extraCSS:
+    - css/sidebar.css
     - css/api-page.css
 ---
 

doc-tool/resources/css/dottydoc.css

@@ -24,16 +24,6 @@ div#content-wrapper div#content-body {
     min-height: 100vh;
 }
 
-div#content-wrapper div.index-wrapper {
-    background-color: #fafafa;
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
-}
-
 /** Animations: Easing for content body slide on toggle  */
 div#content-wrapper,
 div#content-wrapper div#content-body {
@@ -42,41 +32,6 @@ div#content-wrapper div#content-body {
             transition: all .25s ease-out;
 }
 
-/** Mobile (x < 576px) sidebar: Defaults closed with 60% wide sidebar */
-div#content-wrapper {}
-div#content-wrapper div#content-body { left: 0; }
-div#content-wrapper div.index-wrapper { width: 60%; }
-
-div#content-wrapper.toggled {}
-div#content-wrapper.toggled div#content-body { left: 60%; }
-div#content-wrapper.toggled div.index-wrapper {}
-
-/** Tablet (576px <= x < 768px) sidebar: Defaults closed with 250px wide sidebar */
-@media screen and (min-width: 576px) {
-
-    div#content-wrapper {}
-    div#content-wrapper div#content-body {}
-    div#content-wrapper div.index-wrapper { width: 250px; }
-
-    div#content-wrapper.toggled {}
-    div#content-wrapper.toggled div#content-body { left: 250px; }
-    div#content-wrapper.toggled div.index-wrapper {}
-
-}
-
-/** Desktop (x >= 768px) sidebar: Defaults open with 250px wide sidebar  */
-@media screen and (min-width: 768px) {
-
-    div#content-wrapper { padding-left: 250px; }
-    div#content-wrapper div#content-body {}
-    div#content-wrapper div.index-wrapper { width: 250px; }
-
-    div#content-wrapper.toggled { padding-left: 0; }
-    div#content-wrapper.toggled div#content-body { left: 0; }
-    div#content-wrapper.toggled div.index-wrapper {}
-
-}
-
 div#content-wrapper button#menu-toggle {
     background: rgba(244, 243, 244, 0.4) none;
     border: 1px solid transparent;
@@ -172,159 +127,6 @@ div#doc-page-container > h6 > a:focus {
     outline: none;
 }
 
-ul.index-entities {
-    list-style-type: none;
-    padding-left: 0;
-}
-
-ul.toc {
-    list-style-type: none;
-    padding-top: 18px;
-    padding-left: 0;
-}
-
-ul.toc > li:hover {
-    background-color: transparent;
-}
-
-ul.toc > li.toc-title {
-    margin-top: 1rem;
-}
-
-ul.toc > li.toc-title > a {
-    font-size: 16px;
-    font-weight: bold;
-}
-
-ul.toc > li > a#home-button,
-ul.toc > li > a#home-button:hover {
-    text-align: center;
-    background: transparent;
-}
-
-ul.toc > li > a#home-button svg g#logo-foreground {
-    fill: rgba(202, 68, 94, 1);
-}
-
-ul.toc > li > a#home-button svg g#logo-background {
-    fill: rgba(202, 68, 94, 0.45);
-}
-
-ul.toc > li > a {
-    width: 100%;
-    user-select: none;
-}
-
-ul.toc > li,
-ul.index-entities > li {
-    line-height: 40px;
-    display: inline-block;
-    width: 100%;
-}
-
-ul.index-entities > li.index-entity:not(.entity-package) {
-    width: calc(100% + 40px);
-    transition: all 0.2s ease;
-    margin-left: -40px;
-}
-
-ul.index-entities > li.index-entity.with-companion {
-    width: calc(100% + 80px);
-    margin-left: -80px;
-}
-
-ul.index-entities > li.index-entity:hover {
-    margin-left: 0;
-}
-
-ul.toc > li.logo-li > a {
-    margin: 0;
-    padding: 0;
-    float: none;
-}
-
-li.index-entity.entity-package > a.entity-name {
-  color: #ff4081;
-  text-decoration: none;
-}
-
-ul.toc > li > a,
-ul.index-entities > li > a.entity-name {
-    font-size: 13px;
-    display: block;
-    padding: 0 0 0 24px;
-    color: rgba(0, 0, 0, 0.87);
-    background: transparent;
-    cursor: pointer;
-    float: left;
-}
-
-ul.index-entities > li > div.entity-kinds {
-    float: left;
-}
-
-ul.index-entities > li > div.entity-kinds > a.letter-anchor {
-    float: left;
-    width: 40px;
-    height: 40px;
-    color: white;
-    display: block;
-    text-align: center;
-    text-decoration: none;
-}
-
-ul.index-entities > li > div.entity-kinds > a.letter-anchor:focus,
-ul.index-entities > li > div.entity-kinds > a.letter-anchor:hover {
-    text-decoration: none;
-}
-
-ul.index-entities > li > div.entity-kinds > a.letter-anchor.object {
-    background-color: rgb(44, 108, 141);
-}
-
-ul.index-entities > li > div.entity-kinds > a.letter-anchor.class {
-    background-color: rgb(68, 173, 125);
-}
-
-ul.index-entities > li > div.entity-kinds > a.letter-anchor.trait {
-    background-color: rgb(25, 170, 207);
-}
-
-ul.toc > li > ul.show {
-    display: block;
-    list-style-type: none;
-    font-size: 13px;
-}
-
-ul.toc > li > ul.hide {
-    display: none;
-}
-
-ul.index-entities > li.index-title > span {
-    font-size: 16px;
-    font-weight: bold;
-    color: rgba(0, 0, 0, 0.87);
-    padding: 0 24px;
-}
-
-ul.index-entities > li.index-title:hover {
-    background-color: transparent;
-}
-
-li.index-entity > a:focus {
-    text-decoration: none;
-}
-
-ul.index-entities > li:hover,
-ul.toc > li > a:hover {
-    background-color: rgba(0, 0, 0, 0.2);
-}
-
-ul.index-entities > li > a:hover,
-ul.toc > li > a:hover {
-    text-decoration: none;
-}
-
 .darken {
     background-color: rgba(0, 0, 0, 0.2);
 }