Merge pull request #817 from canonical/fix-docs-toc

Fix table of contents position in documentation layout
canonical · Jan 30, 2024 · 9b864f4 · 9b864f4
2 parents 4324b7b + 374bc5b
commit 9b864f4
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 11 deletions.
diff --git a/templates/docs/api.html b/templates/docs/api.html
@@ -4,11 +4,14 @@
 {% block twitter_title %}API{% endblock %}
 {% block og_title %}API{% endblock %}
 
+{% block title %}
+  <h1 id="maas-api">MAAS API</h1>
+{% endblock %}
+
 {% block content %}
 <div class="l-docs__main u-text-max-width" id="content-section">
   <main class="u-fixed-width">
     <div class="p-strip u-no-padding--top">
-      <h1 id="maas-api">MAAS API</h1>
       <p>Restful MAAS API.</p>
       <p>This is the documentation for the API that lets you control and query MAAS. The API is "Restful", which means that you access it through normal HTTP requests.</p>
       <h2 id="api-versions">API versions</h2>

diff --git a/templates/docs/base_docs.html b/templates/docs/base_docs.html
@@ -110,6 +110,14 @@ <h3 class="p-side-navigation__heading">{{ nav_group.navlink_text }}</h3>
     </div>
   </div>
 
+  <div class="l-docs__title">
+    <div class="p-section--shallow">
+      <div class="u-fixed-width">
+        {% block title %}{% endblock %}
+      </div>
+    </div>
+  </div>
+
   {% if document is defined and document.headings_map is defined and document.headings_map|length > 0 %}
 
   <div class="l-docs__meta">

diff --git a/templates/docs/document.html b/templates/docs/document.html
@@ -5,28 +5,27 @@
 {% block twitter_title %}{{ document.title }}{% endblock twitter_title %}
 {% block og_title %}{{ document.title }}{% endblock og_title %}
 
+{% block title %}
+  <h1>{{ document.title }}</h1>
+{% endblock %}
+
 {% block content %}
 
 <div class="l-docs__main u-text-max-width">
   <main class="u-fixed-width">
-    <div class="p-strip is-shallow u-no-padding--top">
+    <div class="p-section--shallow">
       <div class="u-fixed-width">
-        <h1 class="l-docs-title__heading u-no-margin--bottom">{{ document.title }}</h1>
-      </div>
-    </div>
-    <div class="p-strip is-shallow">
-      <div class="l-docs-row row">
         {{ document.body_html | safe }}
       </div>
     </div>
-    <div class="p-strip is-shallow u-no-padding--bottom">
-      <div class="l-docs-row row">
+    <div class="p-section--shallow">
+      <div class="u-fixed-width">
         <hr />
         <p><i>Last updated {{ document.updated }}.</i></p>
       </div>
     </div>
-    <div class="p-strip is-shallow u-no-padding--bottom u-sticky--bottom">
-      <div class="l-docs-row row">
+    <div class="p-section--shallow">
+      <div class="u-fixed-width">
         <div class="p-notification--information">
           <div class="p-notification__content">
             <p class="p-notification__message">