Merge pull request #3 from qwitwa/main

Refactor TOC HTML/CSS

data/templates/html/rules.css

@@ -1,6 +1,7 @@
 body {
   font-family: 'Atkinson Hyperlegible';
   margin: 0;
+  --toc-width: 15rem;
 }
 
 .material-symbols-outlined {
@@ -12,39 +13,80 @@ body {
     'opsz' 24;
 }
 
-.RulesGrid {
-  display: grid;
-  grid-template-columns: 15em auto;
-
-  margin: 0;
+#RulesParent {
+  max-width: 100vw;
+  overflow-x: clip;
 }
 
 .Clickable {
   cursor: pointer;
 }
 
-.RulesToc {
+#RulesContent {
+  padding: 2rem;
+  padding-left: 2.4rem;
+  transform: translateX(0);
+}
+#RulesParent[data-tocopen] #RulesContent {
+  transform: translateX(var(--toc-width));
+  transition: transform 0.05s ease-out 100ms
+}
+
+
+#RulesParent[data-tocopen] #RulesToc{
+  transform: translateX(var(--toc-width));
+  transition: transform 0.05s ease-out 100ms;
+}
+#RulesParent[data-tocopen] #TocClose {
+  visibility: visible;
+}
+#RulesParent[data-tocopen] #TocOpen {
+  visibility: hidden;
+}
+
+#TocHeader {
+  display: flex;
+  font-weight: 600;
+  /* subtle shadow below toc header indicates 
+     it may be hiding offscreen content due to scroll */
+  box-shadow: 0px 4px 10px -10px black; 
+}
+#TocTitle {
+  flex: 1;
+  padding: 1rem;
+}
+#TocClose {
+  flex: 1;
+}
+
+#RulesToc {
+  display: flex;
+  flex-direction: column;
   list-style-type: none;
-  width: 0;
+  width:var(--toc-width);
   position: fixed;
   height: 100%;
-  z-index: 1;
+  transform: translateX(0);
   top: 0;
   left: 0;
   background-color: beige;
-  overflow: hidden;
-  margin: 0;
+  margin: 0 0 0 calc(-1 * var(--toc-width));
   padding: 0;
 }
 
+#RulesToc nav {
+  overflow-y: scroll;
+}
+
 .RulesTocList {
   list-style-type: none;
   padding: 0.2em;
   margin: 0;
+  z-index: 0;
 }
 
 .TocClose {
-  position: fixed;
+  position: absolute;
   font-size: xx-large;
   left: 6.5em;
   top: 0.1em;
@@ -73,11 +115,12 @@ body {
   width: 10em;
 }
 
-.RulesContent {
-  margin-left: 1.6em;
-  padding: 0.6em;
-
-  grid-column: 1 / 3;
+/* on desktop or sufficiently wide displays, leave whitespace on right 
+   equal to the space the TOC will take up, to allow browsing with TOC open */
+@media only screen and (min-width: 768px) {
+  #RulesContent {
+     padding-right: calc(var(--toc-width) + 2rem);
+  }
 }
 
 .Title {

data/templates/php/rules.js

@@ -1,27 +1,10 @@
 function closeToc() {
-    const tocElement = document.getElementById("RulesToc");
-    tocElement.style.width = "0em";
-    tocElement.style.overflow = "hidden";
-    tocElement.style.padding = "0em";
-    const contentElement = document.getElementById("RulesContent");
-    contentElement.style.gridColumn = "1 / 3";
-    const tocOpenElement = document.getElementById("TocOpen");
-    tocOpenElement.style.visibility = "visible";
-    const tocCloseElement = document.getElementById("TocClose");
-    tocCloseElement.style.visibility = "hidden";
+    const parent = document.querySelector("#RulesParent");
+    parent.removeAttribute("data-tocopen");
 }
-
 function openToc() {
-    const tocElement = document.getElementById("RulesToc");
-    tocElement.style.width = "15em";
-    tocElement.style.overflow = "scroll";
-    tocElement.style.padding = "0.6em";
-    const contentElement = document.getElementById("RulesContent");
-    contentElement.style.gridColumn = "2";
-    const tocOpenElement = document.getElementById("TocOpen");
-    tocOpenElement.style.visibility = "hidden";
-    const tocCloseElement = document.getElementById("TocClose");
-    tocCloseElement.style.visibility = "visible";
+    const parent = document.querySelector("#RulesParent");
+    parent.setAttribute("data-tocopen", "");
 }
 
 addEventListener("load", (event) => {
@@ -51,7 +34,7 @@ elems.forEach(a => {
         // Replace link symbol with clipboard symbol
         navigator.clipboard.writeText(a.href);
         a.parentElement.getElementsByClassName('material-symbols-outlined')[0].innerText = "content_paste_go";
-
+        
         // Revert back to link symbol after 1s
         setTimeout(() => {
             a.parentElement.getElementsByClassName('material-symbols-outlined')[0].innerText = "link";

rules_doc_generator/model/main.py

@@ -5,7 +5,7 @@
 from rules_doc_generator.model.section import (Document)
 
 def create_toc_html(id_map: RefDict):
-  result = '<li><b>Table of Contents</b></li>'
+  result = ''
   for id in id_map:
     ref_info = id_map[id]
     if ref_info.toc:
@@ -23,10 +23,15 @@ def standalone_html(document: Document, config: Config, id_map: RefDict, opengra
     result += '<script src="rules.js" defer></script>'
     result += '<link rel="stylesheet" href="extended.css">'
   result += '</head><body>'
-  result += '<div class="RulesGrid">'
+  result += '<div id="RulesParent">'
   result += '<div id="RulesToc" class="RulesToc">'
-  result += '<div id="TocClose" class="TocClose" onClick="closeToc()">×</div>'
-  result += f'<ul class="RulesTocList">{create_toc_html(id_map)}</ul>'
+  result += """
+  <div id="TocHeader">
+    <div id="TocTitle">Table of Contents</div>
+    <div id="TocClose" class="TocClose" onClick="closeToc()">×</div>
+  </div>
+  """
+  result += f'<nav><ul class="RulesTocList">{create_toc_html(id_map)}</ul></nav>'
   result += '</div>'
   result += f'<div id="TocOpen" class="TocOpen noprint" onClick="openToc()"><b>☰ Table of Contents</b></div>'
   result += f'<div id="RulesContent" class="RulesContent">'