From c6dc06f184ef79d2fd68ab98895f6ab0c08e4aac Mon Sep 17 00:00:00 2001 From: Carlos Wu Date: Thu, 19 Oct 2023 09:51:40 +0200 Subject: [PATCH] Data bubble navigation (#1056) --- .stylelintrc | 1 - package.json | 4 +- static/sass/_pattern_global-nav.scss | 115 +++++++++++++++++ static/sass/styles.scss | 12 +- templates/data/_form-data-kafka.html | 4 +- templates/data/_form-data-opensearch.html | 4 +- templates/data/index.html | 129 ++++++++++++-------- templates/partial/_data-navigation.html | 49 ++++++++ templates/partial/_navigation.html | 88 ++----------- templates/partial/_standard-navigation.html | 74 +++++++++++ yarn.lock | 12 ++ 11 files changed, 358 insertions(+), 134 deletions(-) create mode 100644 static/sass/_pattern_global-nav.scss create mode 100644 templates/partial/_data-navigation.html create mode 100644 templates/partial/_standard-navigation.html diff --git a/.stylelintrc b/.stylelintrc index 9d17b00ac..644d34522 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -5,7 +5,6 @@ ], "ignoreFiles": ["static/sass/_hljs.scss"], "rules": { - "order/properties-alphabetical-order": true, "no-invalid-position-at-import-rule": null, "scss/at-mixin-pattern": null, "declaration-empty-line-before": null, diff --git a/package.json b/package.json index d5d6192dd..57253163e 100644 --- a/package.json +++ b/package.json @@ -6,10 +6,11 @@ "watch-js": "watch -p 'static/js/**/!(*.test)*.{jsx,ts,tsx}' -c 'node build.js'", "build": "yarn run build-css && yarn run build-js", "build-css": "sass static/sass/styles.scss static/css/styles.css --load-path=node_modules --style=compressed && postcss --map false --use autoprefixer --replace 'static/css/**/*.css'", - "build-js": "node build.js && yarn run build-cookie-policy && yarn run build-fuse && yarn run build-latest-news", + "build-js": "node build.js && yarn run build-cookie-policy && yarn run build-fuse && yarn run build-latest-news && yarn run build-global-nav", "build-cookie-policy": "mkdir -p static/js/modules/cookie-policy && cp node_modules/@canonical/cookie-policy/build/js/cookie-policy.js static/js/modules/cookie-policy", "build-latest-news": "mkdir -p static/js/modules/latest-news && cp node_modules/@canonical/latest-news/dist/latest-news.js static/js/modules/latest-news", "build-fuse": "mkdir -p static/js/modules/fuse && cp node_modules/fuse.js/dist/fuse.js static/js/modules/fuse", + "build-global-nav": "mkdir -p static/js/modules/global-nav && cp node_modules/@canonical/global-nav/dist/global-nav.js static/js/modules/global-nav", "format-python": "black --line-length 79 webapp tests", "format-prettier": "prettier -w 'static/js/*.{js,jsx,ts,tsx}' 'static/sass/*.scss'", "lint-python": "flake8 --extend-ignore=E203 webapp tests && black --check --line-length 79 webapp tests", @@ -25,6 +26,7 @@ "dependencies": { "@canonical/cookie-policy": "3.5.0", "@canonical/latest-news": "1.4.1", + "@canonical/global-nav": "3.6.1", "@testing-library/cypress": "9.0.0", "autoprefixer": "10.4.13", "concurrently": "7.6.0", diff --git a/static/sass/_pattern_global-nav.scss b/static/sass/_pattern_global-nav.scss new file mode 100644 index 000000000..ae2a144bd --- /dev/null +++ b/static/sass/_pattern_global-nav.scss @@ -0,0 +1,115 @@ +@mixin canonical-p-global-nav { + .global-nav__row { + max-width: $grid-max-width; + } + + // Using id to override inherited styles from Vanilla and project + #g-navigation { + background-color: $color-dark; + height: 2rem; + line-height: 1rem; + + @media screen and (max-width: $breakpoint-large - 1) { + .p-navigation__nav { + height: 100vh; + left: 0; + padding-top: 0.5rem; + position: relative; + top: -1rem; + width: 100%; + } + } + + .p-global-nav-anchors { + @extend %small-text; + + color: $color-mid-light; + font-weight: $font-weight-thin; + padding-top: 0.3rem; + padding-bottom: 0; + text-decoration: none; + } + + .p-navigation__nav { + background-color: $color-dark; + } + + #all-canonical-link { + @extend .p-global-nav-anchors; + } + + @media screen and (min-width: $breakpoint-large - 1) { + padding-left: 0; + } + + .p-navigation__banner { + @media screen and (max-width: $breakpoint-small) { + padding-left: 1rem; + } + } + + .global-nav__header-link-anchor { + padding: 0.5rem auto 0.5rem 1.5rem; + + &::after { + color: $color-mid-light; + top: 0.5rem; + } + + @media screen and (max-width: $breakpoint-large - 1) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; + padding-left: 1.5rem; + } + } + + .p-navigation__dropdown { + background-color: $color-dark; + } + } + + #all-canonical-mobile { + .p-navigation__dropdown-item { + padding-left: 1.5rem; + } + + .global-nav__header-link-anchor::after { + color: $color-mid-light; + top: 0.8rem; + } + } + + .global-nav { + @media screen and (max-width: $breakpoint-large - 1) { + position: relative; + + } + } + + .global-nav-dropdown { + top: 1.5rem; + } + + .p-navigation__toggle--open, .p-navigation__toggle--close { + padding-top: 0.5rem; + padding-bottom: 0.5rem; + } + + .data-fabric-menu { + padding-left: 0; + padding-right: 0; + + .p-navigation__toggle--open { + margin-top: 0; + padding-top: 0.5rem; + } + } + + .global-nav-dropdown.show-content { + top: 1.9rem; + } + + #all-canonical-desktop { + background-color: $color-dark; + } +} diff --git a/static/sass/styles.scss b/static/sass/styles.scss index cd8d43f51..096057fa3 100644 --- a/static/sass/styles.scss +++ b/static/sass/styles.scss @@ -4,7 +4,6 @@ @import "@canonical/cookie-policy/build/css/cookie-policy"; $color-brand: #7c355d; -$color-dark: $colors--dark-theme--background-default; $color-tabs-active-bar: $colors--light-theme--text-default; $nudge--small: 0.55rem; $p-small-lh-diff: map-get($line-heights, default-text) - @@ -22,6 +21,7 @@ $p-small-lh-diff: map-get($line-heights, default-text) - @import "pattern_navigation"; @import "pattern_search-panel"; @import "pattern_careers-progression"; +@import "pattern_global-nav"; @include vanilla; @include vf-p-icon-status-waiting; @@ -42,6 +42,7 @@ $p-small-lh-diff: map-get($line-heights, default-text) - @include canonical-p-search-panel; @include canonical-u-footer-align-bottom; @include canonical-p-careers-progression; +@include canonical-p-global-nav; .js-find-a-partner__partner { // find-a-partner search @@ -786,4 +787,11 @@ $p-small-lh-diff: map-get($line-heights, default-text) - float: right; position: sticky; } -} \ No newline at end of file +} + +// /data UX requirement align to the left for smaller devices +.p-data-logos { + @media screen and (min-width: $breakpoint-large - 1) { + text-align: right; + } +} diff --git a/templates/data/_form-data-kafka.html b/templates/data/_form-data-kafka.html index bb9a278b0..8b80ac112 100644 --- a/templates/data/_form-data-kafka.html +++ b/templates/data/_form-data-kafka.html @@ -11,7 +11,7 @@

Talk to our Apache Kafka
-
+

Tell us more about your Kafka use case

@@ -65,7 +65,7 @@

How should we get in touch?

- + diff --git a/templates/data/_form-data-opensearch.html b/templates/data/_form-data-opensearch.html index a9c9371d1..8c23f7129 100644 --- a/templates/data/_form-data-opensearch.html +++ b/templates/data/_form-data-opensearch.html @@ -7,7 +7,7 @@

Talk to our OpenSearch® experts
- +

Tell us more about your OpenSearch® use case

How should we get in touch?

@@ -45,7 +45,7 @@

How should we get in touch?

- + diff --git a/templates/data/index.html b/templates/data/index.html index fbd7935f0..cd2116096 100644 --- a/templates/data/index.html +++ b/templates/data/index.html @@ -82,79 +82,110 @@

Advanced automation for your most critical data

-
-
+
+
-
- - {{ - image ( - url="https://assets.ubuntu.com/v1/c2d27381-kafka.png", - alt="", - width="228", - height="256", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe - }} - -
-
- +
{{ image ( - url="https://assets.ubuntu.com/v1/6e18d17f-apache-spark-logo.png", - alt="", - width="150", + url="https://assets.ubuntu.com/v1/24c6bf62-postgre-sql.png", + alt="PostgreSQL", + width="356", height="256", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} ) | safe }} - +
+

+ Learn more about PostgreSQL › +

-
- +
{{ image ( - url="https://assets.ubuntu.com/v1/8a6fdaab-opensearch-logo.png", - alt="", - width="319", - height="256", + url="https://assets.ubuntu.com/v1/0c7a5744-mysql-logo.png", + alt="MySQL", + width="490", + height="512", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} ) | safe }} - +
+

