Improve table of contents layout (fix #486)

edemaine · Apr 28, 2021 · e5fc5c9 · e5fc5c9
1 parent 786bf88
commit e5fc5c9
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 17 deletions.
diff --git a/client/message.css b/client/message.css
@@ -103,23 +103,6 @@ img { image-orientation: none; } /* we do manual EXIF rotation */
 
 .panel-secondbody { margin-top: -10px; padding-top: 0px; padding-bottom: 10px; }
 
-.contents > li > a { padding: 5px 5px; }
-.subcontents > li > a { font-size: small; padding: 5px 10px; }
-/* Purples based on #563d7c from Bootstrap docs */
-.subcontents { border-left: solid 2px #8465b3; padding-left: 3px; }
-.dark .contents li > a { color: #eee; }
-.contents li.active > a { background: #d1c5e2; }
-.dark .contents li.active > a { background: #3c245e; }
-.contents li > a.deleted, .contents li > a.unpublished, .contents li > a.minimized { font-size: x-small; padding: 2px 10px; }
-.contents li > a.deleted { color: #a94442; }
-.contents li > a.unpublished { color: #8a6d3b; }
-.contents li > a.private { color: #5bc0de; }
-.contents li > a.minimized { color: #449d44; }
-.dark .contents li > a.deleted { color: #d9534f; }
-.dark .contents li > a.unpublished { color: #f0ad4e; }
-.dark .contents li > a.minimized { color: #5cb85c; }
-.contents li.folded li > a { opacity: 0.7; }
-
 code.raw, pre { white-space: pre-wrap; }
 /* line-height normal to make box drawing look right */
 code.raw, pre, .CodeMirror { line-height: normal; }

diff --git a/client/message.styl b/client/message.styl
@@ -133,6 +133,64 @@ nav.contents
   padding-bottom: 5px
   height: 100%  // match parent height set in JavaScript
   overflow-y: auto
+  font-size: small
+
+  li > a
+    padding: 4px 5px 4px 0px  // no left padding to match vertical lines
+    overflow-wrap: break-word
+
+    // Push subtrees closer to parent
+    + .subcontents
+      margin-top: -2px
+
+    /*
+    &.deleted, &.unpublished, &.minimized
+      font-size: x-small
+      padding-block: 2px
+    */
+
+    /.dark &
+      color: #eee
+    &.deleted
+      color: #a94442
+      /.dark &
+        color: #d9534f
+    &.unpublished
+      color: #8a6d3b
+      /.dark &
+        color: #f0ad4e
+    &.private
+      color: #5bc0de
+    &.minimized
+      color: #449d44
+      /.dark &
+        color: #5cb85c
+
+  li.folded
+    a
+      font-size: x-small
+      /*
+      + .subcontents
+        margin-top: -1px
+      */
+    li > a
+      opacity: 0.7
+
+  // Purples based on #563d7c from Bootstrap docs
+  li.active > a, .contents > li > a  // always highlight root
+    background: #d1c5e2
+    /.dark &
+      background: #3c245e
+
+.subcontents
+  border-left: solid 2px #8465b3
+  border-bottom-left-radius: 5px
+  padding-left: 5px
+
+  /*
+  > li:last-child > a
+    padding-bottom: 0px
+  */
 
 // Message body