Improve styling of table of contents on website

adamretter · adamretter · commit 9c22e99eb0e7 · 2025-03-19T13:37:34.000+01:00
diff --git a/cityehr-documentation-common/src/main/xslt/common-html.xslt b/cityehr-documentation-common/src/main/xslt/common-html.xslt
@@ -43,22 +43,22 @@
   <xsl:template name="hcom:style">
     <style>
       @font-face {
-      font-family: avertaRegular;
-      src: url(fonts/AvertaDemoPECuttedDemo-Regular.otf);
+        font-family: avertaRegular;
+        src: url(fonts/AvertaDemoPECuttedDemo-Regular.otf);
       }
 
       @font-face {
-      font-family: avertaExtraBold;
-      src: url(fonts/AvertaDemoPE-ExtraBold.otf);
-      font-weight: bold;
+        font-family: avertaExtraBold;
+        src: url(fonts/AvertaDemoPE-ExtraBold.otf);
+        font-weight: bold;
       }
 
       body {
-      font-family: avertaRegular;
+        font-family: avertaRegular;
       }
 
       h1, h2, h3 {
-      font-family: avertaExtraBold;
+        font-family: avertaExtraBold;
       }
     </style>
   </xsl:template>
@@ -89,11 +89,11 @@
     <xsl:variable name="section-id" select="generate-id($section)"/>
 
     <!-- section -->
-    <li><xsl:value-of select="string-join($numbers, '.')"/><xsl:text>. </xsl:text><a name="{$section-id}" href="{$page-url}"><xsl:value-of select="$section/title"/></a></li>
+    <li class="toc-entry-level-{$level}"><xsl:value-of select="string-join($numbers, '.')"/><xsl:text>. </xsl:text><a name="{$section-id}" href="{$page-url}"><xsl:value-of select="$section/title"/></a></li>
 
     <!-- then process sub sections recursively (no more than 4 levels deep!) -->
-    <xsl:if test="$level le 4">
-      <ol style="list-style-type: none;">
+    <xsl:if test="$level le 4 and exists($section/body/section|$section/section)">
+      <ol class="toc-level-{$level + 1}" style="list-style-type: none;">
         <xsl:for-each select="$section/body/section|$section/section">
           <xsl:call-template name="hcom:toc-entry">
             <xsl:with-param name="section"  select="."/>
diff --git a/cityehr-documentation-common/src/main/xslt/create-map-html.xslt b/cityehr-documentation-common/src/main/xslt/create-map-html.xslt
@@ -45,6 +45,11 @@
           <xsl:with-param name="modified-dateTime" select="$revision"/>
         </xsl:call-template>
         <xsl:call-template name="hcom:style"/>
+        <style>
+          .toc-entry-level-1 {
+            margin-top: 1em;
+          }
+        </style>
       </head>
       <body about="">
         <div id="cover-page">
@@ -102,13 +107,13 @@
   
   <!-- TOC (Table of Contents) -->
   <xsl:template match="map" mode="toc">
-    <secton>
+    <section>
       <h2>Table of Contents</h2>
       <xsl:apply-templates select="topicref" mode="create-topic-html"/>
       <xsl:call-template name="hcom:toc">
         <xsl:with-param name="sections" select="topicref"/>
       </xsl:call-template>
-    </secton>
+    </section>
   </xsl:template>
 
   <!-- OVERRIDE this template from create-topic-html.xsd so that we can add previous and following links -->
