Skip to content

Commit

Permalink
Merge pull request canonical#13131 from canonical/vanilla-4
Browse files Browse the repository at this point in the history 
Upgrade to Vanilla 4.3
  • Loading branch information
@mtruj013
mtruj013 authored Sep 14, 2023
2 parents 9ae8585 + f2e023c commit a52bb2d
Show file tree
Hide file tree
Showing 60 changed files with 372 additions and 284 deletions.
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@
"watch-cli": "0.2.3"
},
"dependencies": {
"@canonical/cookie-policy": "^3.4.0",
"@canonical/cookie-policy": "3.5.0",
"@canonical/global-nav": "^2.7.0",
"@canonical/latest-news": "1.4.1",
"@canonical/react-components": "^0.38.0",
Expand Down Expand Up @@ -115,7 +115,7 @@
"typescript": "4.5.4",
"url-polyfill": "1.1.12",
"url-search-params-polyfill": "8.1.1",
"vanilla-framework": "^3.14.0",
"vanilla-framework": "4.3.0",
"yup": "0.32.11"
},
"resolutions": {
Expand Down
2 changes: 1 addition & 1 deletion static/js/src/core.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { cookiePolicy } from "@canonical/cookie-policy";
createNav({
showLogins: false,
hiring: "https://canonical.com/careers/start",
maxWidth: "72rem",
maxWidth: "80rem",
});

// Initalise the cookie policy notification.
Expand Down
12 changes: 10 additions & 2 deletions static/sass/_layout-tutorial.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,18 +41,26 @@
}

.l-tutorial__nav-title {
// recreate circle styling from Vanilla 3.0, to unblock Vanilla 4.0 migation
// FIXME: Vanilla 4.0 doesn't use circled steps, so this needs to be redesigned and updated, possibly to use standard side navigation
&::before {
border: 1px solid $colors--light-theme--text-default;
border-radius: 50%;
content: counter(li);
height: $sp-large;
// line height is calculated to vertically center the number, which is size of the circle minus the border
line-height: calc($sp-large - 2px);
margin-right: $sp-medium;
text-align: center;
width: $sp-large;
}

.is-active & {
font-weight: 400;

&::before {
background-color: $color-brand;
color: $color-x-light;
background-color: $colors--light-theme--text-default;
color: $colors--dark-theme--text-default;
font-weight: 300;
}
}
Expand Down
14 changes: 14 additions & 0 deletions static/sass/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1385,3 +1385,17 @@ $color-link-dark: #69c !default;
width: auto;
}
}

// XXX: @bartaz: this will be covered in Vanilla
// can be removed once https://github.com/canonical/vanilla-framework/issues/4875 is done and released
.p-logo-section.has-misaligned-images {
.p-logo-section__item {
margin-bottom: $spv--x-large;
}

.p-logo-section__logo {
max-height: 5rem;
// make sure image aspect ratio is kept
object-fit: contain;
}
}
31 changes: 18 additions & 13 deletions templates/ai/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@ <h4>The best data science and MLops tools across your infra</h4>

