Improve TOC UX: fix content changing around when closing TOC, expand/…

…collapse open toc button on hover
rubenpieters · May 2, 2024 · 95f286f · 95f286f
1 parent 2c320ac
commit 95f286f
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 9 deletions.
diff --git a/data/templates/html/rules.css b/data/templates/html/rules.css
@@ -13,8 +13,8 @@ body {
 }
 
 .RulesGrid {
-  /*display: grid;
-  grid-template-columns: 15% 85%;*/
+  display: grid;
+  grid-template-columns: 15em auto;
 
   margin: 0;
 }
@@ -56,18 +56,28 @@ body {
   top: 0.3em;
   position: fixed;
   z-index: 1;
-  left: 1em;
+  left: 0.4em;
   background-color: beige;
   padding: 0.3em;
   border-radius: 0.6em;
   visibility: visible;
   cursor: pointer;
+  width: 1em;
+  height: 1.2em;
+  overflow: clip;
+
+  transition: width 0.2s ease-out 100ms
+}
+
+.TocOpen:hover {
+  width: 10em;
 }
 
 .RulesContent {
   margin-left: 1.6em;
-  margin-top: 1.5em;
   padding: 0.6em;
+
+  grid-column: 1 / 3;
 }
 
 .Title {

diff --git a/data/templates/php/rules.js b/data/templates/php/rules.js
@@ -4,8 +4,7 @@ function closeToc() {
     tocElement.style.overflow = "hidden";
     tocElement.style.padding = "0em";
     const contentElement = document.getElementById("RulesContent");
-    contentElement.style.marginLeft = "1.6em";
-    contentElement.style.marginTop = "1.5em";
+    contentElement.style.gridColumn = "1 / 3";
     const tocOpenElement = document.getElementById("TocOpen");
     tocOpenElement.style.visibility = "visible";
     const tocCloseElement = document.getElementById("TocClose");
@@ -18,8 +17,7 @@ function openToc() {
     tocElement.style.overflow = "scroll";
     tocElement.style.padding = "0.6em";
     const contentElement = document.getElementById("RulesContent");
-    contentElement.style.marginLeft = "17em";
-    contentElement.style.marginTop = "0px";
+    contentElement.style.gridColumn = "2";
     const tocOpenElement = document.getElementById("TocOpen");
     tocOpenElement.style.visibility = "hidden";
     const tocCloseElement = document.getElementById("TocClose");

diff --git a/rules_doc_generator/model/main.py b/rules_doc_generator/model/main.py
@@ -28,7 +28,7 @@ def standalone_html(document: Document, config: Config, id_map: RefDict, opengra
   result += '<div id="TocClose" class="TocClose" onClick="closeToc()">×</div>'
   result += f'<ul class="RulesTocList">{create_toc_html(id_map)}</ul>'
   result += '</div>'
-  result += f'<div id="TocOpen" class="TocOpen noprint" onClick="openToc()"><b>Table of Contents</b></div>'
+  result += f'<div id="TocOpen" class="TocOpen noprint" onClick="openToc()"><b>☰ Table of Contents</b></div>'
   result += f'<div id="RulesContent" class="RulesContent">'
   result += '<div>'
   result += f'<p class="Title">Netrunner Comprehensive Rules</p>'