Update to new documentation layout

canonical · Jan 10, 2024 · d127976 · d127976
1 parent be5669c
commit d127976
Show file tree

Hide file tree

Showing 19 changed files with 326 additions and 211 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/logo.svg b/static/logo.svg
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/_pattern_navigation.scss b/static/sass/_pattern_navigation.scss
@@ -1,32 +1,25 @@
 @mixin anbox-p-navigation {
-
-  .p-navigation__wrapper {
-    @media (max-width: $breakpoint-navigation-threshold) {
-      padding-left: 0;
-      padding-right: 0;
-    }
-
-    @media (min-width: $breakpoint-navigation-threshold + 1) {
-      padding-left: map("$grid-gutter-widths", "large");
-      padding-right: map("$grid-gutter-widths", "large");
-    }
-  }
-
   .p-navigation {
-    .p-navigation__banner {
-      background-color: $ubuntu-orange;
-      padding: 0 1rem;
-    }
+    &__row {
+      &-banner {
+        padding: 0 ($sph--small + $sph--large);
 
-    .p-navigation__logo {
-      font-weight: 400;
-      margin-right: 0;
-    }
+        @media only screen and (max-width: $breakpoint-small) {
+          padding-left: 1rem;
+        }
+      }
+
+      &-logo {
+        font-weight: 400;
+        margin-right: 0;
+      }
 
-    .p-navigation__link a {
-      height: 100%;
-      padding-left: $spv--large;
-      padding-right: $spv--large;
+      &-toggle {
+        &--open,
+        &--close {
+          font-weight: 400;
+        }
+      }
     }
   }
 }
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,15 +40,18 @@
   bottom: auto;
 }
 
-// Adjust logo width to secondary navigation 
-.p-navigation .p-navigation__banner {
-  padding-left: 0;
-  padding-right: 0;
-}
-
 @media (min-width: 975px) {
   #contact-modal.p-modal .p-modal__dialog {
     max-width: 875px;
     min-width: 875px;
   }
 }
+
+// TODO: to be removed when properly fixed on Vanilla side
+// https://github.com/canonical/vanilla-framework/issues/4898
+@media screen and (min-width: $breakpoint-navigation-threshold) {
+  // align navigation items with grid in docs layout
+  .l-docs__subgrid .p-navigation__row {
+    padding-left: .5rem;
+  }
+}
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%}