<section class="p-strip is-bordered">
<div class="row">
<div class="p-logo-section">
<p class="p-logo-section__title u-align--center">Leaders in artificial intelligence choose Ubuntu</p>
<p class="p-muted-heading">Leaders in artificial intelligence choose Ubuntu</p>
<div class="p-logo-section has-misaligned-images">
<div class="p-logo-section__items u-no-margin--bottom">
<div class="p-logo-section__item">
{{ image (
Expand Down Expand Up @@ -99,7 +99,7 @@ <h4>Best of breed data science tools.</h4>
<p>The most productive tools for AI / ML development, with guides and resources available.</p>

<div class="p-logo-section">
<div class="p-logo-section__items u-align--left">
<div class="p-logo-section__items">
<div class="p-logo-section__item">
{{ image (
url="https://assets.ubuntu.com/v1/2842a636-tensor-flow-logo.svg",
Expand Down Expand Up @@ -171,7 +171,7 @@ <h2>Deploy</h2>
<h4>Multi-framework model serving.</h4>
<p>Effective model deployment across devices mesh. Low-latency inference serving.</p>
<div class="p-logo-section">
<div class="p-logo-section__items u-align--left">
<div class="p-logo-section__items">
<div class="p-logo-section__item">
{{ image (
url="https://assets.ubuntu.com/v1/f988bb24-seldon-logo.svg",
Expand Down Expand Up @@ -240,7 +240,7 @@ <h2>ML operations</h2>
<h4>Infrastructure for production data science.</h4>
<p>Centralised or multi-cloud training infrastructure for better resource allocation and data governance.</p>
<div class="p-logo-section">
<div class="p-logo-section__items u-align--left">
<div class="p-logo-section__items">
<div class="p-logo-section__item">
{{ image (
url="https://assets.ubuntu.com/v1/b730ace5-kubeflow-logo.svg",
Expand Down Expand Up @@ -296,7 +296,7 @@ <h2>Data lake</h2>
<h4>Analyse epic amounts of data, wherever it is.</h4>
<p>Build large-scale data lakes optimised for machine learning on bare metal, virtual or cloud infrastructure with open source.</p>
<div class="p-logo-section">
<div class="p-logo-section__items u-align--left">
<div class="p-logo-section__items">
<div class="p-logo-section__item">
{{ image (
url="https://assets.ubuntu.com/v1/fabdefb7-kafka+logo.png",
Expand Down Expand Up @@ -332,7 +332,7 @@ <h2>Hardware control</h2>
<h4>Drivers, storage, networking, CPU, GPU, DPU.</h4>
<p>Enjoy full control over your firmware, in a safe environment, tested by millions.</p>
<div class="p-logo-section">
<div class="p-logo-section__items u-align--left">
<div class="p-logo-section__items">
<div class="p-logo-section__item">
{{ image (
url="https://assets.ubuntu.com/v1/d2ed7c63-nvidia-logo.svg",
Expand Down Expand Up @@ -388,15 +388,16 @@ <h2>Portable to scale</h2>
<h4>Give your workloads consistency everywhere.</h4>
<p>Portable from desktop to vast multi-clouds. Fast-deploy on every major public cloud with GPU acceleration.</p>
<div class="p-logo-section">
<div class="p-logo-section__items u-align--left">
<div class="p-logo-section__items">
<div class="p-logo-section__item">
{{ image (
url="https://assets.ubuntu.com/v1/2f0c1694-server brand.svg",
alt="Server brand",
width="158",
height="158",
hi_def=True,
loading="lazy"
loading="lazy",
attrs={"class": "p-logo-section__logo"}
) | safe
}}
</div>
Expand All @@ -407,7 +408,8 @@ <h4>Give your workloads consistency everywhere.</h4>
width="159",
height="158",
hi_def=True,
loading="lazy"
loading="lazy",
attrs={"class": "p-logo-section__logo"}
) | safe
}}
</div>
Expand All @@ -418,7 +420,8 @@ <h4>Give your workloads consistency everywhere.</h4>
width="159",
height="158",
hi_def=True,
loading="lazy"
loading="lazy",
attrs={"class": "p-logo-section__logo"}
) | safe
}}
</div>
Expand All @@ -429,7 +432,8 @@ <h4>Give your workloads consistency everywhere.</h4>
width="158",
height="158",
hi_def=True,
loading="lazy"
loading="lazy",
attrs={"class": "p-logo-section__logo"}
) | safe
}}
</div>
Expand All @@ -440,7 +444,8 @@ <h4>Give your workloads consistency everywhere.</h4>
width="158",
height="158",
hi_def=True,
loading="lazy"
loading="lazy",
attrs={"class": "p-logo-section__logo"}
) | safe
}}
</div>
Expand Down
2 changes: 1 addition & 1 deletion templates/ai/roadshow.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ <h1 class="p-heading--bold">
<hr class="p-rule" />
<p class="p-heading--2">Develop artificial intelligence projects <br class="u-hide--small"/>on any environment with&nbsp;Canonical</p>
<div class="p-logo-section">
<div class="p-logo-section__items u-align--left u-no-margin--bottom">
<div class="p-logo-section__itemsu-no-margin--bottom">
<div class="p-logo-section__item--variable">
{{
image (
Expand Down
7 changes: 5 additions & 2 deletions templates/ai/services.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,8 +189,8 @@ <h2>Join our network of partners</h2>
<a class="p-button" href="https://canonical.com/partners/become-a-partner">Become a partner</a>
</p>
</div>
<div class="col-4 col-start-large-8 u-hide--medium u-hide--small u-align--center">
<div class="p-logo-section">
<div class="col-4 col-start-large-8 u-hide--medium u-hide--small">
<div class="p-logo-section has-misaligned-images">
<div class="p-logo-section__items">
<div class="p-logo-section__item">
{{ image (
Expand All @@ -199,6 +199,7 @@ <h2>Join our network of partners</h2>
width="185",
height="22",
hi_def=True,
attrs={"class": "p-logo-section__logo"},
loading="lazy"
) | safe
}}
Expand All @@ -210,6 +211,7 @@ <h2>Join our network of partners</h2>
width="163",
height="34",
hi_def=True,
attrs={"class": "p-logo-section__logo"},
loading="lazy"
) | safe
}}
Expand All @@ -221,6 +223,7 @@ <h2>Join our network of partners</h2>
width="175",
height="34",
hi_def=True,
attrs={"class": "p-logo-section__logo"},
loading="lazy"
) | safe
}}
Expand Down
8 changes: 4 additions & 4 deletions templates/ai/what-is-kubeflow.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,8 @@ <h1 class="u-sv2">What is Kubeflow?</h1>

<section class="p-strip--light">
<div class="u-fixed-width">
<div class="p-logo-section">
<p class="p-logo-section__title u-align--center">Contributors to Kubeflow</p>
<p class="p-muted-heading">Contributors to Kubeflow</p>
<div class="p-logo-section has-misaligned-images">
<div class="p-logo-section__items">
<div class="p-logo-section__item">
{{
Expand Down Expand Up @@ -162,7 +162,7 @@ <h2 class="u-sv3">What's inside Kubeflow?</h2>

</div>
<div class="col-5 u-hide--small u-hide--medium">
<div class="p-logo-section">
<div class="p-logo-section has-misaligned-images">
<div class="p-logo-section__items">
<div class="p-logo-section__item">
{{
Expand Down Expand Up @@ -406,7 +406,7 @@ <h2 class="u-fixed-width u-sv1">Who uses Kubeflow?</h2>
<p>Forward-looking enterprises are using Kubeflow to empower their data scientists.</p>
</div>
<div class="col-6 u-vertically-center">
<div class="p-logo-section">
<div class="p-logo-section has-misaligned-images">
<div class="p-logo-section__items">
<div class="p-logo-section__item">
{{
Expand Down
4 changes: 2 additions & 2 deletions templates/automotive/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -305,7 +305,7 @@ <h3 class="p-heading--2">Top rated security. Best-in-class isolation</h3>
</div>
<div class="row u-vertically-center u-sv3">
<div class="col-6 u-hide--medium u-hide--small u-align--center">
<div class="p-logo-section">
<div class="p-logo-section has-misaligned-images">
<div class="p-logo-section__items u-no-margin--bottom">
<div class="p-logo-section__item">
{{ image (
Expand Down Expand Up @@ -572,8 +572,8 @@ <h3 class="p-heading--2">Build the dealerships of the future</h3>
</div>
<section class="p-strip">
<div class="u-fixed-width">
<p class="p-muted-heading">Accelerating on Ubuntu</p>
<div class="p-logo-section">
<p class="p-logo-section__title u-align--center">Accelerating on Ubuntu</p>
<div class="p-logo-section__items u-no-margin--bottom">
<div class="p-logo-section__item">
{{ image (
Expand Down
2 changes: 1 addition & 1 deletion templates/aws/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,8 @@ <h1>Ubuntu on AWS</h1>
</section>
<section class="p-strip--light">
<div class="u-fixed-width">
<h2 class="p-muted-heading">Ubuntu on AWS powers cloud leaders like</h2>
<div class="p-logo-section">
<h2 class="p-logo-section__title u-align--center">Ubuntu on AWS powers cloud leaders like</h2>
<div class="p-logo-section__items u-no-margin--bottom">
<div class="p-logo-section__item">
{{ image (
Expand Down
2 changes: 1 addition & 1 deletion templates/azure/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,8 @@ <h1>
<section class="p-strip--light">
<div class="row">
<div class="col-12">
<h2 class="p-muted-heading">Ubuntu on Azure powers cloud leaders like</h2>
<div class="p-logo-section">
<h2 class="p-logo-section__title u-align--center">Ubuntu on Azure powers cloud leaders like</h2>
<div class="p-logo-section__items u-no-margin--bottom">
<div class="p-logo-section__item">
{{ image (
Expand Down
3 changes: 3 additions & 0 deletions templates/azure/shared/_azure-logo-strip.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
width="288",
height="288",
hi_def=True,
attrs={"class": "p-logo-section__logo"},
loading="auto"
) | safe
}}
Expand All @@ -20,6 +21,7 @@
width="288",
height="288",
hi_def=True,
attrs={"class": "p-logo-section__logo"},
loading="auto"
) | safe
}}
Expand All @@ -31,6 +33,7 @@
width="288",
height="288",
hi_def=True,
attrs={"class": "p-logo-section__logo"},
loading="auto"
) | safe
}}
Expand Down
26 changes: 14 additions & 12 deletions templates/base_index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,18 +57,20 @@ <h2>Modern enterprise open&nbsp;source</h2>
</p>
</div>
<div class="col-6 col-medium-2">
<div class="p-logo-section__items">
<div class="p-logo-section__item">
<img class="p-logo-section__logo" src="https://assets.ubuntu.com/v1/83ff4203-awshp-strip-customers.png" alt="Amazon Web Services logo">
</div>
<div class="p-logo-section__item">
<img class="p-logo-section__logo" src="https://assets.ubuntu.com/v1/7c601cb9-azurehp-strip-customers.png" alt="Microsoft Azure logo">
</div>
<div class="p-logo-section__item">
<img class="p-logo-section__logo" src="https://assets.ubuntu.com/v1/5ba04ee8-atthp-strip-customers.png" alt="AT&T logo">
</div>
<div class="p-logo-section__item">
<img class="p-logo-section__logo" src="https://assets.ubuntu.com/v1/fdb8126b-google+cloudhp-strip-customers.png" alt="Google Cloud logo">
<div class="p-logo-section">
<div class="p-logo-section__items">
<div class="p-logo-section__item">
<img class="p-logo-section__logo" src="https://assets.ubuntu.com/v1/83ff4203-awshp-strip-customers.png" alt="Amazon Web Services logo">
</div>
<div class="p-logo-section__item">
<img class="p-logo-section__logo" src="https://assets.ubuntu.com/v1/7c601cb9-azurehp-strip-customers.png" alt="Microsoft Azure logo">
</div>
<div class="p-logo-section__item">
<img class="p-logo-section__logo" src="https://assets.ubuntu.com/v1/5ba04ee8-atthp-strip-customers.png" alt="AT&T logo">
</div>
<div class="p-logo-section__item">
<img class="p-logo-section__logo" src="https://assets.ubuntu.com/v1/fdb8126b-google+cloudhp-strip-customers.png" alt="Google Cloud logo">
</div>
</div>
</ul>
</div>
Expand Down
6 changes: 3 additions & 3 deletions templates/ceph/shared/_ceph-users.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ <h2>Companies using Ceph</h2>
</div>
</div>
<div class="u-fixed-width">
<p class="p-muted-heading">
Notable Ceph users
</p>
<div class="p-logo-section">
<p class="p-logo-section__title u-align--center">
Notable Ceph users
</p>
<div class="p-logo-section__items">
<div class="p-logo-section__item u-align--center">
{{ image (
Expand Down
4 changes: 2 additions & 2 deletions templates/ceph/what-is-ceph.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,8 +177,8 @@ <h2>
</p>
</div>
<div class="u-fixed-width">
<div class="p-logo-section">
<p class="p-logo-section__title u-align--center">Influential contributors to Ceph</p>
<p class="p-muted-heading">Influential contributors to Ceph</p>
<div class="p-logo-section has-misaligned-images">
<div class="p-logo-section__items">
<div class="p-logo-section__item">
{{
Expand Down
Loading

0 comments on commit a52bb2d

Please sign in to comment.