+ Learn more about MySQL › +

-
+
+ {{ + image ( + url="https://assets.ubuntu.com/v1/662c72e2-mongodb.png", + alt="MongoDB", + width="425", + height="512", + hi_def=True, + loading="lazy", + attrs={"class": "p-logo-section__logo"} + ) | safe + }} +
+

+ Learn more about MongoDB › +

+
+
{{ image ( - url="https://assets.ubuntu.com/v1/24c6bf62-postgre-sql.png", - alt="", - width="356", + url="https://assets.ubuntu.com/v1/6e18d17f-apache-spark-logo.png", + alt="Spark", + width="150", height="256", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} ) | safe }} +
+

+ Learn more about Spark › +

- {{ - image ( - url="https://assets.ubuntu.com/v1/24e7e1e9-mysql-logo.png", - alt="", - width="183", - height="256", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe - }} + {{ + image ( + url="https://assets.ubuntu.com/v1/c2d27381-kafka.png", + alt="Kafka", + width="228", + height="256", + hi_def=True, + loading="lazy", + attrs={"class": "p-logo-section__logo"} + ) | safe + }} +
+

+ Learn more about Kafka › +

+
+
+ {{ + image ( + url="https://assets.ubuntu.com/v1/8a6fdaab-opensearch-logo.png", + alt="OpenSearch", + width="319", + height="256", + hi_def=True, + loading="lazy", + attrs={"class": "p-logo-section__logo"} + ) | safe + }} +
+

+ Learn more about OpenSearch › +

@@ -178,7 +209,7 @@

Run data-intensive workloads across clouds

-
+
@@ -223,10 +254,10 @@

Run data-intensive workloads across clouds

{{ image ( - url="https://assets.ubuntu.com/v1/8fb612cd-kubernetes-logomark-logo.png", + url="https://assets.ubuntu.com/v1/cd1a01d0-kubernetes-logomark-logo.png", alt="Kubernetes", - width="68", - height="256", + width="606", + height="384", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} diff --git a/templates/partial/_data-navigation.html b/templates/partial/_data-navigation.html new file mode 100644 index 000000000..5ca966a9d --- /dev/null +++ b/templates/partial/_data-navigation.html @@ -0,0 +1,49 @@ +
+
+
+ Canonical + Menu + Close menu +
+ +
+
+ diff --git a/templates/partial/_navigation.html b/templates/partial/_navigation.html index 4cf9feb02..b90a9db18 100644 --- a/templates/partial/_navigation.html +++ b/templates/partial/_navigation.html @@ -1,78 +1,12 @@ -Jump to main content +{% block header_banner %} - -{% include "/partial/_careers_navigation.html" %} + {% if request.path|get_nav_path == "data" %} + {% include "partial/_data-navigation.html" %} + {% else %} + {% include "partial/_standard-navigation.html" %} + {% endif %} + + +{% endblock header_banner %} diff --git a/templates/partial/_standard-navigation.html b/templates/partial/_standard-navigation.html new file mode 100644 index 000000000..030378d7a --- /dev/null +++ b/templates/partial/_standard-navigation.html @@ -0,0 +1,74 @@ +
+
+
+ + Menu + Close menu +
+ + +
+
+{% include "/partial/_careers_navigation.html" %} diff --git a/yarn.lock b/yarn.lock index ac3d70e86..15c095de5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -316,6 +316,13 @@ resolved "https://registry.yarnpkg.com/@canonical/cookie-policy/-/cookie-policy-3.5.0.tgz#1c7e6cc2d5a7218375001b2cff2996a927693e89" integrity sha512-XLCIl8+h+3BRfvqADqFsmAfWdaDGDchY/TPCKtpeQdb4r64SR6arsdNftlOb7vX8EuLCK2QRp6evUy0J+qnQTg== +"@canonical/global-nav@3.6.1": + version "3.6.1" + resolved "https://registry.yarnpkg.com/@canonical/global-nav/-/global-nav-3.6.1.tgz#d4294a1cc287fd036a12e801fbf86ecf0a9864e0" + integrity sha512-P0yuQbItr6E+Y2C6Zxns+rF1ZMunokDSwj5ji9RfXUX7BZ3C3xFwy9DuXYVzTYyAoFfpxzZ/w4fs65sH5Nd3UA== + dependencies: + vanilla-framework "4.0.0" + "@canonical/latest-news@1.4.1": version "1.4.1" resolved "https://registry.yarnpkg.com/@canonical/latest-news/-/latest-news-1.4.1.tgz#dcdd445ac2268a54cf60f2f8c725b6bdeb285d71" @@ -4829,6 +4836,11 @@ validate-npm-package-license@^3.0.1: spdx-correct "^3.0.0" spdx-expression-parse "^3.0.0" +vanilla-framework@4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/vanilla-framework/-/vanilla-framework-4.0.0.tgz#a2fee9bd9763ebd6932b764f9d66484dc177d4cc" + integrity sha512-fiPnmaTUe15l5MRNJ6IsiJ8qiunfmgtLETOFltaYiE/bQKL7xTI+riBak2iygBKeF1y0Gi/GxUNt4hyb6xDPKA== + vanilla-framework@4.3.0: version "4.3.0" resolved "https://registry.yarnpkg.com/vanilla-framework/-/vanilla-framework-4.3.0.tgz#44850ba1e568646bd1144de25628f63758d749ce"