Update to new documentation layout

canonical · Jan 9, 2024 · 11ee2b9 · 11ee2b9
1 parent be5669c
commit 11ee2b9
Show file tree

Hide file tree

Showing 17 changed files with 297 additions and 181 deletions.
diff --git a/.gitignore b/.gitignore
@@ -70,3 +70,4 @@ build/
 dist/
 static/js/modules/
 static/js/utils.js
+static/js/modals.js
diff --git a/static/sass/_pattern_docs.scss b/static/sass/_pattern_docs.scss
@@ -1,5 +1,5 @@
 @mixin anbox-p-docs {
-  .l-docs {
+  .l-search {
     display: flex;
     flex-wrap: wrap;
     margin: 0 auto;

diff --git a/static/sass/_pattern_footer.scss b/static/sass/_pattern_footer.scss
@@ -0,0 +1,23 @@
+@mixin canonical-p-footer {
+  .p-footer {
+    @extend %vf-strip;
+
+    background: $colors--dark-theme--background-alt;
+    color: $colors--dark-theme--text-default;
+
+    .p-list__item--condensed {
+      @extend %vf-list-item;
+
+      padding-bottom: 0;
+      padding-top: 0;
+    }
+
+    a {
+      color: $color-link-dark;
+
+      &:visited {
+        color: $color-link-visited-dark;
+      }
+    }
+  }
+}
diff --git a/static/sass/styles.scss b/static/sass/styles.scss
@@ -22,6 +22,7 @@
 @import "pattern_navigation";
 @import "pattern_strip";
 @import "pattern_stream";
+@import "pattern_footer";
 
 @include anbox-p-deployment-table;
 @include anbox-p-docs;
@@ -30,6 +31,7 @@
 @include anbox-p-navigation;
 @include anbox-p-strip;
 @include anbox-p-stream;
+@include canonical-p-footer;
 
 // import additional styles
 @import "intl-tel-input";
@@ -38,7 +40,7 @@
   bottom: auto;
 }
 
-// Adjust logo width to secondary navigation 
+// Adjust logo width to secondary navigation
 .p-navigation .p-navigation__banner {
   padding-left: 0;
   padding-right: 0;

diff --git a/templates/401.html b/templates/401.html
@@ -1,4 +1,4 @@
-{% extends '_layout.html' %}
+{% extends 'base_layout.html' %}
 
 {% block title %}401: Not Authorised{% endblock %}
 

diff --git a/templates/404.html b/templates/404.html
@@ -1,4 +1,4 @@
-{% extends '_layout.html' %}
+{% extends 'base_layout.html' %}
 
 {% block title %}404: Page not found{% endblock %}
 

diff --git a/templates/500.html b/templates/500.html
@@ -1,4 +1,4 @@
-{% extends '_layout.html' %}
+{% extends 'base_layout.html' %}
 
 {% block title %}500: Server error{% endblock %}
 

diff --git a/templates/_layout.html → templates/base_layout.html b/templates/_layout.html → templates/base_layout.html
@@ -71,7 +71,8 @@
     </script>
     <!-- End Google Tag Manager -->
   </head>
-  <body>
+
+  <body class="no-js is-paper {% block body_class %}l-site{% endblock %}">
     <!-- Google Tag Manager (noscript) -->
     <noscript
       ><iframe
@@ -82,66 +83,23 @@
       ></iframe
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
-    <header id="navigation" class="p-navigation is-dark">
-      <div class="row p-navigation__wrapper" data-nosnippet>
-        <div class="col-12">
-          <div class="p-navigation__row">
-            <div class="p-navigation__banner">
-              <div class="p-navigation__logo u-vertically-center">
-                <a class="p-navigation__link" href="/" style="color: white">
-                  Anbox Cloud
-                </a>
-              </div>
-              <div>
-                <a
-                  href="#navigation"
-                  class="p-navigation__toggle--open"
-                  title="menu"
-                  >Menu</a
-                >
-                <a
-                  href="#navigation-closed"
-                  class="p-navigation__toggle--close"
-                  title="close menu"
-                  >Close menu</a
-                >
-              </div>
-            </div>
-            <nav class="p-navigation__nav" role="menubar">
-              <span class="u-off-screen">
-                <a href="#main-content">Jump to main content</a>
-              </span>
-              <ul class="p-navigation__items" role="menu">
-                <li class="p-navigation__item" role="menuitem">
-                  <a
-                    class="p-navigation__link"
-                    href="/docs/howto/install-appliance/landing"
-                    >Install</a
-                  >
-                </li>
-                <li
-                  class="p-navigation__item {% if request.path == '/docs' %}is-selected{% endif %}"
-                  role="menuitem"
-                >
-                  <a class="p-navigation__link" href="/docs">Docs</a>
-                </li>
-                <li class="p-navigation__item" role="menuitem">
-                  <a
-                    class="p-navigation__link"
-                    href="https://discourse.ubuntu.com/c/anbox-cloud/"
-                    >Forum</a
-                  >
-                </li>
-              </ul>
-              <ul class="p-navigation__items global-nav"></ul>
-            </nav>
-          </div>
-        </div>
-      </div>
-    </header>
-    <main>
-      {% block content %} {% endblock %}
+    {% block body %}
+    {% include "partial/_navigation.html" %}
+
+    <main id="main-content">
+      {% block content %}{% endblock content %}
     </main>
-    {% include 'footer.html' %}
+
+    {% include "partial/_footer.html" %}
+    {% endblock %}
+
+    <script src="/static/js/modules/cookie-policy/cookie-policy.js"></script>
+    <script src="/static/js/modules/global-nav/global-nav.js"></script>
+    <script>
+      canonicalGlobalNav.createNav({
+        maxWidth: '72rem',
+      });
+      cpNs.cookiePolicy();
+    </script>
   </body>
 </html>
diff --git a/templates/contact-us.html b/templates/contact-us.html
@@ -1,4 +1,4 @@
-{% extends '_layout.html' %}
+{% extends 'base_layout.html' %}
 
 {% block content%}
 

diff --git a/templates/docs/document.html b/templates/docs/document.html
@@ -1,7 +1,11 @@
-{% extends "_layout.html" %}
+{% extends "base_layout.html" %}
 
 {% block title %}{{ document.title }} | Anbox documentation{% endblock %}
 
+{% set is_docs = True %}
+{% block body_class %}{# override default l-site with empty class #}{% endblock %}
+{% block body %}
+
 {% macro create_navigation(nav_items, expandable=False, expanded=False) %}
   <ul class="p-side-navigation__list">
     {% for element in nav_items %}
@@ -10,15 +14,15 @@
       <a
         class="p-side-navigation__link {% if expandable and element.children %}is-expandable{% endif %}"
         href="{{ element.navlink_href }}"
-        {% if expandable and element.children %}aria-expanded={% if expanded %}"true"{% else %}"false"{% endif %}{% endif %}
-        {% if element.is_active %}aria-current="page"{% endif %}
+        {% if expandable and element.children %}aria-expanded={% if expanded or element.is_active %}"true"{% else %}"false"{% endif %}{% endif %}
+        {% if element.is_active and not element.navlink_fragment %}aria-current="page"{% endif %}
       >{{ element.navlink_text }}</a>
       {% else %}
-        <span
+        <strong
           class="p-side-navigation__text {% if expandable and element.children %}is-expandable{% endif %}"
           {% if expandable and element.children %}aria-expanded={% if expanded %}"true"{% else %}"false"{% endif %}{% endif %}
           {% if element.is_active %}aria-current="page"{% endif %}
-        >{{ element.navlink_text }}</span>
+        >{{ element.navlink_text }}</strong>
       {% endif %}
 
       {% if expandable %}
@@ -36,80 +40,118 @@
   </ul>
 {% endmacro %}
 
-{% block content %}
 
-<section id="search-docs" class="p-strip--light is-shallow">
-  <div class="row">
-    <form class="p-search-box u-no-margin--bottom" action="/docs/search">
-      <input type="search" class="p-search-box__input" name="q" {% if query %}value="{{ query }}"{% endif %} placeholder="Search documentation" required/>
-      <button type="reset" class="p-search-box__reset" alt="reset"><i class="p-icon--close">Reset</i></button>
-      <button type="submit" class="p-search-box__button" alt="search"><i class="p-icon--search">Search</i></button>
-    </form>
+<div class="l-docs">
+  <div class="l-docs__header">
+    {% include "partial/_navigation.html" %}
+    <section id="search-docs" class="p-strip is-shallow is-bordered l-docs__subgrid">
+      <div class="l-docs__main">
+        <div class="row">
+          <form class="p-search-box u-no-margin--bottom" action="/docs/search">
+            <input type="search" class="p-search-box__input" name="q" {% if query %}value="{{ query }}"{% endif %} placeholder="Search documentation" required/>
+            <button type="submit" class="p-search-box__button"><i class="p-icon--search">Search</i></button>
+          </form>
+        </div>
+      </div>
+    </section>
   </div>
-</section>
-
-  <section class="p-strip is-shallow">
-    <div class="row">
-      <aside class="col-3">
-        {% if versions | length > 1 %}
-        <label for="version-select" class="u-hide">Version</label>
-        <select name="version-select" id="version-select" onChange="window.location.href=this.value">
-        {% for version in versions %}
-          {% set active = docs_version == version['path'] %}
-          <option value="{{ version_paths[version['path']] }}"{% if active %} selected{% endif %}>{{ version['version'] }}</option>
-        {% endfor %}
-        <select>
-        {% endif %}
 
-        <nav data-js="navigation" class="p-side-navigation" id="{{ navigation['path'] or 'default' }}">
-          <a href="#{{ navigation['path'] or 'default' }}" class="p-side-navigation__toggle js-drawer-toggle" aria-controls="{{ navigation['path'] or 'default' }}">
-            Toggle side navigation
-          </a>
-          <div class="p-side-navigation__overlay js-drawer-toggle" aria-controls="{{ navigation['path'] or 'default' }}"></div>
-          <div class="p-side-navigation__drawer">
-            <div class="p-side-navigation__drawer-header">
-              <a href="#" class="p-side-navigation__toggle--in-drawer js-drawer-toggle" aria-controls="{{ navigation['path'] or 'default' }}">
-                Toggle side navigation
-              </a>
-            </div>
-            {% for nav_group in navigation.nav_items %}
-	    {% if not nav_group.hidden %}
-	      {% if nav_group.navlink_text %}
-		{% if nav_group.navlink_href %}
-		<h3 class="p-side-navigation__heading--linked">
-		  <a class="p-side-navigation__link" href="{{ nav_group.navlink_href }}" {% if nav_group.is_active %}aria-current="page"{% endif %}>
-		    {{ nav_group.navlink_text }}
-		  </a>
-		</h3>
-		{% else %}
-		  <h3 class="p-side-navigation__heading">{{ nav_group.navlink_text }}</h3>
-		{% endif %}
-	      {% endif %}
-	      {#
-		Use `create_navigation(nav_group.children)` for a default, fully expanded navigation.
-		Use `create_navigation(nav_group.children, expandable=True)` for the nested nav levels to expand only when parent page is active.
-	      #}
-	      {{ create_navigation(nav_group.children, expandable=True) }}
+
+  <aside class="l-docs__sidebar">
+    <div class="l-docs__sticky-container">
+      <nav data-js="navigation" class="p-side-navigation" id="{{ navigation['path'] or 'default' }}" style="margin-top: 0.5rem">
+        <div class="u-hide--large p-strip is-shallow">
+          <div class="u-fixed-width">
+            <a href="#{{ navigation['path'] or 'default' }}" class="p-side-navigation__toggle js-drawer-toggle" aria-controls="{{ navigation['path'] or 'default' }}">
+              Toggle side navigation
+            </a>
+          </div>
+        </div>
+        <div class="p-side-navigation__overlay js-drawer-toggle" aria-controls="{{ navigation['path'] or 'default' }}"></div>
+        <div class="p-side-navigation__drawer">
+          <div class="p-side-navigation__drawer-header">
+            <a href="#" class="p-side-navigation__toggle--in-drawer js-drawer-toggle" aria-controls="{{ navigation['path'] or 'default' }}">
+              Toggle side navigation
+            </a>
+          </div>
+          {% for nav_group in navigation.nav_items %}
+          {% if not nav_group.hidden %}
+            {% if nav_group.navlink_text %}
+              {% if nav_group.navlink_href %}
+              <h3 class="p-side-navigation__heading--linked">
+                <a class="p-side-navigation__link" href="{{ nav_group.navlink_href }}" {% if nav_group.is_active %}aria-current="page"{% endif %}>
+                  {{ nav_group.navlink_text }}
+                </a>
+              </h3>
+              {% else %}
+                <h3 class="p-side-navigation__heading">{{ nav_group.navlink_text }}</h3>
+              {% endif %}
             {% endif %}
-          {% endfor %}
+            {#
+              Use `create_navigation(nav_group.children)` for a default, fully expanded navigation.
+              Use `create_navigation(nav_group.children, expandable=True)` for the nested nav levels to expand only when parent page is active.
+            #}
+            {{ create_navigation(nav_group.children, expandable=True) }}
+          {% endif %}
+        {% endfor %}
+        </div>
+      </nav>
+    </div>
+  </aside>
+
+  <div class="l-docs__title">
+    <div class="u-fixed-width">
+      {% if document.title %}
+      <div class="p-section--shallow u-no-padding--top">
+        <h1 class="u-no-margin--bottom">{{ document.title }}</h1>
+      </div>
+      {% endif %}
+    </div>
+  </div>
+
+  {% if document.headings_map is defined and document.headings_map|length > 0 %}
+    <div class="l-docs__meta">
+      <div class="l-docs__sticky-container">
+        <aside class="p-table-of-contents">
+          <div class="p-table-of-contents__section">
+            <h4 class="p-table-of-contents__header">On this page</h4>
+            <nav class="p-table-of-contents__nav" aria-label="Table of contents">
+              <ul class="p-table-of-contents__list">
+                {% for heading in document.headings_map %}
+                <li class="p-table-of-contents__item"><a class="p-table-of-contents__link" href="#{{ heading.heading_slug }}">{{ heading.heading_text }}</a></li>
+                {% endfor %}
+              </ul>
+            </nav>
           </div>
-        </nav>
-      </aside>
-      <main class="col-9" id="main-content">
-        <h1>{{ document.title }}</h1>
-        {{ document.body_html | safe }}
-        <hr />
-        <p><i>Last updated {{ document.updated }}.</i></p>
+        </aside>  
+      </div>
+    </div>
+  {% endif %}
+
+
+  <div class="l-docs__main u-text-max-width">
+    <main class="u-fixed-width">
+      <div class="p-strip is-shallow" style="overflow: visible;">
+      {{ document.body_html | safe }}
+      </div>
+
+      <div class="p-strip is-shallow">
         <div class="p-notification--information">
-          <p class="p-notification__content">
-            <a href="{{ forum_url }}{{ document.topic_path }}">Help improve this document in the forum</a>.
-          </p>
+          <div class="p-notification__content">
+            <p class="p-notification__message">Last updated {{ document.updated }}. <a href="{{ forum_url }}{{ document.topic_path }}">Help improve this document in the forum</a>.</p>
+          </div>
         </div>
-      </main>
-    </div>
-  </section>
+      </div>
+    </main>
+  </div>
+
+  <div class="l-docs__footer">
+    {% include "partial/_footer.html" %}
+  </div>
+</div>
+
 
 
+<script src="{{ versioned_static('js/docs-side-nav.js') }}"></script>
 
-  <script src="{{ versioned_static('js/docs-side-nav.js') }}"></script>
 {% endblock %}