From d127976e7e9e07677352dfe8250947e41f706f68 Mon Sep 17 00:00:00 2001 From: Aaryan Porwal Date: Wed, 10 Jan 2024 18:42:35 +0530 Subject: [PATCH] Update to new documentation layout --- .gitignore | 1 + static/logo.svg | 1 + static/sass/_pattern_docs.scss | 2 +- static/sass/_pattern_footer.scss | 23 +++ static/sass/_pattern_navigation.scss | 43 ++--- static/sass/styles.scss | 17 +- templates/401.html | 2 +- templates/404.html | 2 +- templates/500.html | 2 +- templates/{_layout.html => base_layout.html} | 80 ++------ templates/contact-us.html | 2 +- templates/docs/document.html | 184 ++++++++++++------- templates/docs/search.html | 4 +- templates/footer.html | 37 ---- templates/index.html | 2 +- templates/login/index.html | 4 +- templates/partial/_footer.html | 70 +++++++ templates/partial/_navigation.html | 59 ++++++ templates/thank-you.html | 2 +- 19 files changed, 326 insertions(+), 211 deletions(-) create mode 100644 static/logo.svg create mode 100644 static/sass/_pattern_footer.scss rename templates/{_layout.html => base_layout.html} (59%) delete mode 100644 templates/footer.html create mode 100644 templates/partial/_footer.html create mode 100644 templates/partial/_navigation.html diff --git a/.gitignore b/.gitignore index 01d02aef..c0ea1c72 100644 --- 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 new file mode 100644 index 00000000..c33c1868 --- /dev/null +++ b/static/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/sass/_pattern_docs.scss b/static/sass/_pattern_docs.scss index 4133d64f..57041719 100644 --- 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 new file mode 100644 index 00000000..594846d7 --- /dev/null +++ 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 index 5684952d..c0aa0fa0 100644 --- 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 index e27c2812..91ea1e7e 100644 --- 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 index 928ff98e..43c35788 100644 --- 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 index cc48c85d..d74226ac 100644 --- 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 index dee08a36..bccc2e71 100644 --- 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 b/templates/base_layout.html similarity index 59% rename from templates/_layout.html rename to templates/base_layout.html index ad5cea18..d5325b62 100644 --- a/templates/_layout.html +++ b/templates/base_layout.html @@ -71,7 +71,8 @@ - + + - -
- {% block content %} {% endblock %} + {% block body %} + {% include "partial/_navigation.html" %} + +
+ {% block content %}{% endblock content %}
- {% include 'footer.html' %} + + {% include "partial/_footer.html" %} + {% endblock %} + + + + diff --git a/templates/contact-us.html b/templates/contact-us.html index 5ad88bad..8ad1e18f 100644 --- 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 index 1c29d7d9..6910f812 100644 --- 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) %} {% endmacro %} -{% block content %} -
-
-
- - - -
+
+
+ {% include "partial/_navigation.html" %} +
+
+
+
+ + +
+
+
+
-
- -
-
- -
-

{{ document.title }}

- {{ document.body_html | safe }} -
-

Last updated {{ document.updated }}.

+ +
+ + {% endif %} + + +
+
+
+ {{ document.body_html | safe }} +
+ +
-

- Help improve this document in the forum. -

+
+

Last updated {{ document.updated }}. Help improve this document in the forum.

+
-
-
-
+ +
+ + +
+ {% include "partial/_footer.html" %} +
+ + + - {% endblock %} diff --git a/templates/docs/search.html b/templates/docs/search.html index 7780bc82..b6668e26 100644 --- a/templates/docs/search.html +++ b/templates/docs/search.html @@ -1,4 +1,4 @@ -{% extends "_layout.html" %} +{% extends "base_layout.html" %} {% block meta %} {{ super() }} @@ -21,7 +21,7 @@ -
+
diff --git a/templates/footer.html b/templates/footer.html deleted file mode 100644 index 7150f1ed..00000000 --- a/templates/footer.html +++ /dev/null @@ -1,37 +0,0 @@ - - - - - diff --git a/templates/index.html b/templates/index.html index a2676dcf..83e3f74f 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,4 +1,4 @@ -{% extends '_layout.html' %} +{% extends 'base_layout.html' %} {% block title %}Anbox Cloud - Scalable Android in the cloud{% endblock %} diff --git a/templates/login/index.html b/templates/login/index.html index 66840383..043fe0dd 100644 --- a/templates/login/index.html +++ b/templates/login/index.html @@ -1,4 +1,4 @@ -{% extends '_layout.html' %} {% block title %} This is the login/index page {% endblock %} +{% extends 'base_layout.html' %} {% block title %} This is the login/index page {% endblock %} {% block content %}

{{greeting}}

-{% endblock %} \ No newline at end of file +{% endblock %} diff --git a/templates/partial/_footer.html b/templates/partial/_footer.html new file mode 100644 index 00000000..b2587e59 --- /dev/null +++ b/templates/partial/_footer.html @@ -0,0 +1,70 @@ +{% if is_docs %} +
+
+
+
+

© {{ now.year }} Canonical Ltd.

+
+
+
+
+
+ +
+
+
    +
  • +

    Android is a trademark of Google LLC. Anbox Cloud uses assets available through the Android Open Source Project.

    +
    • +
  • +

    Ubuntu and Canonical are registered trademarks of Canonical Ltd.

    +
    • +
+
+
+
+
+
+{% else %} + +{% endif %} + diff --git a/templates/partial/_navigation.html b/templates/partial/_navigation.html new file mode 100644 index 00000000..1b3f670b --- /dev/null +++ b/templates/partial/_navigation.html @@ -0,0 +1,59 @@ +{% macro nav_logo() %} +
+ + Menu + Close menu +
+{% endmacro %} + +{% macro nav_items() %} + +{% endmacro %} + +Jump to main content + + diff --git a/templates/thank-you.html b/templates/thank-you.html index f5270cb8..c84227f4 100644 --- a/templates/thank-you.html +++ b/templates/thank-you.html @@ -1,4 +1,4 @@ -{% extends '_layout.html' %} +{% extends 'base_layout.html' %} {% block title %} Thank you | Anbox Cloud {% endblock %}