From 4c741263dad18929e0759787fc38c598c60677f6 Mon Sep 17 00:00:00 2001 From: MariaPaula Trujillo Date: Wed, 17 Jan 2024 14:10:32 +0100 Subject: [PATCH 01/33] Apply desktop landing refresh --- static/sass/styles.scss | 38 +++ templates/desktop/index.html | 297 ++++++++++++------ .../shared/contextual_footers/_desktop.html | 38 +++ 3 files changed, 284 insertions(+), 89 deletions(-) create mode 100644 templates/shared/contextual_footers/_desktop.html diff --git a/static/sass/styles.scss b/static/sass/styles.scss index a339a4d821d..cab613a74c8 100644 --- a/static/sass/styles.scss +++ b/static/sass/styles.scss @@ -1403,3 +1403,41 @@ $color-link-dark: #69c !default; background-color: #f3f3f3; } } + +.p-icon-section { + &__items { + display: flex; + flex-wrap: wrap; + line-height: 3rem; + padding-bottom: .5rem; + padding-top: .5rem; + } + + &__item { + margin-bottom: -0.5rem; + margin-right: 3rem; + margin-top: -.5rem; + + @media screen and (max-width: $breakpoint-small - 1) { + margin-right: 1.5rem; + } + + } + + &__icon { + height: 6rem; + width: auto; + } +} + +.desktop-footer { + &__content { + height: 12rem; + } + + @media screen and (min-width: $breakpoint-small) and (max-width: $breakpoint-large - 1) { + &__content { + height: 14rem; + } + } +} \ No newline at end of file diff --git a/templates/desktop/index.html b/templates/desktop/index.html index 14e3ce8d2b6..2dee12b32e7 100755 --- a/templates/desktop/index.html +++ b/templates/desktop/index.html @@ -6,20 +6,26 @@ {% block meta_copydoc %}https://docs.google.com/document/d/1ZhMkLlkXcimHTIe1taXy24vbbR9pBkZd49H2sJqeQH0/edit{% endblock meta_copydoc %} +{% block body_class %}is-paper{% endblock body_class %} + {% block content %} {# 0 -180px #} -
-
+
+
-
+

Ubuntu for desktops

The open source Ubuntu desktop operating system powers millions of PCs and laptops around the world.

-

Download Ubuntu

-

Take a look ›

+

+ Download Ubuntu + Take a look › +

-
+
+
+
@@ -28,49 +34,163 @@

Ubuntu for desktops

-
-
-
- {{ - image( - url="https://assets.ubuntu.com/v1/741b30ec-desktop-logos.png", - alt="Apps you can use on Ubuntu 20.04.LTS", - height="235", - width="510", - hi_def=True, - loading="lazy", - ) | safe - }} +
+
+
+
+

The OS trusted by millions

-
-

Complete

-

Ubuntu comes with everything you need to run your organisation, school, home or enterprise. All the essential applications, like an office suite, browsers, email and media apps come pre-installed and thousands more games and applications are available in the Ubuntu Software Centre.

+
+

Ubuntu comes with everything you need to run your organisation, school, home or enterprise. All the essential applications, like an office suite, browsers, email and media apps, come pre-installed and thousands more games and applications are available in the Ubuntu Software Centre.

Explore features ›

+
+
+
+
+ {{ + image ( + url="https://assets.ubuntu.com/v1/9917aba6-spotify-linux-256.png", + alt="", + width="256", + height="256", + hi_def=True, + loading="lazy", + attrs={"class": "p-icon-section__icon"}, + ) | safe + }} +
+
+ {{ + image ( + url="https://assets.ubuntu.com/v1/f099c20f-vlc.png", + alt="", + width="256", + height="256", + hi_def=True, + loading="lazy", + attrs={"class": "p-icon-section__icon"}, + ) | safe + }} +
+
+ {{ + image ( + url="https://assets.ubuntu.com/v1/034147e9-code_ozwVHSV.png", + alt="", + width="256", + height="256", + hi_def=True, + loading="lazy", + attrs={"class": "p-icon-section__icon"}, + ) | safe + }} +
+
+ {{ + image ( + url="https://assets.ubuntu.com/v1/eb5ccb1d-clion.ico.png", + alt="", + width="256", + height="256", + hi_def=True, + loading="lazy", + attrs={"class": "p-icon-section__icon"}, + ) | safe + }} +
+
+ {{ + image ( + url="https://assets.ubuntu.com/v1/8daf0eb5-firefox_logo.png", + alt="", + width="196", + height="196", + hi_def=True, + loading="lazy", + attrs={"class": "p-icon-section__icon"}, + ) | safe + }} +
+
+ {{ + image ( + url="https://assets.ubuntu.com/v1/dcc61b66-Skype.png", + alt="", + width="256", + height="256", + hi_def=True, + loading="lazy", + attrs={"class": "p-icon-section__icon"}, + ) | safe + }} +
+
+ {{ + image ( + url="https://assets.ubuntu.com/v1/d77f0f3a-icon256.png", + alt="", + width="256", + height="256", + hi_def=True, + loading="lazy", + attrs={"class": "p-icon-section__icon"}, + ) | safe + }} +
+
+
+
-
-
-
-

Open source

-

Ubuntu has always been free to download, use and share. We believe in the power of open source software; Ubuntu could not exist without its worldwide community of voluntary developers.

-
-
-

Secure

-

With a built-in firewall and virus protection software, Ubuntu is one of the most secure operating systems around. And the long-term support releases give you five years of security patches and updates.

+
+
+
+
+

Why choose Ubuntu desktop

-
-

Accessible

-

Computing is for everyone regardless of nationality, gender or disability. Ubuntu is fully translated into over 50 languages and includes essential assistive technologies.

+
+
+
+

Open source

+
+
+

Ubuntu has always been free to download, use and share. We believe in the power of open source software; Ubuntu could not exist without its worldwide community of voluntary developers.

+
+
+
+
+
+

Secure

+
+
+

With a built-in firewall and virus protection software, Ubuntu is one of the most secure operating systems around. And the long-term support releases give you five years of security patches and updates.

+
+
+
+
+
+

Accessible

+
+
+

Computing is for everyone regardless of nationality, gender or disability. Ubuntu is fully translated into over 50 languages and includes essential assistive technologies.

+
+
-
-
-
- {{ image ( +
+
+
+

Visually stunning, wherever it's used

+
+
+
+

Ubuntu gets the most from your screen, with high definition, touchscreen support, fractional scaling and touchpad gestures. 22.04 refreshes its signature Yaru theme, with system-wide dark style preference support, accent colours and the largest selection of community wallpapers yet.

+ {{ + image ( url="https://assets.ubuntu.com/v1/acdf946a-Screenshot+from+2022-04-18+13-05-17.png", alt="", width="2557", @@ -80,69 +200,68 @@

Accessible

) | safe }}
-
-
-

- Visually stunning, wherever it's used -

-

- Ubuntu gets the most from your screen, with high definition, touchscreen support, fractional scaling and touchpad gestures. 22.04 refreshes its signature Yaru theme, with system-wide dark style preference support, accent colours and the largest selection of community wallpapers yet. -

-
-
-
-
-

- Get Linux on the largest range of hardware -

-
-
-
-

- Canonical works closely with Dell, Lenovo and HP to certify that Ubuntu works on a wide range of their laptops and workstations. It means that a seamless Ubuntu experience is available out of the box with more hardware choice than ever. -

-

- And Ubuntu isn't just for the desktop, it is used in data centres around the world powering every kind of server imaginable and is by far, the most popular operating system in the cloud. -

-

Find out more about our partners ›

+
+
+
+
+

Get Linux on the largest range of hardware

-
- {{ image ( - url="https://assets.ubuntu.com/v1/a8e96807-desktop-xps13-small.png", - alt="Laptop running Ubuntu", - width="1088", - height="630", - hi_def=True, - loading="lazy" - ) | safe - }} +
+

Canonical works closely with Dell, Lenovo and HP to certify that Ubuntu works on a wide range of their laptops and workstations. It means that a seamless Ubuntu experience is available out of the box with more hardware choice than ever.

+

And Ubuntu isn't just for the desktop, it is used in data centres around the world powering every kind of server imaginable and is by far, the most popular operating system in the cloud.

+ Learn more about Ubuntu certified hardware › +
+ {{ + image ( + url="https://assets.ubuntu.com/v1/7f76ac3a-hp-laptop-studio-jammy.png", + alt="", + width="1659", + height="1246", + hi_def=True, + loading="lazy" + ) | safe + }} +
-
-
-

- Ubuntu Desktop for the enterprise -

+
+
+
+

Ubuntu Desktop for the enterprise

-
-
-

Support and management tools

-

Ubuntu Pro Desktop is a comprehensive subscription delivering enterprise-grade security, management tooling, and extended support for developers and organisations. Ubuntu Pro Desktop is free for personal use on up to five machines.

-

Learn more about Ubuntu for enterprises ›

-
-
-

Backed by Canonical

-

Canonical is a global software company and the number-one Ubuntu services provider. Companies can choose to receive expert training, support or consultancy for a fee that goes towards the continued development of Ubuntu.

-

Learn more about Canonical ›

+
+
+
+
+
+

Support and management tools

+
+
+

Ubuntu Pro Desktop is a comprehensive subscription delivering enterprise-grade security, management tooling, and extended support for developers and organisations. Ubuntu Pro Desktop is free for personal use on up to five machines.

+
+ Learn more about Ubuntu for enterprises › +
+
+
+
+
+

Backed by Canonical

+
+
+

Canonical is a global software company and the number-one Ubuntu services provider. Companies can choose to receive expert training, support or consultancy for a fee that goes towards the continued development of Ubuntu.

+
+ Learn more about Canonical › +
+
-{% with first_item="_desktop_download", second_item="_support-image", third_item="_desktop_flavours" %}{% include "shared/contextual_footers/_contextual_footer.html" %}{% endwith %} +{% include "shared/contextual_footers/_desktop.html" %} {% endblock content %} diff --git a/templates/shared/contextual_footers/_desktop.html b/templates/shared/contextual_footers/_desktop.html new file mode 100644 index 00000000000..c8e1f101864 --- /dev/null +++ b/templates/shared/contextual_footers/_desktop.html @@ -0,0 +1,38 @@ +
+
+
+

Get started with Ubuntu today

+
+
+
+
+
+
+

Download and install

+

Download Ubuntu desktop and replace your current operating system. It's easy to install on Windows or Mac OS, or run Ubuntu alongside it.

+
+
+ Download Ubuntu +
+
+
+

Professional support

+

Get professional support from Canonical to manage your Ubuntu desktop, cloud and server deployments.

+
+
+

+ Buy Ubuntu Pro Desktop +

+ Find out more › +
+
+
+

Ubuntu flavours

+

Experience Ubuntu with different choices of default applications and settings, backed by the full Ubuntu archive for packages and updates.

+
+
+ Download Ubuntu › +
+
+
+
\ No newline at end of file From 287fa153cb85f87e327adfc05d1e644296dab619 Mon Sep 17 00:00:00 2001 From: MariaPaula Trujillo Date: Wed, 17 Jan 2024 14:17:34 +0100 Subject: [PATCH 02/33] Add alt text to icons and appease linter --- static/sass/styles.scss | 11 +++++------ templates/desktop/index.html | 14 +++++++------- 2 files changed, 12 insertions(+), 13 deletions(-) diff --git a/static/sass/styles.scss b/static/sass/styles.scss index cab613a74c8..3a45a958349 100644 --- a/static/sass/styles.scss +++ b/static/sass/styles.scss @@ -1409,19 +1409,18 @@ $color-link-dark: #69c !default; display: flex; flex-wrap: wrap; line-height: 3rem; - padding-bottom: .5rem; - padding-top: .5rem; + padding-bottom: 0.5rem; + padding-top: 0.5rem; } &__item { margin-bottom: -0.5rem; margin-right: 3rem; - margin-top: -.5rem; + margin-top: -0.5rem; @media screen and (max-width: $breakpoint-small - 1) { margin-right: 1.5rem; } - } &__icon { @@ -1438,6 +1437,6 @@ $color-link-dark: #69c !default; @media screen and (min-width: $breakpoint-small) and (max-width: $breakpoint-large - 1) { &__content { height: 14rem; - } + } } -} \ No newline at end of file +} diff --git a/templates/desktop/index.html b/templates/desktop/index.html index 2dee12b32e7..d1317dda027 100755 --- a/templates/desktop/index.html +++ b/templates/desktop/index.html @@ -52,7 +52,7 @@

The OS trusted by millions

{{ image ( url="https://assets.ubuntu.com/v1/9917aba6-spotify-linux-256.png", - alt="", + alt="Spotify", width="256", height="256", hi_def=True, @@ -65,7 +65,7 @@

The OS trusted by millions

{{ image ( url="https://assets.ubuntu.com/v1/f099c20f-vlc.png", - alt="", + alt="VLC", width="256", height="256", hi_def=True, @@ -78,7 +78,7 @@

The OS trusted by millions

{{ image ( url="https://assets.ubuntu.com/v1/034147e9-code_ozwVHSV.png", - alt="", + alt="VSCode", width="256", height="256", hi_def=True, @@ -91,7 +91,7 @@

The OS trusted by millions

{{ image ( url="https://assets.ubuntu.com/v1/eb5ccb1d-clion.ico.png", - alt="", + alt="CLion", width="256", height="256", hi_def=True, @@ -104,7 +104,7 @@

The OS trusted by millions

{{ image ( url="https://assets.ubuntu.com/v1/8daf0eb5-firefox_logo.png", - alt="", + alt="Firefox", width="196", height="196", hi_def=True, @@ -117,7 +117,7 @@

The OS trusted by millions

{{ image ( url="https://assets.ubuntu.com/v1/dcc61b66-Skype.png", - alt="", + alt="Skype", width="256", height="256", hi_def=True, @@ -130,7 +130,7 @@

The OS trusted by millions

{{ image ( url="https://assets.ubuntu.com/v1/d77f0f3a-icon256.png", - alt="", + alt="Telegram", width="256", height="256", hi_def=True, From 110df630c7bea089be53f82240c317a021fff777 Mon Sep 17 00:00:00 2001 From: MariaPaula Trujillo Date: Thu, 18 Jan 2024 11:41:36 +0100 Subject: [PATCH 03/33] Apply ux review suggestions --- static/sass/styles.scss | 21 ++++++++++++++++--- .../shared/contextual_footers/_desktop.html | 12 ++++++----- 2 files changed, 25 insertions(+), 8 deletions(-) diff --git a/static/sass/styles.scss b/static/sass/styles.scss index 3a45a958349..545ec2af75d 100644 --- a/static/sass/styles.scss +++ b/static/sass/styles.scss @@ -1411,6 +1411,10 @@ $color-link-dark: #69c !default; line-height: 3rem; padding-bottom: 0.5rem; padding-top: 0.5rem; + + @media screen and (max-width: $breakpoint-large - 1) { + row-gap: 1rem; + } } &__item { @@ -1426,17 +1430,28 @@ $color-link-dark: #69c !default; &__icon { height: 6rem; width: auto; + + @media screen and (max-width: $breakpoint-large - 1) { + height: 4rem; + } } } .desktop-footer { + &__container { + @media screen and (max-width: $breakpoint-small - 1) { + padding-bottom: 1rem; + } + } &__content { height: 12rem; - } - @media screen and (min-width: $breakpoint-small) and (max-width: $breakpoint-large - 1) { - &__content { + @media screen and (min-width: $breakpoint-small) and (max-width: $breakpoint-large - 1) { height: 14rem; } + + @media screen and (max-width: $breakpoint-small - 1) { + height: auto; + } } } diff --git a/templates/shared/contextual_footers/_desktop.html b/templates/shared/contextual_footers/_desktop.html index c8e1f101864..a26d65ed4b4 100644 --- a/templates/shared/contextual_footers/_desktop.html +++ b/templates/shared/contextual_footers/_desktop.html @@ -6,7 +6,7 @@

Get started with Ubuntu today

-
+

Download and install

Download Ubuntu desktop and replace your current operating system. It's easy to install on Windows or Mac OS, or run Ubuntu alongside it.

@@ -14,7 +14,7 @@

Download and install

Download Ubuntu
-
+

Professional support

Get professional support from Canonical to manage your Ubuntu desktop, cloud and server deployments.

@@ -23,15 +23,17 @@

Professional support

Buy Ubuntu Pro Desktop

- Find out more › +

+ Find out more › +

-
+

Ubuntu flavours

Experience Ubuntu with different choices of default applications and settings, backed by the full Ubuntu archive for packages and updates.

- Download Ubuntu › + Learn more about Ubuntu flavours ›
From 75569000f6ffeb2ad501040cfa7d2aa0aed10529 Mon Sep 17 00:00:00 2001 From: MariaPaula Trujillo Date: Thu, 18 Jan 2024 17:09:56 +0100 Subject: [PATCH 04/33] Apply design review suggestions --- templates/desktop/index.html | 42 ++++++++++++++++++------------------ 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/templates/desktop/index.html b/templates/desktop/index.html index d1317dda027..16e88ae9805 100755 --- a/templates/desktop/index.html +++ b/templates/desktop/index.html @@ -12,10 +12,10 @@ {# 0 -180px #} -
+
-
-
+
+

Ubuntu for desktops

The open source Ubuntu desktop operating system powers millions of PCs and laptops around the world.

@@ -23,9 +23,7 @@

Ubuntu for desktops

Take a look ›

-
-
-
+
@@ -182,25 +180,27 @@

Accessible

-
+
-

Visually stunning, wherever it's used

-
-
-
+
+

Visually stunning,
wherever it's used

+
+

Ubuntu gets the most from your screen, with high definition, touchscreen support, fractional scaling and touchpad gestures. 22.04 refreshes its signature Yaru theme, with system-wide dark style preference support, accent colours and the largest selection of community wallpapers yet.

- {{ - image ( - url="https://assets.ubuntu.com/v1/acdf946a-Screenshot+from+2022-04-18+13-05-17.png", - alt="", - width="2557", - height="1321", - hi_def=True, - loading="lazy" - ) | safe - }}
+
+ {{ + image ( + url="https://assets.ubuntu.com/v1/acdf946a-Screenshot+from+2022-04-18+13-05-17.png", + alt="", + width="2557", + height="1321", + hi_def=True, + loading="lazy" + ) | safe + }} +
From fac7f0b9bb736623d746f103ba967ae358dc4bcd Mon Sep 17 00:00:00 2001 From: MariaPaula Trujillo Date: Fri, 19 Jan 2024 12:28:49 +0100 Subject: [PATCH 05/33] Add comment linking vanilla ticket --- static/sass/styles.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/static/sass/styles.scss b/static/sass/styles.scss index 545ec2af75d..08d717f77f6 100644 --- a/static/sass/styles.scss +++ b/static/sass/styles.scss @@ -1437,6 +1437,8 @@ $color-link-dark: #69c !default; } } +// XXX: MPT: Can be removed once this is fixed in Vanilla +// https://github.com/canonical/vanilla-framework/pull/4950 .desktop-footer { &__container { @media screen and (max-width: $breakpoint-small - 1) { From 678ade9829bea1ddff2ce1e4b5ab5637eb1fa254 Mon Sep 17 00:00:00 2001 From: MariaPaula Trujillo Date: Mon, 22 Jan 2024 11:39:52 +0100 Subject: [PATCH 06/33] Add desktop redirects and update subnav --- navigation.yaml | 2 -- redirects.yaml | 2 ++ 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/navigation.yaml b/navigation.yaml index 4d8488ca6af..b18067a565d 100644 --- a/navigation.yaml +++ b/navigation.yaml @@ -276,8 +276,6 @@ desktop: path: /desktop/organisations - title: Developers path: /desktop/developers - - title: Partners - path: /desktop/partners - title: Flavours path: /desktop/flavours diff --git a/redirects.yaml b/redirects.yaml index 997bd428be5..492e36486b5 100644 --- a/redirects.yaml +++ b/redirects.yaml @@ -297,8 +297,10 @@ desktop/get-ubuntu/upgrade/?: "/tutorials/tutorial-upgrading-ubuntu-desktop" desktop/get.*/?: "/download/desktop" desktop/government/?: "/desktop/organisations" desktop/management/?: "/pricing/pro" +desktop/partners/?: "https://canonical.com/partners/desktop" desktop/services/?: "/pricing/pro" desktop/snappy/?: "/desktop/developers" +desktop/statistics/?: "/desktop" desktop/take-the-tour-gallery/?: "http://tour.ubuntu.com/" desktop/take-the-tour/?: "http://tour.ubuntu.com/" desktop/tenders/?: "/desktop/contact-us" From ae7a49379ffe718dd08982cc554f8506cfa063cf Mon Sep 17 00:00:00 2001 From: Akbar Abdrakhmanov Date: Fri, 19 Jan 2024 09:37:18 +0600 Subject: [PATCH 07/33] rebrand /desktop/features --- static/sass/_pattern_gaming.scss | 20 - static/sass/_pattern_strip-photos.scss | 5 +- static/sass/styles.scss | 2 - templates/desktop/features.html | 677 +++++++++++++++---------- 4 files changed, 402 insertions(+), 302 deletions(-) delete mode 100644 static/sass/_pattern_gaming.scss diff --git a/static/sass/_pattern_gaming.scss b/static/sass/_pattern_gaming.scss deleted file mode 100644 index 60ef942e613..00000000000 --- a/static/sass/_pattern_gaming.scss +++ /dev/null @@ -1,20 +0,0 @@ -@mixin ubuntu-p-gaming { - .p-gaming { - background-image: url("#{$assets-path}1d582338-dota2.jpg"); - background-position: 0 0; - background-repeat: no-repeat; - background-size: cover; - min-height: 488px; - padding-bottom: 0; - position: relative; - - &__content { - @media only screen and (min-width: $breakpoint-medium) { - margin-bottom: 15%; - margin-top: 15%; - position: relative; - z-index: 3; - } - } - } -} diff --git a/static/sass/_pattern_strip-photos.scss b/static/sass/_pattern_strip-photos.scss index 93ad8f49a9a..e19a3f1f5b7 100644 --- a/static/sass/_pattern_strip-photos.scss +++ b/static/sass/_pattern_strip-photos.scss @@ -1,6 +1,7 @@ @mixin ubuntu-p-strip-photos { .p-strip-photos { &__container { + height: 25px; @media only screen and (min-width: $breakpoint-medium) { margin-bottom: 10.6rem; margin-top: 10.6rem; @@ -10,10 +11,12 @@ &__credit { @media only screen and (min-width: $breakpoint-medium) { background-color: rgba(0, 0, 0, 0.6); - bottom: 0; + bottom: 10px; + right: 10px; color: $color-light; margin-top: -$sp-xxx-large; padding: $sp-small; + position: absolute; } } diff --git a/static/sass/styles.scss b/static/sass/styles.scss index 08d717f77f6..290352921e8 100644 --- a/static/sass/styles.scss +++ b/static/sass/styles.scss @@ -53,7 +53,6 @@ $color-shadow: rgba(0, 0, 0, 0.5) !default; @import "pattern_cube-table"; @import "pattern_cve"; @import "pattern_desktop-statistics"; -@import "pattern_gaming"; @import "pattern_grid"; @import "pattern_footer"; @import "pattern_hardware-details-table"; @@ -110,7 +109,6 @@ $color-shadow: rgba(0, 0, 0, 0.5) !default; @include ubuntu-p-desktop-statistics; @include ubuntu-p-floating-image; @include ubuntu-p-footer; -@include ubuntu-p-gaming; @include ubuntu-p-grid; @include ubuntu-p-heading-icon; @include ubuntu-p-inline-list-midline; diff --git a/templates/desktop/features.html b/templates/desktop/features.html index 3961faf6bfe..75f24c5e158 100755 --- a/templates/desktop/features.html +++ b/templates/desktop/features.html @@ -1,384 +1,503 @@ {% extends "desktop/base_desktop.html" %} {% block title %}Desktop features{% endblock %} -{% block meta_description %}Learn about all the great features and default applications in the Ubuntu desktop operating system.{% endblock meta_description %} -{% block meta_copydoc %}https://docs.google.com/document/d/1nLHJlZ3igDwAAOUDP03wp4iKLxZts8110EA2ZOF5uaU/edit{% endblock meta_copydoc %} +{% block meta_description %}Learn about all the great features and default applications in the Ubuntu desktop operating +system.{% endblock %} +{% block meta_copydoc %}https://docs.google.com/document/d/1nLHJlZ3igDwAAOUDP03wp4iKLxZts8110EA2ZOF5uaU/edit +{% endblock %} + +{% block body_class %}is-paper{% endblock %} {% block content %} -
-
-
+ + +
+
+
+

Features

-

Enjoy the simplicity of Ubuntu's intuitive interface. Fast, secure and with thousands of apps to choose from — for everything you want to do, Ubuntu has what you need.

+

Enjoy the simplicity of Ubuntu's intuitive interface. Fast, secure and with
thousands of apps to choose from — for everything you want to do,
Ubuntu has what you need.

+

Download Ubuntu

-
- {{ image ( - url="https://assets.ubuntu.com/v1/1930f20c-desktop-xps13-alt.png", - alt="", - width="600", - height="498", - hi_def=True, - loading="auto" - ) | safe - }} -
-
-
-
-

A whole world of apps

-

Ubuntu offers thousands of apps available for download. Most are available for free and can be installed with just a few clicks.

+
+
+
+
+
+

A whole world of apps

+
+
+

Ubuntu offers thousands of apps available for download. Most are available for free and can be installed with + just a few clicks.

+
+ Discover more apps in the Snap Store › +
-
-
    -
  • - {{ - image( +
    +
    +
    +
    +
    +
    +
    + {{ + image( url="https://assets.ubuntu.com/v1/c9be8d47-Spotify_logo_without_text.svg", alt="Spotify icon", - height="48", - width="48", + height="32", + width="32", hi_def=True, - attrs={"class": "p-matrix__img"} - ) | safe - }} -
    -

    Spotify

    -

    Play and stream your favourite songs, playlists and albums for free with Spotify.

    -
    -
    • -
  • - {{ - image( + attrs={"class": "u-vertically-center"}, + ) | safe + }} +

    Spotify

    +

    Play and stream your favourite songs, playlists and albums for free with Spotify.

    +
+
+ {{ + image( url="https://assets.ubuntu.com/v1/4bb576dc-bitwarden.svg", alt="Bitwarden icon", - height="48", - width="48", + height="32", + width="32", hi_def=True, - attrs={"class": "p-matrix__img"} - ) | safe - }} -
-

Bitwarden

-

A secure and free password manager for all of your devices.

-
- -
  • - {{ - image( + attrs={"class": "u-vertically-center"}, + ) | safe + }} +

    Bitwarden

    +

    A secure and free password manager for all of your devices.

    +
    • +
    + {{ + image( url="https://assets.ubuntu.com/v1/7b460167-vlc-icon.png", alt="VLC icon", - height="48", - width="48", + height="32", + width="32", hi_def=True, - attrs={"class": "p-matrix__img"} - ) | safe - }} -
    -

    VLC player

    -

    No other video player is compatible with as many different file formats.

    + attrs={"class": "u-vertically-center"}, + ) | safe + }} +

    VLC player

    +

    No other video player is compatible with as many different file formats.

    +
    - -
  • - {{ - image( +
    +
    +
    + {{ + image( url="https://assets.ubuntu.com/v1/a45d30aa-vf.io-firefox.svg", alt="Firefox icon", - height="48", - width="48", + height="32", + width="32", hi_def=True, - attrs={"class": "p-matrix__img"} - ) | safe - }} -
    -

    Firefox

    -

    Firefox Quantum is now 2x faster and 30% lighter than Chrome.

    -
    -
    • -
  • - {{ - image( + attrs={"class": "u-vertically-center"}, + ) | safe + }} +

    Firefox

    +

    Firefox Quantum is now 2x faster and 30% lighter than Chrome.

    +
    • +
    + {{ + image( url="https://assets.ubuntu.com/v1/8a2851df-slack-icon-vanilla.svg", alt="Slack icon", - height="48", - width="48", + height="32", + width="32", hi_def=True, - attrs={"class": "p-matrix__img"} - ) | safe - }} -
    -

    Slack

    -

    Team communication and collaboration in one place so you can get more done.

    -
    - -
  • - {{ - image( - url="https://assets.ubuntu.com/v1/ccb8872b-Icon_Atom.svg", - alt="Atom icon", - height="48", - width="48", + attrs={"class": "u-vertically-center"}, + ) | safe + }} +

    Slack

    +

    Team communication and collaboration in one place so you can get more done.

    +
    • +
    + {{ + image( + url="https://assets.ubuntu.com/v1/822c49e2-Visual+Studio+Code+logo.svg", + alt="Visual Studio Code icon", + height="32", + width="32", hi_def=True, - attrs={"class": "p-matrix__img"} - ) | safe - }} -
    -

    Atom

    -

    A hackable text editor for the 21st Century.

    + attrs={"class": "u-vertically-center"}, + ) | safe + }} +

    Visual Studio Code

    +

    VS Code combines the simplicity of a code editor with what developers need for the edit-build-debug + cycle.

    +
    - -
  • - {{ - image( +
    +
    +
    + {{ + image( url="https://assets.ubuntu.com/v1/171fcf42-Chromium_11_Logo.svg", alt="Chromium icon", - height="48", - width="48", + height="32", + width="32", hi_def=True, - attrs={"class": "p-matrix__img"} - ) | safe - }} -
    -

    Chromium

    -

    A fast, simple and secure web browser, built for the modern web.

    -
    -
    • -
  • - {{ - image( + attrs={"class": "u-vertically-center"}, + ) | safe + }} +

    Chromium

    +

    A fast, simple and secure web browser, built for the modern web.

    +
    • +
    + {{ + image( url="https://assets.ubuntu.com/v1/4ecb4f50-PyCharm_Logo.svg", - alt="PyCharm", - height="48", - width="48", + alt="PyCharm icon", + height="32", + width="32", hi_def=True, - attrs={"class": "p-matrix__img"} - ) | safe - }} -
    -

    PyCharm

    -

    PyCharm provides all the tools you need for productive Python coding.

    -
    - -
  • - {{ - image( + attrs={"class": "u-vertically-center"}, + ) | safe + }} +

    PyCharm

    +

    PyCharm provides all the tools you need for productive Python coding.

    +
    • +
    + {{ + image( url="https://assets.ubuntu.com/v1/3f3a15ef-logo-telegram.svg", alt="Telegram icon", - height="48", - width="48", + height="32", + width="32", hi_def=True, - attrs={"class": "p-matrix__img"} - ) | safe - }} -
    -

    Telegram

    -

    A fast and secure desktop messaging app, perfectly synced with your mobile phone.

    + attrs={"class": "u-vertically-center"}, + ) | safe + }} +

    Telegram

    +

    A fast and secure desktop messaging app, perfectly synced with your mobile phone.

    +
    - - -

    Discover more apps in the Snap Store.

    -
    +
    +
    -
    -
    -
    +
    +
    +
    +

    Office software

    -

    Create professional documents, spreadsheets and presentations on Ubuntu with LibreOffice, the open source office suite that's compatible with Microsoft Office. That means you can open and edit files like Word documents, Excel spreadsheets and PowerPoint presentations and share them with other users quickly and easily. You can also use Google docs directly from your desktop.

    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/3ed8eec4-desktop-22.04-libre.png", - alt="", - width="1187", - height="732", - hi_def=True, - loading="lazy" - ) | safe +
    +

    Create professional documents, spreadsheets and presentations on Ubuntu with LibreOffice, the open source + office suite that's compatible with Microsoft Office. That means you can open and edit files like Word + documents, Excel spreadsheets and PowerPoint presentations and share them with other users quickly and easily. + You can also use Google docs directly from your desktop.

    +
    +
    +
    +
    +
    + {{ + image( + url="https://assets.ubuntu.com/v1/7f84bfa4-Jellyfish.png", + alt="Ubuntu desktop", + width="1000", + hi_def=True, + loading="lazy", + ) | safe + }} + {{ + image( + url="https://assets.ubuntu.com/v1/3ed8eec4-desktop-22.04-libre.png", + alt="Stacked Office software windows", + width="1000", + hi_def=True, + loading="lazy", + attrs={"class": "image-inside-another-image"}, + ) | safe }}
    -
    -
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/b0cbd8b1-firefox-raspberrypi.png", - alt="", - width="1280", - height="720", - hi_def=True, - loading="lazy" - ) | safe - }} +
    +
    +
    +
    +

    Web browsing

    -
    -
    -

    Web browsing

    -

    Renowned for speed and security, Ubuntu and Firefox make browsing the web a pleasure again. Ubuntu also supports Chrome and other browsers that can be installed from the Ubuntu Software centre.

    -
    +
    +

    Renowned for speed and security, Ubuntu and Firefox make browsing the web a pleasure again. Ubuntu also + supports Chrome and other browsers that can be installed from the Ubuntu Software centre.

    +
    +
    +
    +
    +
    + {{ + image( + url="https://assets.ubuntu.com/v1/7f84bfa4-Jellyfish.png", + alt="Ubuntu desktop", + width="1000", + hi_def=True, + loading="lazy", + ) | safe + }} + {{ + image( + url="https://assets.ubuntu.com/v1/b0cbd8b1-firefox-raspberrypi.png", + alt="Web browser window", + width="1000", + hi_def=True, + loading="lazy", + attrs={"class": "image-inside-another-image"}, + ) | safe + }}
    -
    -
    -
    +
    +
    +
    +

    Email

    -

    Ubuntu comes with Thunderbird, Mozilla's popular email application, so you'll have fast desktop access to your email. No matter which email services you use; Microsoft Exchange, Gmail, Hotmail, POP or IMAP, email just works.

    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/f55b4bed-desktop-22.04-email.jpg", - alt="", - width="1068", - height="714", - hi_def=True, - loading="lazy" - ) | safe +
    +

    Ubuntu comes with Thunderbird, Mozilla's popular email application, so you'll have fast desktop access to your + email. No matter which email services you use; Microsoft Exchange, Gmail, Hotmail, POP or IMAP, email just + works.

    +
    +
    +
    +
    +
    + {{ + image( + url="https://assets.ubuntu.com/v1/7f84bfa4-Jellyfish.png", + alt="Ubuntu desktop", + width="1000", + hi_def=True, + loading="lazy", + ) | safe + }} + {{ + image( + url="https://assets.ubuntu.com/v1/f55b4bed-desktop-22.04-email.jpg", + alt="Email client application window", + width="1000", + hi_def=True, + loading="lazy", + attrs={"class": "image-inside-another-image"}, + ) | safe }}
    -
    -
    -
    -
    -

    Photos

    -

    Ubuntu is full of free apps to help you enjoy, manage, edit and share your photos — whatever you use to take them. With fantastic support for cameras and phones, you won't need any extra drivers to get up and running.

    +
    +
    +
    +
    +

    Photos

    +
    +
    +

    Ubuntu is full of free apps to help you enjoy, manage, edit and share your photos — whatever you use to + take them. With fantastic support for cameras and phones, you won't need any extra drivers to get up and + running.

    +
    +
    +
    +
    +
    +
    +
    + +
    -
    -
    -
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/1aef005e-desktop-22.04-photos.jpg", - alt="", - width="900", - height="518", - hi_def=True, - loading="lazy" - ) | safe - }} +
    +
    +
    +

    Organise your photos

    -

    With Shotwell, you can quickly and easily import, organise, edit and view your pictures. And you can share your favourite snaps on all popular photo sites and social networks.

    -
    +
    +

    With Shotwell, you can quickly and easily import, organise, edit and view your pictures. And you can share your + favourite snaps on all popular photo sites and social networks.

    +
    +
    +
    +
    +
    + +
    +
    +
    + +
    +
    +
    +

    Edit and illustrate

    -

    Edit your photos or create professional illustrations and designs with tools like Gimp and Krita, available in the Ubuntu Software centre.

    -
    -
    -
    +
    +
    +

    Edit your photos or create professional illustrations and designs with tools like Gimp and Krita, available in + the Ubuntu Software centre.

    +
      +
    • +
      {{ - image( - url="https://assets.ubuntu.com/v1/b38df947-krita.png", - alt="Krita icon", - height="60", - width="60", - hi_def=True, - attrs={"class": "p-logo-section__logo"}, - loading="lazy" - ) | safe + image( + url="https://assets.ubuntu.com/v1/b38df947-krita.png", + alt="Krita icon", + width="80", + hi_def=True, + loading="lazy", + ) | safe }}
      -
      +
      • +
    • +
      {{ - image( - url="https://assets.ubuntu.com/v1/4d47a674-gimp-60x43.svg", - alt="", - height="60", - width="60", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"}, - ) | safe + image( + url="https://assets.ubuntu.com/v1/4d47a674-gimp-60x43.svg", + alt="Gimp icon", + width="80", + hi_def=True, + loading="lazy", + ) | safe }}
      -
      +
      • +
    • +
      {{ - image( - url="https://assets.ubuntu.com/v1/786ed546-blender.svg", - alt="Blender icon", - height="60", - width="60", - hi_def=True, - attrs={"class": "p-logo-section__logo"}, - loading="lazy" - ) | safe + image( + url="https://assets.ubuntu.com/v1/786ed546-blender.svg", + alt="Blender icon", + width="80", + hi_def=True, + loading="lazy" + ) | safe }}
      -
    -
    + +
    -
    -
    -
    -
    +
    +
    +
    +

    Videos

    -

    Watch HD videos from your browser on Ubuntu, or use the default Movie Player and VLC and OpenShot from the Snap Store. Edit your movies with Shotcut or kdenlive and then watch them in Movie Player.

    -
    +
    +

    Watch HD videos from your browser on Ubuntu, or use the default Movie Player and VLC and OpenShot from the Snap + Store. Edit your movies with Shotcut or kdenlive and then watch them in Movie Player.

    +
    +
    +
    +
    +
    {{ image ( - url="https://assets.ubuntu.com/v1/de158d4e-desktop-22.04-video.jpg", - alt="", - width="1360", - height="768", - hi_def=True, - loading="lazy" - ) | safe + url="https://assets.ubuntu.com/v1/de158d4e-desktop-22.04-video.jpg", + alt="", + width="1360", + height="768", + hi_def=True, + loading="lazy" + ) | safe }}
    -
    -
    -
    -
    -

    Gaming

    -

    From Sudoku to first-person shooters, we've got loads of games that'll keep you busy for hours. There are thousands of games available for Ubuntu, including titles from the Unity and Steam platforms. Pick from critically acclaimed titles such as Dota 2, Kerbal Space Program and Counter Strike: Global Offensive.

    -
    +
    +
    +
    +
    +

    Gaming

    +
    +
    +

    From Sudoku to first-person shooters, we've got loads of games that'll keep you busy for hours. There are + thousands of games available for Ubuntu, including titles from the Unity and Steam platforms. Pick from + critically acclaimed titles such as Dota 2, Kerbal Space Program and Counter Strike: Global Offensive.

    +
    +
    +
    +
    +
    + {{ image ( + url="https://assets.ubuntu.com/v1/1d582338-dota2.jpg", + alt="", + width="1360", + height="768", + hi_def=True, + loading="lazy" + ) | safe + }}
    -
    -
    -
    -
    -

    An open source operating system

    -

    Our code is shared openly throughout the development cycle. We are transparent about our plans for future releases, so as a developer, hardware manufacturer, or OEM, you can work with us to start building Ubuntu applications and systems now.

    +
    +
    +
    +
    +

    An open source operating system

    -
    -

    Backed by Canonical

    -

    Canonical is the global software vendor that provides commercial, design and engineering support to the Ubuntu project. Today, our hardware enablement team supports the pre-installation of Ubuntu on hundreds of laptops and workstations, worldwide.

    -

    Learn more about how we support Ubuntu

    +
    +

    Our code is shared openly throughout the development cycle. We are transparent about our plans for future + releases, so as a developer, hardware manufacturer, or OEM, you can work with us to start building Ubuntu + applications and systems now.

    -{% with first_item="_desktop_get_started", second_item="_professional_support", third_item="_desktop_flavours" %}{% include "shared/contextual_footers/_contextual_footer.html" %}{% endwith %} - +
    +
    +
    +
    +

    Backed by Canonical

    +
    +
    +

    Canonical is the global software vendor that provides commercial, design and engineering support + to the Ubuntu + project. Today, our hardware enablement team supports the pre-installation of Ubuntu on hundreds of laptops and + workstations, worldwide.

    +

    Learn more about how we support + Ubuntu ›

    +
    +
    +
    {% endblock content %} + {% block footer_extra %} -{% endblock footer_extra %} +{% endblock footer_extra %} \ No newline at end of file From 974cf423e31efe19a1a519a1d92737f7becf21b4 Mon Sep 17 00:00:00 2001 From: Akbar Abdrakhmanov Date: Fri, 19 Jan 2024 14:26:14 +0600 Subject: [PATCH 08/33] add Desktop bubble shared footer to /desktop/features --- templates/desktop/features.html | 26 +++++++++++++++++++------- 1 file changed, 19 insertions(+), 7 deletions(-) diff --git a/templates/desktop/features.html b/templates/desktop/features.html index 75f24c5e158..9cb9300d4d4 100755 --- a/templates/desktop/features.html +++ b/templates/desktop/features.html @@ -211,7 +211,7 @@

    Office software

    {{ image( url="https://assets.ubuntu.com/v1/7f84bfa4-Jellyfish.png", - alt="Ubuntu desktop", + alt="", width="1000", hi_def=True, loading="lazy", @@ -220,7 +220,7 @@

    Office software

    {{ image( url="https://assets.ubuntu.com/v1/3ed8eec4-desktop-22.04-libre.png", - alt="Stacked Office software windows", + alt="", width="1000", hi_def=True, loading="lazy", @@ -248,7 +248,7 @@

    Web browsing

    {{ image( url="https://assets.ubuntu.com/v1/7f84bfa4-Jellyfish.png", - alt="Ubuntu desktop", + alt="", width="1000", hi_def=True, loading="lazy", @@ -257,7 +257,7 @@

    Web browsing

    {{ image( url="https://assets.ubuntu.com/v1/b0cbd8b1-firefox-raspberrypi.png", - alt="Web browser window", + alt="", width="1000", hi_def=True, loading="lazy", @@ -286,7 +286,7 @@

    Email

    {{ image( url="https://assets.ubuntu.com/v1/7f84bfa4-Jellyfish.png", - alt="Ubuntu desktop", + alt="", width="1000", hi_def=True, loading="lazy", @@ -295,7 +295,7 @@

    Email

    {{ image( url="https://assets.ubuntu.com/v1/f55b4bed-desktop-22.04-email.jpg", - alt="Email client application window", + alt="", width="1000", hi_def=True, loading="lazy", @@ -344,7 +344,16 @@

    Organise your photos

    - + {{ + image( + url="https://assets.ubuntu.com/v1/1aef005e-desktop-22.04-photos.jpg", + alt="", + width="1360", + height="768", + hi_def=True, + loading="lazy", + ) | safe + }}
    @@ -487,6 +496,9 @@

    Backed by Canonical

    + +{% include "shared/contextual_footers/_desktop.html" %} + {% endblock content %} {% block footer_extra %} From 10f60001f4fe0fe0b486cb72db7908cbbeb0d384 Mon Sep 17 00:00:00 2001 From: Akbar Abdrakhmanov Date: Fri, 19 Jan 2024 18:29:04 +0600 Subject: [PATCH 09/33] fix scss linting issue in _pattern_strip-photos --- static/sass/_pattern_strip-photos.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/sass/_pattern_strip-photos.scss b/static/sass/_pattern_strip-photos.scss index e19a3f1f5b7..19af06b6851 100644 --- a/static/sass/_pattern_strip-photos.scss +++ b/static/sass/_pattern_strip-photos.scss @@ -12,11 +12,11 @@ @media only screen and (min-width: $breakpoint-medium) { background-color: rgba(0, 0, 0, 0.6); bottom: 10px; - right: 10px; color: $color-light; margin-top: -$sp-xxx-large; padding: $sp-small; position: absolute; + right: 10px; } } From dd7eaaf0e2c9ead862a9ba60e512ad4dbe400556 Mon Sep 17 00:00:00 2001 From: Akbar Abdrakhmanov Date: Mon, 22 Jan 2024 10:59:10 +0600 Subject: [PATCH 10/33] fix layout of Photos and Apps sections of /desktop/features --- static/sass/_pattern_strip-photos.scss | 7 ++++ templates/desktop/features.html | 49 +++++++++++++++----------- 2 files changed, 35 insertions(+), 21 deletions(-) diff --git a/static/sass/_pattern_strip-photos.scss b/static/sass/_pattern_strip-photos.scss index 19af06b6851..aec57ebb7e7 100644 --- a/static/sass/_pattern_strip-photos.scss +++ b/static/sass/_pattern_strip-photos.scss @@ -1,5 +1,11 @@ @mixin ubuntu-p-strip-photos { .p-strip-photos { + display: none; + + @media only screen and (min-width: $breakpoint-medium) { + display: block; + } + &__container { height: 25px; @media only screen and (min-width: $breakpoint-medium) { @@ -13,6 +19,7 @@ background-color: rgba(0, 0, 0, 0.6); bottom: 10px; color: $color-light; + display: block; margin-top: -$sp-xxx-large; padding: $sp-small; position: absolute; diff --git a/templates/desktop/features.html b/templates/desktop/features.html index 9cb9300d4d4..7a9e0ef96b7 100755 --- a/templates/desktop/features.html +++ b/templates/desktop/features.html @@ -52,12 +52,12 @@

    A whole world of apps

    -
    +
    -
    +
    {{ image( - url="https://assets.ubuntu.com/v1/c9be8d47-Spotify_logo_without_text.svg", + url="https://assets.ubuntu.com/v1/9917aba6-spotify-linux-256.png", alt="Spotify icon", height="32", width="32", @@ -68,7 +68,8 @@

    A whole world of apps

    Spotify

    Play and stream your favourite songs, playlists and albums for free with Spotify.

    -
    +
    +
    {{ image( url="https://assets.ubuntu.com/v1/4bb576dc-bitwarden.svg", @@ -82,7 +83,9 @@

    SpotifyBitwarden

    A secure and free password manager for all of your devices.

    -
    +
    +
    +
    {{ image( url="https://assets.ubuntu.com/v1/7b460167-vlc-icon.png", @@ -96,13 +99,12 @@

    Bitward

    VLC player

    No other video player is compatible with as many different file formats.

    -
    -
    -
    -
    +
    +
    +
    {{ image( - url="https://assets.ubuntu.com/v1/a45d30aa-vf.io-firefox.svg", + url="https://assets.ubuntu.com/v1/8daf0eb5-firefox_logo.png", alt="Firefox icon", height="32", width="32", @@ -111,9 +113,11 @@

    VLC playerFirefox

    -

    Firefox Quantum is now 2x faster and 30% lighter than Chrome.

    +

    A powerful, extensible web browser with support for modern web application technologies.

    -
    +
    +
    +
    {{ image( url="https://assets.ubuntu.com/v1/8a2851df-slack-icon-vanilla.svg", @@ -127,7 +131,8 @@

    FirefoxSlack

    Team communication and collaboration in one place so you can get more done.

    -
    +
    +
    {{ image( url="https://assets.ubuntu.com/v1/822c49e2-Visual+Studio+Code+logo.svg", @@ -142,13 +147,12 @@

    Visual Studi

    VS Code combines the simplicity of a code editor with what developers need for the edit-build-debug cycle.

    -
    -
    -
    -
    +
    +
    +
    {{ image( - url="https://assets.ubuntu.com/v1/171fcf42-Chromium_11_Logo.svg", + url="https://assets.ubuntu.com/v1/5aeafc59-Chromium_Logo.svg", alt="Chromium icon", height="32", width="32", @@ -159,7 +163,8 @@

    Visual Studi

    Chromium

    A fast, simple and secure web browser, built for the modern web.

    -
    +
    +
    {{ image( url="https://assets.ubuntu.com/v1/4ecb4f50-PyCharm_Logo.svg", @@ -173,7 +178,9 @@

    Chromium

    PyCharm

    PyCharm provides all the tools you need for productive Python coding.

    -
    +
    +
    +
    {{ image( url="https://assets.ubuntu.com/v1/3f3a15ef-logo-telegram.svg", @@ -323,7 +330,7 @@

    Photos

    - +
    From 5125ea32b23bc90b69c2b6c2d6d961be0537f6c8 Mon Sep 17 00:00:00 2001 From: Akbar Abdrakhmanov Date: Tue, 23 Jan 2024 09:36:06 +0600 Subject: [PATCH 11/33] position apps icons differently on small and medium screen --- templates/desktop/features.html | 333 +++++++++++++++++++------------- 1 file changed, 202 insertions(+), 131 deletions(-) diff --git a/templates/desktop/features.html b/templates/desktop/features.html index 7a9e0ef96b7..93c0a96c9ee 100755 --- a/templates/desktop/features.html +++ b/templates/desktop/features.html @@ -54,149 +54,220 @@

    A whole world of apps

    -
    - {{ - image( - url="https://assets.ubuntu.com/v1/9917aba6-spotify-linux-256.png", - alt="Spotify icon", - height="32", - width="32", - hi_def=True, - attrs={"class": "u-vertically-center"}, - ) | safe - }} -

    Spotify

    -

    Play and stream your favourite songs, playlists and albums for free with Spotify.

    +
    +
    +
    +
    + {{ + image( + url="https://assets.ubuntu.com/v1/9917aba6-spotify-linux-256.png", + alt="Spotify icon", + height="32", + width="32", + hi_def=True, + ) | safe + }} +
    +
    +
    +

    Spotify

    +

    Play and stream your favourite songs, playlists and albums for free with Spotify.

    +
    +
    -
    -
    - {{ - image( - url="https://assets.ubuntu.com/v1/4bb576dc-bitwarden.svg", - alt="Bitwarden icon", - height="32", - width="32", - hi_def=True, - attrs={"class": "u-vertically-center"}, - ) | safe - }} -

    Bitwarden

    -

    A secure and free password manager for all of your devices.

    +
    +
    +
    +
    +
    + {{ + image( + url="https://assets.ubuntu.com/v1/4bb576dc-bitwarden.svg", + alt="Bitwarden icon", + height="32", + width="32", + hi_def=True, + attrs={"class": "u-vertically-center"}, + ) | safe + }} +
    +
    +
    +

    Bitwarden

    +

    A secure and free password manager for all of your devices.

    +
    +
    -
    -
    -
    - {{ - image( - url="https://assets.ubuntu.com/v1/7b460167-vlc-icon.png", - alt="VLC icon", - height="32", - width="32", - hi_def=True, - attrs={"class": "u-vertically-center"}, - ) | safe - }} -

    VLC player

    -

    No other video player is compatible with as many different file formats.

    +
    +
    +
    +
    +
    + {{ + image( + url="https://assets.ubuntu.com/v1/7b460167-vlc-icon.png", + alt="VLC icon", + height="32", + width="32", + hi_def=True, + attrs={"class": "u-vertically-center"}, + ) | safe + }} +
    +
    +
    +

    VLC player

    +

    No other video player is compatible with as many different file formats.

    +
    +
    -
    -
    -
    - {{ - image( - url="https://assets.ubuntu.com/v1/8daf0eb5-firefox_logo.png", - alt="Firefox icon", - height="32", - width="32", - hi_def=True, - attrs={"class": "u-vertically-center"}, - ) | safe - }} -

    Firefox

    -

    A powerful, extensible web browser with support for modern web application technologies.

    +
    +
    -
    -
    -
    - {{ - image( - url="https://assets.ubuntu.com/v1/8a2851df-slack-icon-vanilla.svg", - alt="Slack icon", - height="32", - width="32", - hi_def=True, - attrs={"class": "u-vertically-center"}, - ) | safe - }} -

    Slack

    -

    Team communication and collaboration in one place so you can get more done.

    +
    +
    +
    +
    + {{ + image( + url="https://assets.ubuntu.com/v1/8daf0eb5-firefox_logo.png", + alt="Firefox icon", + height="32", + width="32", + hi_def=True, + attrs={"class": "u-vertically-center"}, + ) | safe + }} +
    +
    +
    +

    Firefox

    +

    A powerful, extensible web browser with support for modern web application technologies.

    +
    +
    -
    -
    - {{ - image( - url="https://assets.ubuntu.com/v1/822c49e2-Visual+Studio+Code+logo.svg", - alt="Visual Studio Code icon", - height="32", - width="32", - hi_def=True, - attrs={"class": "u-vertically-center"}, - ) | safe - }} -

    Visual Studio Code

    -

    VS Code combines the simplicity of a code editor with what developers need for the edit-build-debug - cycle.

    +
    +
    +
    +
    +
    + {{ + image( + url="https://assets.ubuntu.com/v1/8a2851df-slack-icon-vanilla.svg", + alt="Slack icon", + height="32", + width="32", + hi_def=True, + attrs={"class": "u-vertically-center"}, + ) | safe + }} +
    +
    +
    +

    Slack

    +

    Team communication and collaboration in one place so you can get more done.

    +
    +
    -
    -
    -
    - {{ - image( - url="https://assets.ubuntu.com/v1/5aeafc59-Chromium_Logo.svg", - alt="Chromium icon", - height="32", - width="32", - hi_def=True, - attrs={"class": "u-vertically-center"}, - ) | safe - }} -

    Chromium

    -

    A fast, simple and secure web browser, built for the modern web.

    +
    +
    +
    +
    +
    + {{ + image( + url="https://assets.ubuntu.com/v1/822c49e2-Visual+Studio+Code+logo.svg", + alt="Visual Studio Code icon", + height="32", + width="32", + hi_def=True, + attrs={"class": "u-vertically-center"}, + ) | safe + }} +
    +
    +
    +

    Visual Studio Code

    +

    VS Code combines the simplicity of a code editor with what developers need for the edit-build-debug + cycle.

    +
    +
    -
    -
    - {{ - image( - url="https://assets.ubuntu.com/v1/4ecb4f50-PyCharm_Logo.svg", - alt="PyCharm icon", - height="32", - width="32", - hi_def=True, - attrs={"class": "u-vertically-center"}, - ) | safe - }} -

    PyCharm

    -

    PyCharm provides all the tools you need for productive Python coding.

    +
    +
    -
    -
    -
    - {{ - image( - url="https://assets.ubuntu.com/v1/3f3a15ef-logo-telegram.svg", - alt="Telegram icon", - height="32", - width="32", - hi_def=True, - attrs={"class": "u-vertically-center"}, - ) | safe - }} -

    Telegram

    -

    A fast and secure desktop messaging app, perfectly synced with your mobile phone.

    +
    +
    +
    +
    + {{ + image( + url="https://assets.ubuntu.com/v1/5aeafc59-Chromium_Logo.svg", + alt="Chromium icon", + height="32", + width="32", + hi_def=True, + attrs={"class": "u-vertically-center"}, + ) | safe + }} +
    +
    +
    +

    Chromium

    +

    A fast, simple and secure web browser, built for the modern web.

    +
    +
    +
    +
    +
    +
    +
    +
    + {{ + image( + url="https://assets.ubuntu.com/v1/4ecb4f50-PyCharm_Logo.svg", + alt="PyCharm icon", + height="32", + width="32", + hi_def=True, + attrs={"class": "u-vertically-center"}, + ) | safe + }} +
    +
    +
    +

    PyCharm

    +

    PyCharm provides all the tools you need for productive Python coding.

    +
    +
    +
    +
    +
    +
    +
    +
    + {{ + image( + url="https://assets.ubuntu.com/v1/3f3a15ef-logo-telegram.svg", + alt="Telegram icon", + height="32", + width="32", + hi_def=True, + attrs={"class": "u-vertically-center"}, + ) | safe + }} +
    +
    +
    +

    Telegram

    +

    A fast and secure desktop messaging app, perfectly synced with your mobile phone.

    +
    +
    +
    From fd350e533f176cb0ee6543401f9908f8195df6e1 Mon Sep 17 00:00:00 2001 From: Akbar Abdrakhmanov Date: Tue, 23 Jan 2024 15:23:15 +0600 Subject: [PATCH 12/33] replace strip with section in Apps section --- templates/desktop/features.html | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/templates/desktop/features.html b/templates/desktop/features.html index 93c0a96c9ee..d1ca5cb925a 100755 --- a/templates/desktop/features.html +++ b/templates/desktop/features.html @@ -20,20 +20,22 @@
    -
    -
    -
    -

    Features

    -

    Enjoy the simplicity of Ubuntu's intuitive interface. Fast, secure and with
    thousands of apps to choose from — for everything you want to do,
    Ubuntu has what you need.

    -
    -

    Download Ubuntu

    +
    +
    +
    +
    +

    Features

    +

    Enjoy the simplicity of Ubuntu's intuitive interface. Fast, secure and with
    thousands of apps to choose from — for everything you want to do,
    Ubuntu has what you need.

    +
    +

    Download Ubuntu

    +
    -
    +
    From e94e4d6a2f4412356f19fc23d046f365f82996c7 Mon Sep 17 00:00:00 2001 From: Akbar Abdrakhmanov Date: Tue, 23 Jan 2024 15:52:33 +0600 Subject: [PATCH 13/33] remove redundant first column when using row--25-75 --- templates/desktop/features.html | 9 --------- 1 file changed, 9 deletions(-) diff --git a/templates/desktop/features.html b/templates/desktop/features.html index d1ca5cb925a..b8c045d1214 100755 --- a/templates/desktop/features.html +++ b/templates/desktop/features.html @@ -22,7 +22,6 @@
    -

    Features

    Enjoy the simplicity of Ubuntu's intuitive interface. Fast, secure and with
    A whole world of apps

    -
    @@ -286,7 +284,6 @@

    Office software

    -
    {{ image( @@ -323,7 +320,6 @@

    Web browsing

    -
    {{ image( @@ -361,7 +357,6 @@

    Email

    -
    {{ image( @@ -399,7 +394,6 @@

    Photos

    -
    @@ -422,7 +416,6 @@

    Organise your photos

    -
    {{ image( @@ -503,7 +496,6 @@

    Videos

    -
    {{ image ( url="https://assets.ubuntu.com/v1/de158d4e-desktop-22.04-video.jpg", @@ -531,7 +523,6 @@

    Gaming

    -
    {{ image ( url="https://assets.ubuntu.com/v1/1d582338-dota2.jpg", From d8b468d39609e27c801ef0e835436b6429bc1598 Mon Sep 17 00:00:00 2001 From: Akbar Abdrakhmanov Date: Wed, 24 Jan 2024 09:41:35 +0600 Subject: [PATCH 14/33] replace px with rem in styles of /desktop/features --- static/sass/_pattern_strip-photos.scss | 6 +++--- templates/desktop/features.html | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/static/sass/_pattern_strip-photos.scss b/static/sass/_pattern_strip-photos.scss index aec57ebb7e7..2ad03cc65fa 100644 --- a/static/sass/_pattern_strip-photos.scss +++ b/static/sass/_pattern_strip-photos.scss @@ -7,7 +7,7 @@ } &__container { - height: 25px; + height: 1.6rem; @media only screen and (min-width: $breakpoint-medium) { margin-bottom: 10.6rem; margin-top: 10.6rem; @@ -17,13 +17,13 @@ &__credit { @media only screen and (min-width: $breakpoint-medium) { background-color: rgba(0, 0, 0, 0.6); - bottom: 10px; + bottom: 0.6rem; color: $color-light; display: block; margin-top: -$sp-xxx-large; padding: $sp-small; position: absolute; - right: 10px; + right: 0.6rem; } } diff --git a/templates/desktop/features.html b/templates/desktop/features.html index b8c045d1214..264046913d2 100755 --- a/templates/desktop/features.html +++ b/templates/desktop/features.html @@ -116,7 +116,7 @@

    Bitward

    -

    VLC player

    +

    VLC

    No other video player is compatible with as many different file formats.

    From d3b83ec61ce5f29d32b41cc216db89b4dec5a3cb Mon Sep 17 00:00:00 2001 From: Peter French Date: Thu, 25 Jan 2024 19:10:26 +0100 Subject: [PATCH 15/33] Refresh desktop/developers (#13491) * Refresh /desktop/developers * Make the linter not sad * Apply review changes * Update logos * Apply final suggestions from UX review --- static/sass/styles.scss | 36 + .../about/release_cycles/ubuntu-eol.html | 6 +- templates/desktop/developers.html | 989 +++++++++--------- 3 files changed, 523 insertions(+), 508 deletions(-) diff --git a/static/sass/styles.scss b/static/sass/styles.scss index 290352921e8..db3c18fa1b5 100644 --- a/static/sass/styles.scss +++ b/static/sass/styles.scss @@ -1435,6 +1435,35 @@ $color-link-dark: #69c !default; } } +.p-icon-section--dense { + @extend .p-icon-section; + + .p-icon-section__items { + line-height: 2rem; + row-gap: calc(1rem + 1vw); + + @media screen and (max-width: $breakpoint-large - 1) { + row-gap: 1.5rem; + } + } + + .p-icon-section__item { + margin-right: 2.5rem; + + @media screen and (max-width: $breakpoint-small - 1) { + margin-right: 1rem; + } + } + + .p-icon-section__icon { + height: 3.75rem; + + @media screen and (max-width: $breakpoint-large - 1) { + height: 3rem; + } + } +} + // XXX: MPT: Can be removed once this is fixed in Vanilla // https://github.com/canonical/vanilla-framework/pull/4950 .desktop-footer { @@ -1455,3 +1484,10 @@ $color-link-dark: #69c !default; } } } + +// XXX: Pete F: Can be removed once this is fixed in Vanilla +// https://github.com/canonical/vanilla-framework/issues/4955 +hr.is-extra-muted { + background-color: rgba(0, 0, 0, 0.1); + opacity: 0.5; +} diff --git a/templates/about/release_cycles/ubuntu-eol.html b/templates/about/release_cycles/ubuntu-eol.html index bd413012072..370f023dcd4 100644 --- a/templates/about/release_cycles/ubuntu-eol.html +++ b/templates/about/release_cycles/ubuntu-eol.html @@ -1,7 +1,9 @@
    -

    Ubuntu releases

    -
    +

    Ubuntu releases

    + +
    + {% include "about/release_cycles/releases-table.html" %}
    \ No newline at end of file diff --git a/templates/desktop/developers.html b/templates/desktop/developers.html index 8067fa295d9..40137bfcd10 100755 --- a/templates/desktop/developers.html +++ b/templates/desktop/developers.html @@ -1,658 +1,635 @@ {% extends "desktop/base_desktop.html" %} {% block title %}Desktop for developers{% endblock %} + {% block meta_description %}Learn why Ubuntu is the ideal platform for developers.{% endblock %} -{% block meta_copydoc %}https://docs.google.com/document/d/1VJ3xT2ViC-CvL0UmsAUzpYFmvpuqUP4AbpnlPm8tqOA{% endblock -meta_copydoc %} + +{% block meta_copydoc %}https://docs.google.com/document/d/1VJ3xT2ViC-CvL0UmsAUzpYFmvpuqUP4AbpnlPm8tqOA/edit{% endblock meta_copydoc %} + +{% block body_class %}is-paper{% endblock body_class %} {% block content %} - -
    -
    -
    -

    Ubuntu Desktop for developers

    -

    Whether you're an app or web developer, engineering manager, data scientist, or AI/ML researcher — Ubuntu - is your ideal workstation.

    -

    Get Ubuntu now

    +
    +
    +
    +
    +

    Ubuntu Desktop
    for developers

    + +
    +
    +

    Whether you're an app or web developer, engineering manager, data scientist, or AI/ML researcher — Ubuntu is your ideal workstation.

    + Get Ubuntu now +
    -
    +
    +
    +
    {{ image ( - url="https://assets.ubuntu.com/v1/676d7b5d-xs9320nt-xnb-shot-15-2-sl-min.png", - alt="", - width="3677", - height="2589", - hi_def=True, - loading="auto" - ) | safe + url="https://assets.ubuntu.com/v1/1819c545-woman-working.jpg", + alt="", + width="2464", + height="1052", + hi_def=True, + loading="auto" + ) | safe }}
    -
    -
    -

    Why choose Ubuntu for Desktop?

    -
    -
    -
    -

    The developers’ choice -

    +
    +
    +
    +
    +

    Why choose Ubuntu Desktop?

    +

    The developers' choice

    -
    -
      -
    • Using Ubuntu Desktop provides a common platform for development, test, and - production environments. -
      • -
    • Tools, such as Juju, Microk8s, and Multipass make - developing, testing, and cross-building easy and affordable. -
      • -
    • Long term support (LTS) releases are delivered every - 2-years, with 5 years of standard support extended to 10 years with an Ubuntu Pro Desktop subscription. -
      • -
    • New Developer editions of Ubuntu Desktop are released every 6-months, with - 9-months of support and access to the latest kernel, libraries, and new upstream OS features.
      • +
      +
      + {{ + image ( + url="https://assets.ubuntu.com/v1/7f76ac3a-hp-laptop-studio-jammy.png", + alt="", + width="1659", + height="1246", + hi_def=True, + loading="lazy" + ) | safe + }} +
      +
      +
        +
      • Using Ubuntu Desktop provides a common platform for development, test, and production environments.
        • +
      • Tools, such as Juju, Microk8s, and Multipass make developing, testing, and cross-building easy and affordable.
        • +
      • Long term support (LTS) releases are delivered every 2-years, with 5 years of standard support extended to 10 years with an Ubuntu Pro Desktop subscription.
        • +
      • New Developer editions of Ubuntu Desktop are released every 6-months, with 9-months of support and access to the latest kernel, libraries, and new upstream OS features.
      -

      - The Ubuntu release cycle › -

      -
      +
      + The Ubuntu release cycle ›
    -
    +
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
     ReleasedEnd of Standard SupportEnd of Life
    14.04 LTS (Trusty Tahr)Apr 2014Apr 2019Apr 2024
    16.04 LTS (Xenial Xerus)Apr 2016Apr 2021Apr 2026
    18.04 LTS (Bionic Beaver)Apr 2018Apr 2023Apr 2028
    20.04 LTS (Focal Fossa)Apr 2020Apr 2025Apr 2030
    22.04 LTS (Jammy Jellyfish)Apr 2022Apr 2027Apr 2032
    23.04 (Lunar Lobster)Apr 2023Jan 2024
    23.10 (Mantic Minotaur)Oct 2023Jul 2024
    +
    +
    +
    +
    +

    Security support
    for Ubuntu releases

    -
    +
    + {% include "about/release_cycles/releases-table.html" %}
    -
    -
    -
    -
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/1d1d6362-AI_sml.svg", - alt="", - width="288", - height="288", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe - }} -
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/1bc694f0-nvidia-cuda-logo.png", - alt="", - width="288", - height="288", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe - }} -
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/eea32cc5-jupyter-logo.png", - alt="", - width="288", - height="288", +
    + +
    +
    +
    +
    +

    Access to cutting-edge hardware and software

    +
    +
    +
      +
    • Ubuntu ships with the latest toolchains for Python, Rust, Ruby, Go, PHP and Perl, and users get first access to the latest updates for key libraries and packages.
      • +
    • Ubuntu is the OS of choice for data science and machine learning, with support for popular frameworks like OpenCV, TensorFlow, Keras, PyTorch and Kubeflow.
      • +
    • Ubuntu is the target platform for the NVIDIA data science stack, which enables GPU accelerated data science workloads to be run locally before deploying to the cloud.
      • +
    +
    + How Ubuntu enables AI innovation › +
    +
    +
    +
    +
    +
    + {{ image ( + url="https://assets.ubuntu.com/v1/1bc694f0-nvidia-cuda-logo.png", + alt="nvidia cuda logo", + width="288", + height="288", + hi_def=True, + loading="lazy", + attrs={"class": "p-logo-section__logo"} + ) | safe + }} +
    +
    + {{ image ( + url="https://assets.ubuntu.com/v1/e332a639-jupyter-logo.png", + alt="juptyer logo", + width="129", + height="256", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} ) | safe - }} -
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/462ef9f5-keras-logo.png", - alt="", - width="288", - height="288", + }} +
    +
    + {{ image ( + url="https://assets.ubuntu.com/v1/1652445f-keras-logo.png", + alt="keras logo", + width="277", + height="384", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} ) | safe - }} -
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/c1fd7abe-scikit-learn-logo.png", - alt="", - width="288", - height="288", + }} +
    +
    + {{ image ( + url="https://assets.ubuntu.com/v1/fbb20c33-scikit-logo.png", + alt="scikit logo", + width="233", + height="257", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} ) | safe - }} -
    -
    - {{ image ( + }} +
    +
    + {{ image ( url="https://assets.ubuntu.com/v1/57dd2115-TensorFlow-logo.svg", - alt="", + alt="tensor flow logo", width="145", height="145", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} ) | safe - }} -
    -
    - {{ image ( + }} +
    +
    + {{ image ( url="https://assets.ubuntu.com/v1/f41c87c6-pytorch-logo.png", - alt="", + alt="pytorch logo", width="288", height="288", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} ) | safe - }} -
    + }}
    -
    -

    Access to cutting-edge hardware and software

    -
      -
    • Ubuntu ships with the latest toolchains for Python, Rust, Ruby, Go, PHP and - Perl, and users get first access to the latest updates for key libraries and packages.
      • -
    • Ubuntu is the OS of choice for data science and machine learning, with - support for popular frameworks like OpenCV, TensorFlow, Keras, PyTorch and Kubeflow.
      • -
    • Ubuntu is the target platform for the NVIDIA data science stack, which enables GPU - accelerated data science workloads to be run locally before deploying to the cloud.
      • -
    -

    - How Ubuntu enables AI innovation › -

    -
    -
    -
    -
    -
    -
    -

    A rich ecosystem

    -
      -
    • With a Snap Store of over 7,000 - applications in addition to the Ubuntu repository, it's easy to tailor Ubuntu desktop to your needs.
      • -
    • Development tools include Visual Studio Code, IntelliJ, GitKraken, Unity and - Blender.
      • -
    • Office productivity tools include Slack, Microsoft Teams, Dropbox, and Zoom - as well as the Microsoft-compatible LibreOffice.
      • -
    • Media, gaming, and content creation apps include Spotify, Steam, Discord and - OBS Studio.
      • +
    + +
    +
    +
    +
    +

    A rich ecosystem

    +
    +
    +
      +
    • With a Snap Store of over 7,000 applications in addition to the Ubuntu repository, it's easy to tailor Ubuntu desktop to your needs.
      • +
    • Development tools include Visual Studio Code, IntelliJ, GitKraken, Unity and Blender.
      • +
    • Office productivity tools include Slack, Microsoft Teams, Dropbox, and Zoom as well as the Microsoft-compatible LibreOffice.
      • +
    • Media, gaming, and content creation apps include Spotify, Steam, Discord and OBS Studio.
    -

    - Learn more about Snapcraft › -

    +
    + Learn more about Snapcraft ›
    -
    -
    -
    +
    +
    +
    + {{ + image ( + url="https://assets.ubuntu.com/v1/034147e9-code_ozwVHSV.png", + alt="VSCode", + width="256", + height="256", + hi_def=True, + loading="lazy", + attrs={"class": "p-icon-section__icon"}, + ) | safe + }} +
    +
    {{ image ( - url="https://assets.ubuntu.com/v1/a8d0ab5b-slack-logo.png", - alt="", - width="288", - height="288", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe + url="https://assets.ubuntu.com/v1/11d81b4e-IntelliJ_IDEA_Logo.svg", + alt="intelli J idea logo", + width="256", + height="256", + hi_def=True, + loading="lazy", + attrs={"class": "p-icon-section__icon"} + ) | safe }}
    -
    +
    {{ image ( - url="https://assets.ubuntu.com/v1/e850e108-dropbox-logo.png", - alt="", - width="288", - height="288", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe + url="https://assets.ubuntu.com/v1/fbce8950-git-kraken.png", + alt="git kraken logo", + width="62", + height="63", + hi_def=True, + loading="lazy", + attrs={"class": "p-icon-section__icon"} + ) | safe }}
    -
    +
    {{ image ( - url="https://assets.ubuntu.com/v1/df56b8a5-libreoffice-logo.png", - alt="", - width="288", - height="288", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe + url="https://assets.ubuntu.com/v1/f0bd491c-blender.png", + alt="blender logo", + width="512", + height="512", + hi_def=True, + loading="lazy", + attrs={"class": "p-icon-section__icon"} + ) | safe }}
    -
    +
    {{ image ( - url="https://assets.ubuntu.com/v1/c7dae67a-zoom-logo.png", - alt="", - width="288", - height="288", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe + url="https://assets.ubuntu.com/v1/aadb53b3-unity-seeklogo.com.svg", + alt="unity seek logo", + width="249", + height="256", + hi_def=True, + loading="lazy", + attrs={"class": "p-icon-section__icon"} + ) | safe }}
    -
    +
    {{ image ( - url="https://assets.ubuntu.com/v1/2abedabb-google-chrome-logo.png", - alt="", - width="288", - height="288", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe + url="https://assets.ubuntu.com/v1/8a2851df-slack-icon-vanilla.svg", + alt="slack logo", + width="256", + height="256", + hi_def=True, + loading="lazy", + attrs={"class": "p-icon-section__icon"} + ) | safe }}
    -
    +
    {{ image ( - url="https://assets.ubuntu.com/v1/60c97798-unity-logo.png", - alt="", - width="288", - height="288", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe + url="https://assets.ubuntu.com/v1/8f85ef3f-microsoft-teams.png", + alt="microsoft teams logo", + width="512", + height="512", + hi_def=True, + loading="lazy", + attrs={"class": "p-icon-section__icon"} + ) | safe }}
    -
    +
    {{ image ( - url="https://assets.ubuntu.com/v1/b8c1f574-intellij-logo.png", - alt="", - width="288", - height="288", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe + url="https://assets.ubuntu.com/v1/6e5fe7ef-logo-dropbox.svg", + alt="dropbox logo", + width="184", + height="174", + hi_def=True, + loading="lazy", + attrs={"class": "p-icon-section__icon"} + ) | safe }}
    -
    +
    {{ image ( - url="https://assets.ubuntu.com/v1/3294f6e8-vs-code-logo.png", - alt="", - width="288", - height="288", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe + url="https://assets.ubuntu.com/v1/ceca3817-zoom-app.svg", + alt="zoom logo", + width="2500", + height="2500", + hi_def=True, + loading="lazy", + attrs={"class": "p-icon-section__icon"} + ) | safe }}
    -
    +
    {{ image ( - url="https://assets.ubuntu.com/v1/982a200a-blender-notext-logo.png", - alt="", - width="288", - height="288", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe + url="https://assets.ubuntu.com/v1/be731535-Logo-libreoffice.svg", + alt="libre office logo", + width="219", + height="264", + hi_def=True, + loading="lazy", + attrs={"class": "p-icon-section__icon"} + ) | safe }}
    -
    +
    + {{ + image ( + url="https://assets.ubuntu.com/v1/9917aba6-spotify-linux-256.png", + alt="Spotify logo", + width="256", + height="256", + hi_def=True, + loading="lazy", + attrs={"class": "p-icon-section__icon"}, + ) | safe + }} +
    +
    {{ image ( - url="https://assets.ubuntu.com/v1/aa55fac4-microsoft-teams-logo.png", - alt="", - width="288", - height="288", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe + url="https://assets.ubuntu.com/v1/ff5561bc-steam.png", + alt="steam logo", + width="61", + height="62", + hi_def=True, + loading="lazy", + attrs={"class": "p-icon-section__icon"} + ) | safe }}
    -
    -
    +
    + +
    +
    +
    +
    +

    Certified hardware

    +
    +
    +
      +
    • Streamline deployment of Ubuntu Desktop with certified hardware from OEMs including Dell, Lenovo, and HP – no additional configuration required.
      • +
    • Ubuntu performs out of the box across a wide range of laptops, desktops, and workstations, including the HP Z series and Dell XPS and Precision lines.
      • +
    • Strategic partnerships extend to component manufacturers and Ubuntu is certified to work with the full range of NVIDIA GPUs.
      • +
    +
    + Ubuntu certified hardware › +
    -
    -
    -
    -
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/11814428-hp-logo.png", - alt="Hewlett Packard", - width="288", - height="288", +
    +
    +
    +
    + {{ image ( + url="https://assets.ubuntu.com/v1/4b74a5f4-hp-logo.png", + alt="hp logo", + width="110", + height="256", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} ) | safe - }} -
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/c70b529e-lenovo-logo.png", - alt="Lenovo", - width="288", - height="288", + }} +
    +
    + {{ image ( + url="https://assets.ubuntu.com/v1/a34e318a-lenovo-logo.svg", + alt="lenovo logo", + width="105", + height="144", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} ) | safe - }} -
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/987acdaa-dell-logo.png", - alt="Dell", - width="288", - height="288", + }} +
    +
    + {{ image ( + url="https://assets.ubuntu.com/v1/fe17c507-dell-logo.svg", + alt="dell logo", + width="71", + height="144", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} ) | safe - }} -
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/6079d02b-amd-logo.png", - alt="AMD", - width="288", - height="288", + }} +
    +
    + {{ image ( + url="https://assets.ubuntu.com/v1/dac5c9d7-amd-logo.png", + alt="amd logo", + width="186", + height="257", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} ) | safe - }} -
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/67f81bfe-intel-new-logo.png", - alt="Intel", - width="288", + }} +
    +
    + {{ image ( + url="https://assets.ubuntu.com/v1/834d57ab-intel-logo.png", + alt="intel logo", + width="149", height="288", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} ) | safe - }} -
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/711be910-arm-logo.png", - alt="ARM", - width="288", - height="288", + }} +
    +
    + {{ image ( + url="https://assets.ubuntu.com/v1/d9d05f49-arm-logo.png", + alt="arm logo", + width="183", + height="372", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} ) | safe - }} -
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/cd765ccc-nvidia-logo.png", - alt="Nvidia", - width="288", - height="288", + }} +
    +
    + {{ image ( + url="https://assets.ubuntu.com/v1/49c503f5-nvidia-logo.png", + alt="nvidia logo", + width="254", + height="257", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} ) | safe - }} -
    + }}
    -
    -

    Certified hardware

    -
      -
    • Streamline deployment of Ubuntu Desktop with certified - hardware from OEMs including Dell, Lenovo, and HP — no additional configuration required.
      • -
    • Ubuntu performs out of the box across a wide range of laptops, desktops, and - workstations, including the HP Z series and Dell XPS and Precision lines.
      • -
    • Strategic partnerships extend to component - manufacturers and Ubuntu is certified to work with the full range of NVIDIA GPUs.
      • -
    -

    - Ubuntu certified hardware › -

    -
    -
    -
    -
    -

    What's new in Ubuntu {{ releases.latest.short_version }}

    -
    -
    -
    -
      -
    • Linux 6.5 kernel
      • -
    • GNOME 45 desktop environment
      • -
    • New App Center for improved application discovery and management
      • -
    • Support for Active Directory certificate auto-enrollment in ADsys
      • -
    • Experimental support for hardware-backed full-disc encryption
      • -
    • Experimental support for guided ZFS install
      • -
    • Support for Raspberry Pi 5
      • -
    • Network Manager now uses Netplan as its default settings storage backend
      • -
    -
    -
    -

    Read the full release notes ›

    -
    -
    -
    -
    -
    -

    What's new in Ubuntu {{ releases.lts.short_version }}

    -
    -
    -
    -
      -
    • Linux 5.15 kernel
      • -
    • New Ubuntu theme with accent colors, improved integration for snaps and - system-wide dark style preference support
      • -
    • GNOME Shell and most GNOME libraries updated to the 42 release -
        -
      • Streamlined user interface and workspace transitions
        • -
      • Compact and modern on-screen display notifications
        • -
      • New screenshot/screen recording interface
        • -
      • New power profile selection
        • -
      • Improved multi-monitor support
        • -
      -
      • -
    • GNOME desktop performance improvements -
        -
      • Up to 2x improvement in frame rates with Intel and Raspberry Pi graphics drivers
        • -
      • Significant improvements for AMD and NVIDIA
        • -
      -
      • -
    • Wayland as the default display server for most systems whilst X11 remains the - default for those with an NVIDIA discrete GPU
      • -
    • Latest PulseAudio support for LDAC and AptX bluetooth codecs, HFP bluetooth - profiles and bluetooth device battery level reporting
      • -
    • Up-to-date toolchains, including Python 3.10, PHP 8.1, Ruby 3.0, Perl 5.34, Go - 1.18, GCC 11.2, Rust 1.58.1
      • -
    • Core productivity apps LibreOffice 7.3.2, Thunderbird 91.8, and Firefox 99 - which is now included as a snap -
      • -
    • Active Directory integration with the Ubuntu installer
      • -
    • Policy-based administration using Microsoft Active Directory Group Policy (GPO) - and advanced policy support for Ubuntu Pro Desktop users
      • -
    • Raspberry Pi 4 2GB Desktop support as a result of various performance - improvements
      • -
    • Better power management for NVIDIA dGPUs
      • -
    • Wifi 6E support
      • -
    -
    -
    -

    Read the full release - notes ›

    -
    -
    -
    -
    -

    Developers love Ubuntu, organisations trust it

    + +
    +
    +
    +

    Developers love Ubuntu, organisations trust it

    -
    -
    -

    Operating systems developers prefer

    -

    Multiple choice poll -

    -

    Source: The 2020 - HackerEarth Developer Survey

    +
    +
    +

    Operating systems developers prefer
    Multiple choice poll

    -
    -
    -

    Which of these open source technologies does your organisation use today to support your - software infrastructure?

    +

    Source: The - 2022 State of Open Source Report – OpenLogic

    + href="https://recruit-c7ff.kxcdn.com/recruit/wp-content/uploads/2020/05/he-developer-survey-2020.pdf">The 2020 + HackerEarth Developer Survey

    +
    +
    +

    Which of these open source technologies does your organisation use today to support your software infrastructure?

    +
    +

    Source: The + 2022 State of Open Source Report – OpenLogic

    -
    - {% include "shared/_pro_strip.html" %} -
    -

    Free for personal use on up to five machines

    -

    Secure your open source stack with a personal Ubuntu Pro license and get access to security patching for over - 23,000 packages in the Ubuntu Universe repository.

    -

    Get started with a free subscription ›

    -

    Ubuntu Desktop for organisations ›

    + +
    +
    +
    +
    +
    +
    +
    +

    Secure enterprise management with Ubuntu Pro Desktop

    +
    +
    +

    Ubuntu Pro Desktop is a comprehensive subscription delivering enterprise-grade security, management tooling, and extended support for developers and organisations. Ubuntu Pro Desktop is free for personal use on up to five machines.

    +
    + +
    +
    +
    +
    +
    +
    +
    +

    Free for personal use
    on up to five machines

    +
    +
    +

    Secure your open source stack with a personal Ubuntu Pro license and get access to security patching for over 23,000 packages in the Ubuntu Universe repository.

    +

    + Get started with a free subscription › +

    +
    +

    + Ubuntu Desktop for organisations › +

    +
    +
    -
    -
    +
    +
    +

    Get started today

    -
    -

    Download and install

    -

    Download Ubuntu Desktop and replace your current operating system. It's easy to install on Windows or macOS, or - run Ubuntu alongside it.

    -

    Download now

    +
    +
    +
    +
    +

    Download and install

    +
    +
    +

    Download Ubuntu Desktop and replace your current operating system. It's easy to install on Windows or macOS, or run Ubuntu alongside it.

    +
    + Download now +
    +
    +
    +
    +
    +

    Buy it pre-installed

    +
    +
    +

    Ubuntu is available on a huge range of devices from the world's largest hardware manufacturers, including Dell, HP, and Lenovo.

    +
    + Find out more about our retail partners › +
    +
    +
    +
    +
    +

    Join our community

    +
    +
    +

    Share ideas, write code, and get advice and help from our large, active community of IT professionals.

    +
    + +
    +
    -
    -

    Buy it pre-installed

    -

    Ubuntu is available on a huge range of devices from the world's largest hardware manufacturers, including Dell, - HP, and Lenovo.

    -

    Find out more about our retail partners

    +
    +
    + +
    +
    +
    +
    +
    +

    Latest Ubuntu Desktop news
    from our blog ›

    +
    -
    -

    Join our community

    -

    Share ideas, write code, and get advice and help from our large, active community of IT professionals.

    - +
    +
    +
    +
    +

    Explore all

    + +
    -{% with section_classes='p-strip', heading_topic='Ubuntu Desktop', tag_name='ubuntu-desktop', tag_id='1920', limit='4' -%} -{% include "shared/_latest_news_strip.html" %} -{% endwith %} + + + From e29bdef61201c5764b999adec2f958aafb92cc33 Mon Sep 17 00:00:00 2001 From: Peter French Date: Fri, 26 Jan 2024 17:12:03 +0100 Subject: [PATCH 16/33] Update ubuntu lts security support graph with new design (#13492) * Refresh /desktop/developers * Make the linter not sad * Update ubuntu lts security support graph with new design * Make the key responsive * Refactor embolden and hightlight functions * Make happy the gods of lint * Refresh /desktop/developers * Apply review changes * Update logos * Apply final suggestions from UX review * Fix merge conflict * Refresh /desktop/developers * Update ubuntu lts security support graph with new design * Make the key responsive * Refactor embolden and hightlight functions * Make happy the gods of lint * Fix bug from not passing scale to highlightChartRow --- static/js/src/chart-data.js | 6 +- static/js/src/release-chart.js | 22 +- static/js/src/support-chart.js | 656 ++++++++++++++++++ static/sass/_pattern_chart.scss | 34 + .../release_cycles/ubuntu-small-eol.html | 6 +- templates/desktop/developers.html | 34 +- templates/shared/_release_schedule.html | 2 +- 7 files changed, 733 insertions(+), 27 deletions(-) create mode 100644 static/js/src/support-chart.js diff --git a/static/js/src/chart-data.js b/static/js/src/chart-data.js index ef859d8b4d9..ef3596f8340 100644 --- a/static/js/src/chart-data.js +++ b/static/js/src/chart-data.js @@ -1229,10 +1229,10 @@ export var microStackReleases = [ ]; export var desktopServerStatus = { - HARDWARE_AND_MAINTENANCE_UPDATES: "chart__bar--orange", + HARDWARE_AND_MAINTENANCE_UPDATES: "chart__bar--black", MAINTENANCE_UPDATES: "chart__bar--orange-light", - ESM: "chart__bar--aubergine", - MAIN_UNIVERSE: "chart__bar--charcoal", + ESM: "chart__bar--aubergine-light", + MAIN_UNIVERSE: "chart__bar--aubergine-mid-light", INTERIM_RELEASE: "chart__bar--grey", }; diff --git a/static/js/src/release-chart.js b/static/js/src/release-chart.js index 1ca2ef20532..72fe93d340d 100644 --- a/static/js/src/release-chart.js +++ b/static/js/src/release-chart.js @@ -1,4 +1,4 @@ -import { createChart, createChartWithTitles } from "./chart"; +import { createChart } from "./chart"; import { debounce } from "./utils/debounce.js"; import { serverAndDesktopReleases, @@ -39,10 +39,20 @@ import { } from "./chart-data"; function buildCharts() { - if (document.querySelector("#server-desktop-eol")) { + if (document.querySelector("#server-desktop-eol-old")) { delete desktopServerStatus.MAINTENANCE_UPDATES; createChart( + "#server-desktop-eol-old", + desktopServerReleaseNames, + desktopServerStatus, + serverAndDesktopReleases + ); + } + if (document.querySelector("#server-desktop-eol")) { + delete desktopServerStatus.MAINTENANCE_UPDATES; + createSupportChart( "#server-desktop-eol", + "#server-desktop-eol-key", desktopServerReleaseNames, desktopServerStatus, serverAndDesktopReleases @@ -164,10 +174,18 @@ function buildCharts() { } function clearCharts() { + const serverDesktopEolOld = document.querySelector("#server-desktop-eol-old"); + if (serverDesktopEolOld) { + serverDesktopEolOld.innerHTML = ""; + } const serverDesktopEol = document.querySelector("#server-desktop-eol"); if (serverDesktopEol) { serverDesktopEol.innerHTML = ""; } + const serverDesktopEolKey = document.querySelector("#server-desktop-eol-key"); + if (serverDesktopEolKey) { + serverDesktopEolKey.innerHTML = ""; + } const eol1604 = document.querySelector("#eol-1604"); if (eol1604) { eol1604.innerHTML = ""; diff --git a/static/js/src/support-chart.js b/static/js/src/support-chart.js new file mode 100644 index 00000000000..f2d5c3470cc --- /dev/null +++ b/static/js/src/support-chart.js @@ -0,0 +1,656 @@ +import { ro } from "date-fns/locale"; + +/** + * + * @param {Array} tasks + * + * Sorts tasks by date + */ +function sortTasks(tasks) { + tasks.sort(function (a, b) { + return a.endDate - b.endDate; + }); + + tasks.sort(function (a, b) { + return a.startDate - b.startDate; + }); + + return tasks; +} + +/** + * + * @param {*} svg + * @param {Array} tasks + * @param {Object} taskStatus + * @param {*} x + * @param {*} y + * + * Add bars to chart using supplied data + */ +function addBarsToChart(svg, tasks, taskStatus, x, y, highlightVersion) { + svg + .selectAll(".chart") + .data(tasks, function (d) { + return d.startDate + d.taskName + d.endDate; + }) + .enter() + .append("rect") + .attr("class", function (d) { + var className = ""; + + if (taskStatus[d.status] === null) { + return "bar"; + } + + if (highlightVersion && !d.taskName.includes(highlightVersion)) { + className += " chart__bar--transparent"; + } + + className += " " + taskStatus[d.status]; + + return className; + }) + .attr("y", 0) + .attr("transform", function (d) { + if (d.status === "MAIN_UNIVERSE" || d.status === "PRO_SUPPORT") { + return ( + "translate(" + + x(d.startDate) + + "," + + (y(d.taskName) - y.bandwidth()) + + ")" + ); + } + return "translate(" + x(d.startDate) + "," + y(d.taskName) + ")"; + }) + .attr("height", function () { + return y.bandwidth(); + }) + .attr("width", function (d) { + return x(d.endDate) - x(d.startDate); + }); +} + +/** + * + * @param {*} svg + * @param {Int} height + * @param {Object} margin + * @param {*} xAxis + * + * Add x-axis group to SVG + */ +function addXAxis(svg, height, margin, xAxis) { + svg + .append("g") + .attr("class", "x axis") + .attr("transform", "translate(0, " + (margin.top - 32) + ")") + .call(xAxis); +} + +/** + * + * @param {*} svg + * @param {*} yAxis + * + * Append y-axis group to SVG + */ +function appendYAxisGroup(svg, yAxis) { + return svg.append("g").attr("class", "y axis").call(yAxis); +} + +/** + * + * @param {*} yAxisGroup + * @param {*} y + * + * Centers labels in line with bars + */ +function transformTickText(yAxisGroup, y) { + yAxisGroup.selectAll(".tick text").attr("transform", function (d) { + var centerOffset = y.bandwidth() / 2; + return "translate(0, " + -centerOffset + ")"; + }); +} + +/** + * + * @param {*} textElement + * + * Splits the label into version number (inc. LTS if it exists) + * and release name and puts them over two lines + */ +function formatLabel(textElement) { + var textXValue = textElement.attr("x"); + var words = textElement.text().split("("); + + if (words[1]) { + words[1] = "(" + words[1]; + } + + textElement.text(""); + + textElement + .append("tspan") + .attr("x", textXValue) + .attr("dy", "-0.5em") + .text(words[0]) + .call(emboldenLTSLabels); + + if (words.length > 1) { + textElement + .append("tspan") + .attr("x", textXValue) + .attr("dy", "1.6em") + .text(words.slice(1).join(" ")); + } +} + +/** + * + * @param {*} textNode + * + * Embolden text if it contains LTS + * + */ +function emboldenLTSLabels(textNode) { + const textContent = textNode.text(); + if (textContent?.includes("LTS")) { + textNode.classed("chart__label--bold", true); + } +} + +/** + * + * @param {*} yAxisGroup + * + * Loops through the axis labels and calls the formatLabel + * function on them + */ +function formatAxisLabels(yAxisGroup) { + yAxisGroup.selectAll(".tick text").call(function (t) { + t.each(function (d) { + formatLabel(d3.select(this)); + }); + }); +} + +/** + * + * @param {*} svg + * @param {*} yAxis + * @param {*} y + * + * Builds and appends the y-axis + */ +function addYAxis(svg, yAxis, y) { + var yAxisGroup = appendYAxisGroup(svg, yAxis); + transformTickText(yAxisGroup, y); + formatAxisLabels(yAxisGroup); +} + +/** + * + * @param {*} yAxis + * + * Gets the tick positions of the y-axis + */ +function getTickPositions(yAxis) { + const yAxisScale = yAxis.scale(); + const ticks = yAxisScale.ticks ? yAxisScale.ticks() : yAxisScale.domain(); + return ticks.map((tick) => yAxisScale(tick)); +} + +/** + * + * @param {*} svg + * @param {Int} x1 + * @param {Int} x2 + * @param {*} y + * @param {String} strokeColor + * @param {Int} strokeColor + * + * Appends a horiontal line to the SVG based on custom parameters + */ +function addHorizontalLine(svg, x1, x2, y, strokeColor, strokeWidth) { + svg + .append("line") + .attr("x1", x1) + .attr("x2", x2) + .attr("y1", y) + .attr("y2", y) + .attr("stroke", strokeColor) + .attr("stroke-width", strokeWidth); +} + +/** + * + * @param {*} svg + * @param {*} yAxis + * @param {Int} width + * @param {Obj} margin + * + * Find the postion of the Y-axis ticks and adds a horizontal + * line above each label and one that spans the chart area + */ +function addYAxisHorizontalLines(svg, yAxis, width, margin) { + const tickPositions = getTickPositions(yAxis); + + const lineAdjustment = 27; + + tickPositions.forEach((posY, index) => { + addHorizontalLine( + svg, + -margin.left, + 0, + posY - lineAdjustment, + "#D9D9D9", + 2 + ); + + addHorizontalLine( + svg, + 0, + width + margin.right, + posY - lineAdjustment, + "#D9D9D9", + index === 0 ? 2 : 1 + ); + }); +} + +/** + * + * @param {*} svg + * @param {*} versionAxis + * + * Add version axis to chart + */ +function addVersionAxis(svg, versionAxis) { + svg.append("g").attr("class", "version axis").call(versionAxis); +} + +/** + * + * @param {*} svg + * + * Clean up unwanted elements on chart put in by d3.js + */ +function cleanUpChart(svg) { + svg.selectAll(".domain").remove(); +} + +/** + * + * @param {*} svg + * @param {String} highlightVersion + * + * Set version axis labels + */ +function highlightChartRow(svg, scale, highlightVersion) { + const domain = scale.domain(); + const tickValues = domain.map((value) => value.toString()); + + svg.selectAll(".y.axis .tick text").each(function (d, i) { + const tickText = d3.select(this); + const textContent = tickValues[i].toString(); + + var isNotHighlightedVersion = + highlightVersion && !textContent.includes(highlightVersion); + var isYearLabel = + textContent.includes("20") && !textContent.includes("Ubuntu "); + + if (isNotHighlightedVersion) { + tickText.classed("chart__label--transparent", true); + } + + if (isYearLabel) { + tickText.classed("chart__label--transparent", false); + } + }); +} + +/** + * + * @param {*} svg + * + * Set version axis labels + */ +function setVersionAxisLabels(svg, taskVersions) { + svg.selectAll(".version .tick text").select(function (tickLabel, index) { + this.textContent = taskVersions[index]; + }); +} + +/** + * + * @param {*} svg + * @param {Int} height + * + * Adds vertical lines to the x axis + */ +function addXAxisVerticalLines(svg, height, margin) { + svg + .selectAll(".x.axis .tick line") + .attr("y1", height - margin.bottom - margin.top) + .attr("y2", 26); +} + +/** + * + * @param {String} chartSelector + * @param {Object} taskStatus + * + * Builds key for supplied chart based on task status + */ +function buildChartKey(chartSelector, taskStatus) { + var taskStatusKeys = Object.keys(taskStatus); + var rectDimensions = 25; + var rowHeight = rectDimensions + 5; + var gapBetweenRectAndText = 10; + var verticalTextAlignmentOffset = 16; + var containerWidth = document.querySelector(chartSelector).clientWidth; + + var numberOfExtraLines = + getMaxNumberOfLines(taskStatusKeys, containerWidth) - 1; + var extraChartHeight = numberOfExtraLines * 9; + + var chartKey = d3 + .select(chartSelector) + .append("svg") + .attr("class", "chart-key") + .attr("width", containerWidth) + .attr( + "height", + rowHeight * taskStatusKeys.length + + extraChartHeight * taskStatusKeys.length + ); + + taskStatusKeys.forEach(function (key, i) { + var keyRow = chartKey + .append("g") + .attr("class", "chart-key__row") + .attr( + "transform", + "translate(0, " + (rowHeight * i + extraChartHeight * i) + ")" + ) + .attr("height", rectDimensions); + + keyRow + .append("rect") + .attr("class", taskStatus[key]) + .attr("width", rectDimensions) + .attr("height", rectDimensions) + .attr("y", 0); + + keyRow + .append("text") + .text(formatKeyLabel(key)) + .attr("class", "chart-key__label") + .attr("x", rectDimensions + gapBetweenRectAndText) + .attr("y", verticalTextAlignmentOffset) + .call(wrapText, containerWidth - rectDimensions - gapBetweenRectAndText); + }); +} + +/** + * + * @param {String} text + * @param {Int} containerWidth + * + * Find the max number of lines that any given text will occupy from + * a list of texts, based on a given container width + */ +function getMaxNumberOfLines(textList, width) { + var tempSvg = (svg = document.createElementNS( + "http://www.w3.org/2000/svg", + "svg" + )); + svg.style.position = "absolute"; + svg.style.visibility = "hidden"; + svg.width = width; + document.body.appendChild(svg); + + var maxNumberOfLines = 1; + + textList.forEach(function (key, i) { + let textNode = document.createElementNS( + "http://www.w3.org/2000/svg", + "text" + ); + textNode.textContent = formatKeyLabel(key); + svg.appendChild(textNode); + var numberOfLines = Math.ceil(textNode.getComputedTextLength() / width); + if (numberOfLines > maxNumberOfLines) { + maxNumberOfLines = numberOfLines; + } + svg.removeChild(textNode); + }); + document.body.removeChild(svg); + return maxNumberOfLines; +} + +/** + * + * @param {String} text + * @param {Int} width + * + * At the point where a text would be longer that the container width, + * split the text into tspan (two lines) + */ +function wrapText(text, width) { + var negativeTextMargin = text.node().getComputedTextLength() > width ? 5 : 0; + text.each(function () { + var text = d3.select(this), + words = text.text().split(/\s+/).reverse(), + word, + line = [], + lineNumber = 0, + lineHeight = 1.1, + x = text.attr("x"), + y = text.attr("y"), + dy = 0; + tspan = text + .text(null) + .append("tspan") + .attr("x", x) + .attr("y", y - negativeTextMargin) + .attr("dy", dy + "em"); + while ((word = words.pop())) { + line.push(word); + tspan.text(line.join(" ")); + if (tspan.node().getComputedTextLength() > width) { + line.pop(); + tspan.text(line.join(" ")); + line = [word]; + tspan = text + .append("tspan") + .attr("x", x) + .attr("y", y - negativeTextMargin) + .attr("dy", ++lineNumber * lineHeight + dy + "em") + .text(word); + } + } + }); +} + +/** + * + * @param {String} key + * + * Formats key into readable string + */ +function formatKeyLabel(key) { + var keyLowerCase = key.toLowerCase().replace(/_/g, " "); + var formattedKey = + keyLowerCase.charAt(0).toUpperCase() + keyLowerCase.substr(1); + formattedKey = formattedKey.replace( + "Lts", + "Ubuntu LTS release Standard Support" + ); + formattedKey = formattedKey.replace(" openstack ", " OpenStack "); + formattedKey = formattedKey.replace("kub", "Kub"); + formattedKey = formattedKey.replace( + "Interim release", + "Interim release standard security maintenance (9 months)" + ); + formattedKey = formattedKey.replace( + "Esm", + "LTS Expanded Security Maintenance (ESM) for Ubuntu Main (additional 5 years)" + ); + formattedKey = formattedKey.replace("Cve", "CVE/Critical fixes only"); + formattedKey = formattedKey.replace("Early", "Early preview"); + formattedKey = formattedKey.replace( + "Hardware and maintenance updates", + "LTS standard security maintenance for Ubuntu Main (initial 5 years)" + ); + formattedKey = formattedKey.replace( + "Main universe", + "LTS Expanded Security Maintenance (ESM) for Ubuntu Universe (10 years)" + ); + formattedKey = formattedKey.replace( + "Microstack esm", + "Expanded Security Maintenance (ESM)" + ); + formattedKey = formattedKey.replace( + "Pro support", + "Ubuntu Pro + Support coverage" + ); + return formattedKey; +} + +/** + * + * @param {Array} taskTypes + * + * Calculate the longest Y-Axis label + */ +function calculateYAxisWidth(YAxisLabels) { + var YAxisLabelsCopy = YAxisLabels.slice(); + var longestLabel = YAxisLabelsCopy.sort(function (a, b) { + return b.length - a.length; + })[0]; + return longestLabel.length * 7; +} + +/** + * + * @param {String} chartSelector + * @param {Array} taskTypes + * @param {Object} taskStatus + * @param {Array} tasks + * + * Builds chart using supplied selector and data + */ +export function createSupportChart( + chartSelector, + keySelector, + taskTypes, + taskStatus, + tasks, + taskVersions, + removePadding, + highlightVersion +) { + var margin = { + top: 12, + right: 40, + bottom: 20, + }; + margin.left = calculateYAxisWidth(taskTypes); + var rowHeight = 64; + var timeDomainStart; + var timeDomainEnd; + var earliestStartDate = d3.min(tasks, (d) => d.startDate); + var latestEndDate = d3.max(tasks, (d) => d.endDate); + if (removePadding) { + timeDomainStart = earliestStartDate; + timeDomainEnd = latestEndDate; + } else { + timeDomainStart = d3.timeYear.offset(earliestStartDate, -1); + timeDomainEnd = d3.timeYear.offset(latestEndDate, +1); + } + var keyAttachmentSelector = keySelector || chartSelector; + var height = taskTypes.length * rowHeight; + var containerWidth = document.querySelector(chartSelector).clientWidth; + if (containerWidth <= 0) { + var closestCol = document + .querySelector(chartSelector) + .closest('[class*="col-"]'); + + if (closestCol.clientWidth <= 0) { + return; + } + + containerWidth = closestCol.clientWidth - margin.left; + } + var width = containerWidth - margin.right - margin.left; + + var x = d3 + .scaleTime() + .domain([timeDomainStart, timeDomainEnd]) + .range([0, width + margin.right]) + .clamp(true); + + var y = d3 + .scaleBand() + .domain(taskTypes) + .rangeRound([0, height - margin.top - margin.bottom]) + .padding(0.58); + + var version = d3 + .scaleBand() + .domain(taskTypes) + .rangeRound([0, height - margin.top - margin.bottom]) + .padding(0.4); + + var xAxis = d3.axisBottom(x); + + var yAxis = d3.axisRight(y).tickPadding(-margin.left).tickSize(0); + + var chartTranslateX = margin.left; + + if (taskVersions) { + var versionAxis = d3 + .axisRight(version) + .tickPadding(-margin.left * 1.6) + .tickSize(0); + + chartTranslateX = margin.left * 1.6; + } + + sortTasks(tasks); + + // Build initial chart body + var svg = d3 + .select(chartSelector) + .append("svg") + .attr("class", "chart") + .attr("width", width + margin.left + margin.right) + .attr("height", height - margin.top - margin.bottom) + .append("g") + .attr("class", "gantt-chart") + .attr("width", width + margin.left + margin.right) + .attr("height", height) + .attr( + "transform", + "translate(" + chartTranslateX + ", " + margin.top + ")" + ); + + addBarsToChart(svg, tasks, taskStatus, x, y, highlightVersion); + addXAxis(svg, height, margin, xAxis); + addYAxis(svg, yAxis, y); + + if (taskVersions) { + addVersionAxis(svg, versionAxis); + setVersionAxisLabels(svg, taskVersions); + } + + addXAxisVerticalLines(svg, height, margin); + addYAxisHorizontalLines(svg, yAxis, width, margin); + cleanUpChart(svg); + buildChartKey(keyAttachmentSelector, taskStatus); + + highlightChartRow(svg, y, highlightVersion); +} diff --git a/static/sass/_pattern_chart.scss b/static/sass/_pattern_chart.scss index dd672e4bd2a..9896a994d1f 100644 --- a/static/sass/_pattern_chart.scss +++ b/static/sass/_pattern_chart.scss @@ -22,6 +22,18 @@ stroke-width: 1px; } +.chart__bar--aubergine-mid-light { + fill: #923a66; + stroke: #923a66; + stroke-width: 1px; +} + +.chart__bar--aubergine-light { + fill: #cba7b8; + stroke: #cba7b8; + stroke-width: 1px; +} + .chart__bar--green { fill: green; stroke: green; @@ -34,6 +46,12 @@ stroke-width: 1px; } +.chart__bar--black { + fill: #111; + stroke: #111; + stroke-width: 1px; +} + .chart__label--bold { font-weight: bold; } @@ -63,6 +81,22 @@ text-anchor: start !important; } +#server-desktop-eol { + .tick text { + font-size: 16px; + } + + .x.axis text { + color: #666; + font-size: 16px; + text-anchor: start !important; + } + + .chart__label--bold { + font-weight: 600; + } +} + .chart-key { display: block; } diff --git a/templates/about/release_cycles/ubuntu-small-eol.html b/templates/about/release_cycles/ubuntu-small-eol.html index ff0e433d2c4..16a332478d9 100644 --- a/templates/about/release_cycles/ubuntu-small-eol.html +++ b/templates/about/release_cycles/ubuntu-small-eol.html @@ -1,8 +1,6 @@
    -
    -
    - {% include "about/release_cycles/releases-table.html" %} -
    +
    + {% include "about/release_cycles/releases-table.html" %}
    \ No newline at end of file diff --git a/templates/desktop/developers.html b/templates/desktop/developers.html index 40137bfcd10..0c54fc3567e 100755 --- a/templates/desktop/developers.html +++ b/templates/desktop/developers.html @@ -17,7 +17,6 @@

    Ubuntu Desktop
    for developers

    -

    Whether you're an app or web developer, engineering manager, data scientist, or AI/ML researcher — Ubuntu is your ideal workstation.

    @@ -78,6 +77,8 @@

    Why choose Ubuntu Desktop?

    Security support
    for Ubuntu releases

    +
    +
    @@ -112,11 +113,11 @@

    Access to cutting-edge hardware and software

    height="288", hi_def=True, loading="lazy", - attrs={"class": "p-logo-section__logo"} + attrs={"class": "p-icon-section__icon"} ) | safe }}
    -
    +
    {{ image ( url="https://assets.ubuntu.com/v1/e332a639-jupyter-logo.png", alt="juptyer logo", @@ -128,7 +129,7 @@

    Access to cutting-edge hardware and software

    ) | safe }}
    -
    +
    {{ image ( url="https://assets.ubuntu.com/v1/1652445f-keras-logo.png", alt="keras logo", @@ -378,8 +379,8 @@

    Certified hardware

    width="110", height="256", hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} + loading="auto|lazy", + attrs={"class": "p-icon-section__icon"} ) | safe }}
    @@ -391,7 +392,7 @@

    Certified hardware

    height="144", hi_def=True, loading="lazy", - attrs={"class": "p-logo-section__logo"} + attrs={"class": "p-icon-section__icon"} ) | safe }}
    @@ -402,8 +403,8 @@

    Certified hardware

    width="71", height="144", hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} + loading="auto|lazy", + attrs={"class": "p-icon-section__icon"} ) | safe }}
    @@ -415,7 +416,7 @@

    Certified hardware

    height="257", hi_def=True, loading="lazy", - attrs={"class": "p-logo-section__logo"} + attrs={"class": "p-icon-section__icon"} ) | safe }}
    @@ -427,7 +428,7 @@

    Certified hardware

    height="288", hi_def=True, loading="lazy", - attrs={"class": "p-logo-section__logo"} + attrs={"class": "p-icon-section__icon"} ) | safe }}
    @@ -439,7 +440,7 @@

    Certified hardware

    height="372", hi_def=True, loading="lazy", - attrs={"class": "p-logo-section__logo"} + attrs={"class": "p-icon-section__icon"} ) | safe }}
    @@ -451,7 +452,7 @@

    Certified hardware

    height="257", hi_def=True, loading="lazy", - attrs={"class": "p-logo-section__logo"} + attrs={"class": "p-icon-section__icon"} ) | safe }}
    @@ -546,7 +547,7 @@

    Download and install

    Download Ubuntu Desktop and replace your current operating system. It's easy to install on Windows or macOS, or run Ubuntu alongside it.

    -
    +
    Download now
    @@ -557,7 +558,7 @@

    Buy it pre-installed

    Ubuntu is available on a huge range of devices from the world's largest hardware manufacturers, including Dell, HP, and Lenovo.

    -
    +
    Find out more about our retail partners ›
    @@ -568,7 +569,7 @@

    Join our community

    Share ideas, write code, and get advice and help from our large, active community of IT professionals.

    -
    +
    • Ubuntu Discourse @@ -630,7 +631,6 @@

      ) - diff --git a/templates/shared/_release_schedule.html b/templates/shared/_release_schedule.html index 94ee28b609c..38bd39ecf98 100644 --- a/templates/shared/_release_schedule.html +++ b/templates/shared/_release_schedule.html @@ -15,7 +15,7 @@

      A release schedule you can depend

    -
    +
    From a46c2d279c2b231246fa9cc0f4cfec72122e76f9 Mon Sep 17 00:00:00 2001 From: Peter French Date: Mon, 29 Jan 2024 13:44:41 +0100 Subject: [PATCH 17/33] Fix logo misalignment (#13504) * Fix logo misalignment * Appease linter --- static/js/src/support-chart.js | 21 +++++++++------------ templates/desktop/developers.html | 18 +++++++++--------- 2 files changed, 18 insertions(+), 21 deletions(-) diff --git a/static/js/src/support-chart.js b/static/js/src/support-chart.js index f2d5c3470cc..737725a9d60 100644 --- a/static/js/src/support-chart.js +++ b/static/js/src/support-chart.js @@ -403,14 +403,11 @@ function buildChartKey(chartSelector, taskStatus) { * a list of texts, based on a given container width */ function getMaxNumberOfLines(textList, width) { - var tempSvg = (svg = document.createElementNS( - "http://www.w3.org/2000/svg", - "svg" - )); - svg.style.position = "absolute"; - svg.style.visibility = "hidden"; - svg.width = width; - document.body.appendChild(svg); + var tempSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); + tempSvg.style.position = "absolute"; + tempSvg.style.visibility = "hidden"; + tempSvg.width = width; + document.body.appendChild(tempSvg); var maxNumberOfLines = 1; @@ -420,14 +417,14 @@ function getMaxNumberOfLines(textList, width) { "text" ); textNode.textContent = formatKeyLabel(key); - svg.appendChild(textNode); + tempSvg.appendChild(textNode); var numberOfLines = Math.ceil(textNode.getComputedTextLength() / width); if (numberOfLines > maxNumberOfLines) { maxNumberOfLines = numberOfLines; } - svg.removeChild(textNode); + tempSvg.removeChild(textNode); }); - document.body.removeChild(svg); + document.body.removeChild(tempSvg); return maxNumberOfLines; } @@ -451,7 +448,7 @@ function wrapText(text, width) { x = text.attr("x"), y = text.attr("y"), dy = 0; - tspan = text + var tspan = text .text(null) .append("tspan") .attr("x", x) diff --git a/templates/desktop/developers.html b/templates/desktop/developers.html index 0c54fc3567e..0b1fe83ba9c 100755 --- a/templates/desktop/developers.html +++ b/templates/desktop/developers.html @@ -113,7 +113,7 @@

    Access to cutting-edge hardware and software

    height="288", hi_def=True, loading="lazy", - attrs={"class": "p-icon-section__icon"} + attrs={"class": "p-logo-section__logo"} ) | safe }} @@ -129,7 +129,7 @@

    Access to cutting-edge hardware and software

    ) | safe }} -
    +
    {{ image ( url="https://assets.ubuntu.com/v1/1652445f-keras-logo.png", alt="keras logo", @@ -380,7 +380,7 @@

    Certified hardware

    height="256", hi_def=True, loading="auto|lazy", - attrs={"class": "p-icon-section__icon"} + attrs={"class": "p-logo-section__logo"} ) | safe }}
    @@ -392,7 +392,7 @@

    Certified hardware

    height="144", hi_def=True, loading="lazy", - attrs={"class": "p-icon-section__icon"} + attrs={"class": "p-logo-section__logo"} ) | safe }}
    @@ -404,7 +404,7 @@

    Certified hardware

    height="144", hi_def=True, loading="auto|lazy", - attrs={"class": "p-icon-section__icon"} + attrs={"class": "p-logo-section__logo"} ) | safe }} @@ -416,7 +416,7 @@

    Certified hardware

    height="257", hi_def=True, loading="lazy", - attrs={"class": "p-icon-section__icon"} + attrs={"class": "p-logo-section__logo"} ) | safe }} @@ -428,7 +428,7 @@

    Certified hardware

    height="288", hi_def=True, loading="lazy", - attrs={"class": "p-icon-section__icon"} + attrs={"class": "p-logo-section__logo"} ) | safe }} @@ -440,7 +440,7 @@

    Certified hardware

    height="372", hi_def=True, loading="lazy", - attrs={"class": "p-icon-section__icon"} + attrs={"class": "p-logo-section__logo"} ) | safe }} @@ -452,7 +452,7 @@

    Certified hardware

    height="257", hi_def=True, loading="lazy", - attrs={"class": "p-icon-section__icon"} + attrs={"class": "p-logo-section__logo"} ) | safe }} From 046fda59d60b584033f91ca47822449b196b8088 Mon Sep 17 00:00:00 2001 From: Peter French Date: Thu, 1 Feb 2024 13:57:21 +0100 Subject: [PATCH 18/33] Redesign hackearth and opensource charts (#13511) * Refresh /desktop/developers * Make the linter not sad * Apply review changes * Refactor developer-chart.js to match new design * Refactor hows graphs are drawn * Apply redesign to hackearth&opensource chars && change some d3 file names for clarity * Apply design suggestions * Linty lint * Use a table inplace of the graph on small screens --- build.js | 3 +- static/js/src/developer-chart.js | 483 ++++++++-- static/js/src/release-chart-manager.js | 263 ++++++ .../js/src/{chart.js => release-chart-old.js} | 2 +- static/js/src/release-chart.js | 855 +++++++++++++----- static/js/src/support-chart.js | 653 ------------- static/js/src/tabbed-content.js | 2 +- static/sass/_pattern_chart.scss | 35 +- templates/16-04/_release-chart-1604.html | 2 +- templates/18-04/_release-chart-1604.html | 2 +- templates/about/index.html | 2 +- templates/about/release-cycle.html | 3 +- templates/cpu-compatibility/index.html | 2 +- templates/desktop/developers.html | 76 +- .../desktop/partial/_developers-table.html | 46 + .../desktop/partial/_hackearth-table.html | 50 + templates/engage/de_why-openstack.html | 2 +- templates/engage/es_why-openstack.html | 2 +- templates/engage/fr_why-openstack.html | 2 +- templates/openstack/why-openstack.html | 2 +- .../shared/_kernel-support-schedule.html | 4 +- templates/shared/_release_schedule.html | 2 +- 22 files changed, 1445 insertions(+), 1048 deletions(-) create mode 100644 static/js/src/release-chart-manager.js rename static/js/src/{chart.js => release-chart-old.js} (99%) delete mode 100644 static/js/src/support-chart.js create mode 100644 templates/desktop/partial/_developers-table.html create mode 100644 templates/desktop/partial/_hackearth-table.html diff --git a/build.js b/build.js index 614dbeb27c8..4681ebefef6 100644 --- a/build.js +++ b/build.js @@ -8,7 +8,8 @@ let entries = { "side-navigation": "./static/js/src/side-navigation.js", "image-download": "./static/js/src/image-download.js", main: "./static/js/src/main.js", - "release-chart": "./static/js/src/release-chart.js", + "release-chart-manager": "./static/js/src/release-chart-manager.js", + "developer-chart": "./static/js/src/developer-chart.js", tabotronic: "./static/js/src/tabotronic.js", appliance: "./static/js/src/appliance.js", costCalculator: "./static/js/src/openstack/react/app.jsx", diff --git a/static/js/src/developer-chart.js b/static/js/src/developer-chart.js index 399c439d983..5f341a1b53c 100644 --- a/static/js/src/developer-chart.js +++ b/static/js/src/developer-chart.js @@ -1,107 +1,404 @@ -const hackerEarthData = [ - { count: 66, label: "Ubuntu" }, - { count: 61, label: "MS Windows" }, - { count: 57, label: "MacOS" }, - { count: 11, label: "CentOs" }, - { count: 10, label: "Debian" }, - { count: 9, label: "Fedora" }, - { count: 8, label: "Arch Linux" }, - { count: 4, label: "Solaris" }, - { count: 2, label: "FreeBSD" }, - { count: 1, label: "Deepin" }, -]; -const OpenSourcedata = [ - { count: 35.6, label: "Ubuntu" }, - { count: 21.4, label: "Debian" }, - { count: 19.5, label: "CentOS" }, - { count: 16, label: "RHEL" }, - { count: 14.6, label: "OpenSUSE" }, - { count: 13.5, label: "SLES" }, - { count: 11.1, label: "SELinux" }, - { count: 7.5, label: "Rocky Linux" }, - { count: 4.8, label: "NavyLinux" }, -]; - -function createChart(dataset, id) { - const data = dataset.sort(function (a, b) { +import { debounce } from "./utils/debounce.js"; + +var hackerEarthData = { + tasks: [ + { value: 66, taskName: "Ubuntu" }, + { value: 61, taskName: "MS Windows" }, + { value: 57, taskName: "MacOS" }, + { value: 11, taskName: "CentOs" }, + { value: 10, taskName: "Debian" }, + { value: 9, taskName: "Fedora" }, + { value: 8, taskName: "Arch Linux" }, + { value: 4, taskName: "Solaris" }, + { value: 2, taskName: "FreeBSD" }, + { value: 1, taskName: "Deepin" }, + ], + labels: [ + "Ubuntu", + "MS Windows", + "MacOS", + "CentOs", + "Debian", + "Fedora", + "Arch Linux", + "Solaris", + "FreeBSD", + "Deepin", + ], +}; + +var openSourceData = { + tasks: [ + { value: 35.6, taskName: "Ubuntu" }, + { value: 21.4, taskName: "Debian" }, + { value: 19.5, taskName: "CentOS" }, + { value: 16, taskName: "RHEL" }, + { value: 14.6, taskName: "OpenSUSE" }, + { value: 13.5, taskName: "SLES" }, + { value: 11.1, taskName: "SELinux" }, + { value: 7.5, taskName: "Rocky Linux" }, + { value: 4.8, taskName: "NavyLinux" }, + ], + labels: [ + "Ubuntu", + "Debian", + "CentOS", + "RHEL", + "OpenSUSE", + "SLES", + "SELinux", + "Rocky Linux", + "NavyLinux", + ], +}; + +// Global variables - used widely throughout the chart making process +var margin = { + top: 24, + right: 40, + bottom: 30, + left: 0, +}; +var gapSpacing = 32; + +/** + * + * @param {*} data + */ +function sortData(data) { + return (data = data.sort(function (a, b) { return d3.ascending(a.count, b.count); + })); +} + +/** + * + * @param {*} svg + * @param {Array} tasks + * @param {*} x + * @param {*} y + * + * Add bars to chart using supplied data + */ +function addBarsToChart(svg, tasks, x, y) { + const barClass = (d) => + d.taskName === "Ubuntu" ? "chart__bar--orange" : "chart__bar--light-grey"; + const barWidth = (d) => x(d.value) - x(0); + const barTransform = (d) => `translate(${x(0)},${y(d.taskName)})`; + + svg + .selectAll(".chart") + .data(tasks, (d) => d.taskName + d.value) + .enter() + .append("rect") + .attr("class", barClass) + .attr("y", 0) + .attr("transform", barTransform) + .attr("height", y.bandwidth) + .attr("width", barWidth); +} + +/** + * + * @param {*} svg + * @param {Int} height + * @param {Object} margin + * @param {*} xAxis + * + * Add x-axis group to SVG + */ +function addXAxis(svg, height, margin, xAxis) { + var xAxisGroup = svg + .append("g") + .attr("class", "x axis") + .attr("transform", "translate(0, " + -margin.top + ")") + .call(xAxis); + xAxisGroup.selectAll(".tick text").attr("dx", 3); +} + +/** + * + * @param {*} svg + * @param {*} yAxis + * + * Append y-axis group to SVG + */ +function appendYAxisGroup(svg, yAxis) { + return svg.append("g").attr("class", "y axis").call(yAxis); +} + +/** + * + * @param {*} yAxisGroup + * @param {Array} tasks + * Example of tasks array: + * [{taskName: "Task 1", value: 10}, {taskName: "Task 2", value: 20}, ...] + * + * Loops through the axis labels and calls the formatLabel + * function on them + */ +function formatYAxisLabels(yAxisGroup, tasks) { + yAxisGroup.selectAll(".tick text").each(function (d, i) { + d3.select(this).text(""); + d3.select(this).append("tspan").text(d); + d3.select(this) + .append("tspan") + .text(tasks[i].value + "%") + .attr("style", "text-anchor: end;") + .attr("x", -gapSpacing); + }); +} + +/** + * + * @param {*} svg + * @param {*} yAxis + * @param {Array} tasks + * Example of tasks array: + * [{taskName: "Task 1", value: 10}, {taskName: "Task 2", value: 20}, ...] + * + * Builds and appends the y-axis + */ +function addYAxis(svg, yAxis, tasks) { + var yAxisGroup = appendYAxisGroup(svg, yAxis); + formatYAxisLabels(yAxisGroup, tasks); + addPercentageSymbol(svg); +} + +function addPercentageSymbol(svg) { + svg + .append("text") + .text("%") + .attr("style", "text-anchor:end;font-weight:500;font-size:14px;") + .attr("x", 0 - gapSpacing) + .attr("dy", -3); +} + +/** + * + * @param {*} yAxis + * + * Gets the tick positions of the y-axis + */ +function getTickPositions(yAxis) { + const yAxisScale = yAxis.scale(); + const ticks = yAxisScale.ticks ? yAxisScale.ticks() : yAxisScale.domain(); + return ticks.map((tick) => yAxisScale(tick)); +} + +/** + * + * @param {*} svg + * @param {Int} x1 + * @param {Int} x2 + * @param {Int} y1 + * @param {Int} y2 + * @param {String} strokeColor + * @param {Int} strokeColor + * + * Appends a horiontal line to the SVG based on custom parameters + */ +function addHorizontalLine(svg, x1, x2, y1, y2, strokeColor, strokeWidth) { + svg + .append("line") + .attr("x1", x1) + .attr("x2", x2) + .attr("y1", y1) + .attr("y2", y2) + .attr("stroke", strokeColor) + .attr("stroke-width", strokeWidth); +} + +/** + * + * @param {*} svg + * @param {*} yAxis + * @param {Int} width + * @param {Obj} margin + * + * Find the postion of the Y-axis ticks and adds a horizontal + * line above each label and one that spans the chart area + */ +function addYAxisHorizontalLines(svg, yAxis, width, margin) { + const tickPositions = getTickPositions(yAxis); + + tickPositions.forEach((posY, index) => { + addHorizontalLine( + svg, + -margin.left, + -gapSpacing, + posY - 2, + posY - 2, + "#D9D9D9", + 1 + ); }); - var margin = { - top: 15, - right: 60, - bottom: 15, - left: 100, - }; + addHorizontalLine( + svg, + 0, + width + margin.right, + tickPositions[0] - 2, + tickPositions[0] - 2, + "#D9D9D9", + 2 + ); +} + +/** + * + * @param {*} svg + * + * Selects the elements in the x-axis and extends it + */ +function addXAxisTicks(svg) { + svg.selectAll(".x.axis .tick line").each(function () { + d3.select(this) + .attr("y1", 3) + .attr("y2", 28) + .attr("style", "stroke-dasharray:none;"); + }); +} + +/** + * + * @param {*} svg + * + * Clean up unwanted elements on chart put in by d3.js + */ +function cleanUpChart(svg) { + svg.selectAll(".domain").remove(); +} + +/** + * + * @param {Array} YAxisLabels + * @param {Int} spacePerChar + * @param {Int} extraSpace + * + * Calculate the longest Y-Axis label + */ +function calculateYAxisWidth(YAxisLabels, spacePerChar, extraSpace = 0) { + var YAxisLabelsCopy = YAxisLabels.slice(); + var longestLabel = YAxisLabelsCopy.sort(function (a, b) { + return b.length - a.length; + })[0]; + return longestLabel.length * spacePerChar + extraSpace; +} + +/** + * + * @param {String} chartSelector + * @param {Array} taskTypes + * @param {Array} tasks + * + * Builds chart using supplied selector and data + */ +export function createDeveloperChart(chartSelector, taskTypes, tasks) { + margin.left = calculateYAxisWidth(taskTypes, 15, gapSpacing); + var rowHeight = 36; + var highestValue = d3.max(tasks, (d) => d.value); + var height = taskTypes.length * rowHeight + margin.bottom; + var parent = d3.select(chartSelector); + var containerWidth = parent.node().getBoundingClientRect().width; + if (containerWidth <= 0) { + var closestCol = document + .querySelector(chartSelector) + .closest('[class*="col-"]'); + + if (closestCol.clientWidth <= 0) { + return; + } + containerWidth = closestCol.clientWidth - margin.left; + } + var width = containerWidth - margin.right - margin.left; + + var x = d3 + .scaleLinear() + .domain([0, highestValue + 10]) + .range([0, width + margin.right]); + + var y = d3 + .scaleBand() + .domain(taskTypes) + .rangeRound([0, height - margin.top - margin.bottom]) + .padding(0.1); - var width = 500 - margin.left - margin.right, - height = 300 - margin.top - margin.bottom; + var xAxis = d3.axisBottom(x).tickValues(d3.range(0, highestValue + 10, 10)); + var yAxis = d3.axisRight(y).tickPadding(-margin.left).tickSize(0); + + sortData(tasks); + + // Build initial chart body var svg = d3 - .select(`#${id}`) + .select(chartSelector) .append("svg") + .attr("class", "chart") .attr("width", width + margin.left + margin.right) - .attr("height", height + margin.top + margin.bottom) + .attr("height", height - margin.top) .append("g") - .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); - - var x = d3.scale - .linear() - .range([0, width]) - .domain([ - 0, - d3.max(data, function (d) { - return d.count; - }), - ]); - - var y = d3.scale - .ordinal() - .rangeRoundBands([height, 0], 0.1) - .domain( - data.map(function (d) { - return d.label; - }) + .attr("class", "horizontal-bar-chart") + .attr("width", width + margin.left + margin.right) + .attr("height", height) + .attr("transform", "translate(" + margin.left + ", " + margin.top + ")"); + + addBarsToChart(svg, tasks, x, y); + addXAxis(svg, height, margin, xAxis); + addYAxis(svg, yAxis, tasks); + + addYAxisHorizontalLines(svg, yAxis, width, margin); + addXAxisTicks(svg); + cleanUpChart(svg); +} + +function buildCharts() { + if (document.querySelector("#hackerearth-chart")) { + createDeveloperChart( + "#hackerearth-chart", + hackerEarthData.labels, + hackerEarthData.tasks ); + } + if (document.querySelector("#opensource-chart")) { + createDeveloperChart( + "#opensource-chart", + openSourceData.labels, + openSourceData.tasks + ); + } +} - var yAxis = d3.svg.axis().scale(y).tickSize(0).orient("left"); +function clearCharts() { + const hackerEarthData = document.querySelector("#hackerearth-chart"); + if (hackerEarthData) { + hackerEarthData.innerHTML = ""; + } + const openSourceData = document.querySelector("#opensource-chart"); + if (openSourceData) { + openSourceData.innerHTML = ""; + } +} - var gy = svg.append("g").attr("class", "y axis").call(yAxis); +var mediumBreakpoint = 620; - var bars = svg.selectAll(".bar").data(data).enter().append("g"); +// A bit of a hack, but chart doesn't load with full year axis on first load, +// It has to be loaded once, and then again +// This will need looking into but this fix will work for now +if (window.innerWidth >= mediumBreakpoint) { + buildCharts(); + setTimeout(function () { + clearCharts(); + buildCharts(); + }, 0); +} - bars - .append("rect") - .attr("class", "bar") - .attr("y", function (d) { - return y(d.label); - }) - .attr("height", y.rangeBand()) - .attr("x", 8) - .attr("width", function (d) { - return x(d.count); - }) - .attr("fill", function (d) { - if (d.label == "Ubuntu") { - return "#E95420"; - } else { - return "#AEA79F"; - } - }); - - bars - .append("text") - .attr("class", "label") - .attr("y", function (d) { - return y(d.label) + y.rangeBand() / 2 + 4; - }) - .attr("x", function (d) { - return x(d.count) + 17; - }) - .text(function (d) { - return `${d.count}%`; - }); -} - -createChart(hackerEarthData, "hackerearth-chart"); -createChart(OpenSourcedata, "opensource-chart"); +window.addEventListener( + "resize", + debounce(function () { + if (window.innerWidth >= mediumBreakpoint) { + clearCharts(); + buildCharts(); + } + }, 250) +); diff --git a/static/js/src/release-chart-manager.js b/static/js/src/release-chart-manager.js new file mode 100644 index 00000000000..7f4188bed6a --- /dev/null +++ b/static/js/src/release-chart-manager.js @@ -0,0 +1,263 @@ +import { createReleaseChartOld } from "./release-chart-old.js"; +import { createReleaseChart } from "./release-chart.js"; +import { debounce } from "./utils/debounce.js"; +import { + serverAndDesktopReleases, + kernelReleases, + kernelReleaseSchedule, + kernelReleases2204, + kernelReleases2004, + kernelReleases1804, + kernelReleases1604, + kernelReleases1404, + kernelReleasesALL, + kernelReleasesLTS, + openStackReleases, + kubernetesReleases, + microStackReleases, + desktopServerStatus, + kernelStatus, + kernelReleaseScheduleStatus, + kernelStatusLTS, + kernelStatusALL, + openStackStatus, + kubernetesStatus, + microStackStatus, + desktopServerReleaseNames, + kernelReleaseNames, + kernelVersionNames, + kernelReleaseScheduleNames, + kernelReleaseNames2204, + kernelReleaseNames2004, + kernelReleaseNames1804, + kernelReleaseNames1604, + kernelReleaseNames1404, + kernelReleaseNamesLTS, + kernelReleaseNamesALL, + openStackReleaseNames, + kubernetesReleaseNames, + microStackReleaseNames, +} from "./chart-data.js"; + +function buildCharts() { + if (document.querySelector("#server-desktop-eol")) { + delete desktopServerStatus.MAINTENANCE_UPDATES; + createReleaseChart( + "#server-desktop-eol", + "#server-desktop-eol-key", + desktopServerReleaseNames, + desktopServerStatus, + serverAndDesktopReleases + ); + } + if (document.querySelector("#server-desktop-eol-old")) { + delete desktopServerStatus.MAINTENANCE_UPDATES; + createReleaseChartOld( + "#server-desktop-eol-old", + desktopServerReleaseNames, + desktopServerStatus, + serverAndDesktopReleases + ); + } + if (document.querySelector("#eol-1604")) { + delete desktopServerStatus.MAINTENANCE_UPDATES; + createReleaseChartOld( + "#eol-1604", + desktopServerReleaseNames, + desktopServerStatus, + serverAndDesktopReleases, + false, + [], + "16.04" + ); + } + if (document.querySelector("#kernel-eol")) { + createReleaseChartOld( + "#kernel-eol", + kernelReleaseNames, + kernelStatus, + kernelReleases, + kernelVersionNames + ); + } + if (document.querySelector("#kernel2204")) { + createReleaseChartOld( + "#kernel2204", + kernelReleaseNames2204, + kernelStatus, + kernelReleases2204 + ); + } + if (document.querySelector("#kernel2004")) { + createReleaseChartOld( + "#kernel2004", + kernelReleaseNames2004, + kernelStatus, + kernelReleases2004 + ); + } + if (document.querySelector("#kernel1804")) { + createReleaseChartOld( + "#kernel1804", + kernelReleaseNames1804, + kernelStatus, + kernelReleases1804 + ); + } + if (document.querySelector("#kernel1604")) { + createReleaseChartOld( + "#kernel1604", + kernelReleaseNames1604, + kernelStatus, + kernelReleases1604 + ); + } + if (document.querySelector("#kernel1404")) { + createReleaseChartOld( + "#kernel1404", + kernelReleaseNames1404, + kernelStatus, + kernelReleases1404 + ); + } + if (document.querySelector("#kernellts")) { + createReleaseChartOld( + "#kernellts", + kernelReleaseNamesLTS, + kernelStatusLTS, + kernelReleasesLTS + ); + } + if (document.querySelector("#kernelall")) { + createReleaseChartOld( + "#kernelall", + kernelReleaseNamesALL, + kernelStatusALL, + kernelReleasesALL + ); + } + if (document.querySelector("#openstack-eol")) { + createReleaseChartOld( + "#openstack-eol", + openStackReleaseNames, + openStackStatus, + openStackReleases + ); + } + if (document.querySelector("#kubernetes-eol")) { + createReleaseChartOld( + "#kubernetes-eol", + kubernetesReleaseNames, + kubernetesStatus, + kubernetesReleases, + false, + true + ); + } + if (document.querySelector("#kernel-schedule")) { + createReleaseChartOld( + "#kernel-schedule", + kernelReleaseScheduleNames, + kernelReleaseScheduleStatus, + kernelReleaseSchedule + ); + } + if (document.querySelector("#microstack-eol")) { + createReleaseChartOld( + "#microstack-eol", + microStackReleaseNames, + microStackStatus, + microStackReleases + ); + } +} + +function clearCharts() { + const serverDesktopEolOld = document.querySelector("#server-desktop-eol-old"); + if (serverDesktopEolOld) { + serverDesktopEolOld.innerHTML = ""; + } + const serverDesktopEol = document.querySelector("#server-desktop-eol"); + if (serverDesktopEol) { + serverDesktopEol.innerHTML = ""; + } + const serverDesktopEolKey = document.querySelector("#server-desktop-eol-key"); + if (serverDesktopEolKey) { + serverDesktopEolKey.innerHTML = ""; + } + const eol1604 = document.querySelector("#eol-1604"); + if (eol1604) { + eol1604.innerHTML = ""; + } + const kernelEol = document.querySelector("#kernel-eol"); + if (kernelEol) { + kernelEol.innerHTML = ""; + } + const kernel2204 = document.querySelector("#kernel2204"); + if (kernel2204) { + kernel2204.innerHTML = ""; + } + const kernel2004 = document.querySelector("#kernel2004"); + if (kernel2004) { + kernel2004.innerHTML = ""; + } + const kernel1804 = document.querySelector("#kernel1804"); + if (kernel1804) { + kernel1804.innerHTML = ""; + } + const kernel1604 = document.querySelector("#kernel1604"); + if (kernel1604) { + kernel1604.innerHTML = ""; + } + const kernel1404 = document.querySelector("#kernel1404"); + if (kernel1404) { + kernel1404.innerHTML = ""; + } + const kernellts = document.querySelector("#kernellts"); + if (kernellts) { + kernellts.innerHTML = ""; + } + const kernelall = document.querySelector("#kernelall"); + if (kernelall) { + kernelall.innerHTML = ""; + } + const openstackEol = document.querySelector("#openstack-eol"); + if (openstackEol) { + openstackEol.innerHTML = ""; + } + const kubernetesEol = document.querySelector("#kubernetes-eol"); + if (kubernetesEol) { + kubernetesEol.innerHTML = ""; + } + const kernelSchedule = document.querySelector("#kernel-schedule"); + if (kernelSchedule) { + kernelSchedule.innerHTML = ""; + } + const microstackEol = document.querySelector("#microstack-eol"); + if (microstackEol) { + microstackEol.innerHTML = ""; + } +} + +var mediumBreakpoint = 620; + +// A bit of a hack, but chart doesn't load with full year axis on first load, +// It has to be loaded once, and then again +// This will need looking into but this fix will work for now +if (window.innerWidth >= mediumBreakpoint) { + buildCharts(); + setTimeout(function () { + clearCharts(); + buildCharts(); + }, 0); +} + +window.addEventListener( + "resize", + debounce(function () { + if (window.innerWidth >= mediumBreakpoint) { + clearCharts(); + buildCharts(); + } + }, 250) +); diff --git a/static/js/src/chart.js b/static/js/src/release-chart-old.js similarity index 99% rename from static/js/src/chart.js rename to static/js/src/release-chart-old.js index 55c50b29fee..5f426a60057 100644 --- a/static/js/src/chart.js +++ b/static/js/src/release-chart-old.js @@ -309,7 +309,7 @@ function calculateYAxisWidth(YAxisLabels) { * * Builds chart using supplied selector and data */ -export function createChart( +export function createReleaseChartOld( chartSelector, taskTypes, taskStatus, diff --git a/static/js/src/release-chart.js b/static/js/src/release-chart.js index 72fe93d340d..10478f79050 100644 --- a/static/js/src/release-chart.js +++ b/static/js/src/release-chart.js @@ -1,264 +1,617 @@ -import { createChart } from "./chart"; -import { debounce } from "./utils/debounce.js"; -import { - serverAndDesktopReleases, - kernelReleases, - kernelReleaseSchedule, - kernelReleases2204, - kernelReleases2004, - kernelReleases1804, - kernelReleases1604, - kernelReleases1404, - kernelReleasesALL, - kernelReleasesLTS, - openStackReleases, - kubernetesReleases, - microStackReleases, - desktopServerStatus, - kernelStatus, - kernelReleaseScheduleStatus, - kernelStatusLTS, - kernelStatusALL, - openStackStatus, - kubernetesStatus, - microStackStatus, - desktopServerReleaseNames, - kernelReleaseNames, - kernelVersionNames, - kernelReleaseScheduleNames, - kernelReleaseNames2204, - kernelReleaseNames2004, - kernelReleaseNames1804, - kernelReleaseNames1604, - kernelReleaseNames1404, - kernelReleaseNamesLTS, - kernelReleaseNamesALL, - openStackReleaseNames, - kubernetesReleaseNames, - microStackReleaseNames, -} from "./chart-data"; - -function buildCharts() { - if (document.querySelector("#server-desktop-eol-old")) { - delete desktopServerStatus.MAINTENANCE_UPDATES; - createChart( - "#server-desktop-eol-old", - desktopServerReleaseNames, - desktopServerStatus, - serverAndDesktopReleases - ); - } - if (document.querySelector("#server-desktop-eol")) { - delete desktopServerStatus.MAINTENANCE_UPDATES; - createSupportChart( - "#server-desktop-eol", - "#server-desktop-eol-key", - desktopServerReleaseNames, - desktopServerStatus, - serverAndDesktopReleases - ); - } - if (document.querySelector("#eol-1604")) { - delete desktopServerStatus.MAINTENANCE_UPDATES; - createChart( - "#eol-1604", - desktopServerReleaseNames, - desktopServerStatus, - serverAndDesktopReleases, - false, - [], - "16.04" - ); - } - if (document.querySelector("#kernel-eol")) { - createChartWithTitles( - "#kernel-eol", - kernelReleaseNames, - "Ubuntu", - kernelStatus, - kernelReleases, - kernelVersionNames, - "Kernel" - ); - } - if (document.querySelector("#kernel2204")) { - createChart( - "#kernel2204", - kernelReleaseNames2204, - kernelStatus, - kernelReleases2204 - ); - } - if (document.querySelector("#kernel2004")) { - createChart( - "#kernel2004", - kernelReleaseNames2004, - kernelStatus, - kernelReleases2004 - ); - } - if (document.querySelector("#kernel1804")) { - createChart( - "#kernel1804", - kernelReleaseNames1804, - kernelStatus, - kernelReleases1804 - ); - } - if (document.querySelector("#kernel1604")) { - createChart( - "#kernel1604", - kernelReleaseNames1604, - kernelStatus, - kernelReleases1604 - ); - } - if (document.querySelector("#kernel1404")) { - createChart( - "#kernel1404", - kernelReleaseNames1404, - kernelStatus, - kernelReleases1404 - ); - } - if (document.querySelector("#kernellts")) { - createChart( - "#kernellts", - kernelReleaseNamesLTS, - kernelStatusLTS, - kernelReleasesLTS - ); - } - if (document.querySelector("#kernelall")) { - createChart( - "#kernelall", - kernelReleaseNamesALL, - kernelStatusALL, - kernelReleasesALL - ); +/** + * + * @param {Array} tasks + * + * Sorts tasks by date + */ +function sortTasks(tasks) { + tasks.sort(function (a, b) { + return a.endDate - b.endDate; + }); + + tasks.sort(function (a, b) { + return a.startDate - b.startDate; + }); + + return tasks; +} + +/** + * + * @param {*} svg + * @param {Array} tasks + * @param {Object} taskStatus + * @param {*} x + * @param {*} y + * + * Add bars to chart using supplied data + */ +function addBarsToChart(svg, tasks, taskStatus, x, y, highlightVersion) { + svg + .selectAll(".chart") + .data(tasks, function (d) { + return d.startDate + d.taskName + d.endDate; + }) + .enter() + .append("rect") + .attr("class", function (d) { + var className = ""; + if (taskStatus[d.status] === null) { + return "bar"; + } + + className += " " + taskStatus[d.status]; + + return className; + }) + .attr("y", 0) + .attr("transform", function (d) { + if (d.status === "MAIN_UNIVERSE" || d.status === "PRO_SUPPORT") { + return ( + "translate(" + + x(d.startDate) + + "," + + (y(d.taskName) - y.bandwidth()) + + ")" + ); + } + return "translate(" + x(d.startDate) + "," + y(d.taskName) + ")"; + }) + .attr("height", function () { + return y.bandwidth(); + }) + .attr("width", function (d) { + return x(d.endDate) - x(d.startDate); + }); +} + +/** + * + * @param {*} svg + * @param {Int} height + * @param {Object} margin + * @param {*} xAxis + * + * Add x-axis group to SVG + */ +function addXAxis(svg, height, margin, xAxis) { + svg + .append("g") + .attr("class", "x axis") + .attr("transform", "translate(0, " + (margin.top - 32) + ")") + .call(xAxis); +} + +/** + * + * @param {*} svg + * @param {*} yAxis + * + * Append y-axis group to SVG + */ +function appendYAxisGroup(svg, yAxis) { + return svg.append("g").attr("class", "y axis").call(yAxis); +} + +/** + * + * @param {*} yAxisGroup + * @param {*} y + * + * Centers labels in line with bars + */ +function transformTickText(yAxisGroup, y) { + yAxisGroup.selectAll(".tick text").attr("transform", function (d) { + var centerOffset = y.bandwidth() / 2; + return "translate(0, " + -centerOffset + ")"; + }); +} + +/** + * + * @param {*} textElement + * + * Splits the label into version number (inc. LTS if it exists) + * and release name and puts them over two lines + */ +function formatLabel(textElement) { + var textXValue = textElement.attr("x"); + var words = textElement.text().split("("); + + if (words[1]) { + words[1] = "(" + words[1]; } - if (document.querySelector("#openstack-eol")) { - createChart( - "#openstack-eol", - openStackReleaseNames, - openStackStatus, - openStackReleases - ); + + textElement.text(""); + + textElement + .append("tspan") + .attr("x", textXValue) + .attr("dy", "-0.5em") + .text(words[0]) + .call(emboldenLTSLabels); + + if (words.length > 1) { + textElement + .append("tspan") + .attr("x", textXValue) + .attr("dy", "1.6em") + .text(words.slice(1).join(" ")); } - if (document.querySelector("#kubernetes-eol")) { - createChart( - "#kubernetes-eol", - kubernetesReleaseNames, - kubernetesStatus, - kubernetesReleases, - false, - true - ); +} + +/** + * + * @param {*} textNode + * + * Embolden text if it contains LTS + * + */ +function emboldenLTSLabels(textNode) { + const textContent = textNode.text(); + if (textContent?.includes("LTS")) { + textNode.classed("chart__label--bold", true); } - if (document.querySelector("#kernel-schedule")) { - createChart( - "#kernel-schedule", - kernelReleaseScheduleNames, - kernelReleaseScheduleStatus, - kernelReleaseSchedule +} + +/** + * + * @param {*} yAxisGroup + * + * Loops through the axis labels and calls the formatLabel + * function on them + */ +function formatAxisLabels(yAxisGroup) { + yAxisGroup.selectAll(".tick text").call(function (t) { + t.each(function (d) { + formatLabel(d3.select(this)); + }); + }); +} + +/** + * + * @param {*} svg + * @param {*} yAxis + * @param {*} y + * + * Builds and appends the y-axis + */ +function addYAxis(svg, yAxis, y) { + var yAxisGroup = appendYAxisGroup(svg, yAxis); + transformTickText(yAxisGroup, y); + formatAxisLabels(yAxisGroup); +} + +/** + * + * @param {*} yAxis + * + * Gets the tick positions of the y-axis + */ +function getTickPositions(yAxis) { + const yAxisScale = yAxis.scale(); + const ticks = yAxisScale.ticks ? yAxisScale.ticks() : yAxisScale.domain(); + return ticks.map((tick) => yAxisScale(tick)); +} + +/** + * + * @param {*} svg + * @param {*} yAxis + * @param {Int} width + * @param {Obj} margin + * + * Find the postion of the Y-axis ticks and adds a horizontal + * line above each label and one that spans the chart area + */ +function addYAxisHorizontalLines(svg, yAxis, width, margin) { + const tickPositions = getTickPositions(yAxis); + const lineAdjustment = 27; + + tickPositions.forEach((posY, index) => { + svg + .append("line") + .attr("x1", -margin.left) + .attr("x2", width + margin.right) + .attr("y1", posY - lineAdjustment) + .attr("y2", posY - lineAdjustment) + .attr("stroke", "#D9D9D9") + .attr("stroke-width", index === 0 ? 2 : 1); + }); +} + +/** + * + * @param {*} svg + * @param {*} versionAxis + * + * Add version axis to chart + */ +function addVersionAxis(svg, versionAxis) { + svg.append("g").attr("class", "version axis").call(versionAxis); +} + +/** + * + * @param {*} svg + * + * Clean up unwanted elements on chart put in by d3.js + */ +function cleanUpChart(svg) { + svg.selectAll(".domain").remove(); +} + +/** + * + * @param {*} svg + * @param {String} highlightVersion + * + * Set version axis labels + */ +function highlightChartRow(svg, scale, highlightVersion) { + const domain = scale.domain(); + const tickValues = domain.map((value) => value.toString()); + + svg.selectAll(".y.axis .tick text").each(function (d, i) { + const tickText = d3.select(this); + const textContent = tickValues[i].toString(); + + var isNotHighlightedVersion = + highlightVersion && !textContent.includes(highlightVersion); + var isYearLabel = + textContent.includes("20") && !textContent.includes("Ubuntu "); + + if (isNotHighlightedVersion) { + tickText.classed("chart__label--transparent", true); + } + + if (isYearLabel) { + tickText.classed("chart__label--transparent", false); + } + }); +} + +/** + * + * @param {*} svg + * + * Set version axis labels + */ +function setVersionAxisLabels(svg, taskVersions) { + svg.selectAll(".version .tick text").select(function (tickLabel, index) { + this.textContent = taskVersions[index]; + }); +} + +/** + * + * @param {*} svg + * @param {Int} height + * + * Adds vertical lines to the x axis + */ +function addXAxisVerticalLines(svg, height, margin) { + svg + .selectAll(".x.axis .tick line") + .attr("y1", height - margin.bottom - margin.top) + .attr("y2", 26); +} + +/** + * + * @param {String} chartSelector + * @param {Object} taskStatus + * + * Builds key for supplied chart based on task status + */ +function buildChartKey(chartSelector, taskStatus) { + var taskStatusKeys = Object.keys(taskStatus); + var rectDimensions = 25; + var rowHeight = rectDimensions + 5; + var gapBetweenRectAndText = 10; + var verticalTextAlignmentOffset = 16; + var containerWidth = document.querySelector(chartSelector).clientWidth; + + var numberOfExtraLines = + getMaxNumberOfLines(taskStatusKeys, containerWidth) - 1; + var extraChartHeight = numberOfExtraLines * 9; + + var chartKey = d3 + .select(chartSelector) + .append("svg") + .attr("class", "chart-key") + .attr("width", containerWidth) + .attr( + "height", + rowHeight * taskStatusKeys.length + + extraChartHeight * taskStatusKeys.length ); - } - if (document.querySelector("#microstack-eol")) { - createChart( - "#microstack-eol", - microStackReleaseNames, - microStackStatus, - microStackReleases + + taskStatusKeys.forEach(function (key, i) { + var keyRow = chartKey + .append("g") + .attr("class", "chart-key__row") + .attr( + "transform", + "translate(0, " + (rowHeight * i + extraChartHeight * i) + ")" + ) + .attr("height", rectDimensions); + + keyRow + .append("rect") + .attr("class", taskStatus[key]) + .attr("width", rectDimensions) + .attr("height", rectDimensions) + .attr("y", 0); + + keyRow + .append("text") + .text(formatKeyLabel(key)) + .attr("class", "chart-key__label") + .attr("x", rectDimensions + gapBetweenRectAndText) + .attr("y", verticalTextAlignmentOffset) + .call(wrapText, containerWidth - rectDimensions - gapBetweenRectAndText); + }); +} + +/** + * + * @param {String} text + * @param {Int} containerWidth + * + * Find the max number of lines that any given text will occupy from + * a list of texts, based on a given container width + */ +function getMaxNumberOfLines(textList, width) { + var tempSvg = (svg = document.createElementNS( + "http://www.w3.org/2000/svg", + "svg" + )); + svg.style.position = "absolute"; + svg.style.visibility = "hidden"; + svg.width = width; + document.body.appendChild(svg); + + var maxNumberOfLines = 1; + + textList.forEach(function (key, i) { + let textNode = document.createElementNS( + "http://www.w3.org/2000/svg", + "text" ); - } + textNode.textContent = formatKeyLabel(key); + svg.appendChild(textNode); + var numberOfLines = Math.ceil(textNode.getComputedTextLength() / width); + if (numberOfLines > maxNumberOfLines) { + maxNumberOfLines = numberOfLines; + } + svg.removeChild(textNode); + }); + document.body.removeChild(svg); + return maxNumberOfLines; } -function clearCharts() { - const serverDesktopEolOld = document.querySelector("#server-desktop-eol-old"); - if (serverDesktopEolOld) { - serverDesktopEolOld.innerHTML = ""; - } - const serverDesktopEol = document.querySelector("#server-desktop-eol"); - if (serverDesktopEol) { - serverDesktopEol.innerHTML = ""; - } - const serverDesktopEolKey = document.querySelector("#server-desktop-eol-key"); - if (serverDesktopEolKey) { - serverDesktopEolKey.innerHTML = ""; - } - const eol1604 = document.querySelector("#eol-1604"); - if (eol1604) { - eol1604.innerHTML = ""; - } - const kernelEol = document.querySelector("#kernel-eol"); - if (kernelEol) { - kernelEol.innerHTML = ""; - } - const kernel2204 = document.querySelector("#kernel2204"); - if (kernel2204) { - kernel2204.innerHTML = ""; - } - const kernel2004 = document.querySelector("#kernel2004"); - if (kernel2004) { - kernel2004.innerHTML = ""; - } - const kernel1804 = document.querySelector("#kernel1804"); - if (kernel1804) { - kernel1804.innerHTML = ""; - } - const kernel1604 = document.querySelector("#kernel1604"); - if (kernel1604) { - kernel1604.innerHTML = ""; - } - const kernel1404 = document.querySelector("#kernel1404"); - if (kernel1404) { - kernel1404.innerHTML = ""; - } - const kernellts = document.querySelector("#kernellts"); - if (kernellts) { - kernellts.innerHTML = ""; - } - const kernelall = document.querySelector("#kernelall"); - if (kernelall) { - kernelall.innerHTML = ""; - } - const openstackEol = document.querySelector("#openstack-eol"); - if (openstackEol) { - openstackEol.innerHTML = ""; +/** + * + * @param {String} text + * @param {Int} width + * + * At the point where a text would be longer that the container width, + * split the text into tspan (two lines) + */ +function wrapText(text, width) { + var negativeTextMargin = text.node().getComputedTextLength() > width ? 5 : 0; + text.each(function () { + var text = d3.select(this), + words = text.text().split(/\s+/).reverse(), + word, + line = [], + lineNumber = 0, + lineHeight = 1.1, + x = text.attr("x"), + y = text.attr("y"), + dy = 0; + tspan = text + .text(null) + .append("tspan") + .attr("x", x) + .attr("y", y - negativeTextMargin) + .attr("dy", dy + "em"); + while ((word = words.pop())) { + line.push(word); + tspan.text(line.join(" ")); + if (tspan.node().getComputedTextLength() > width) { + line.pop(); + tspan.text(line.join(" ")); + line = [word]; + tspan = text + .append("tspan") + .attr("x", x) + .attr("y", y - negativeTextMargin) + .attr("dy", ++lineNumber * lineHeight + dy + "em") + .text(word); + } + } + }); +} + +/** + * + * @param {String} key + * + * Formats key into readable string + */ +function formatKeyLabel(key) { + var keyLowerCase = key.toLowerCase().replace(/_/g, " "); + var formattedKey = + keyLowerCase.charAt(0).toUpperCase() + keyLowerCase.substr(1); + formattedKey = formattedKey.replace( + "Lts", + "Ubuntu LTS release Standard Support" + ); + formattedKey = formattedKey.replace(" openstack ", " OpenStack "); + formattedKey = formattedKey.replace("kub", "Kub"); + formattedKey = formattedKey.replace( + "Interim release", + "Interim release standard security maintenance (9 months)" + ); + formattedKey = formattedKey.replace( + "Esm", + "LTS Expanded Security Maintenance (ESM) for Ubuntu Main (additional 5 years)" + ); + formattedKey = formattedKey.replace("Cve", "CVE/Critical fixes only"); + formattedKey = formattedKey.replace("Early", "Early preview"); + formattedKey = formattedKey.replace( + "Hardware and maintenance updates", + "LTS standard security maintenance for Ubuntu Main (initial 5 years)" + ); + formattedKey = formattedKey.replace( + "Main universe", + "LTS Expanded Security Maintenance (ESM) for Ubuntu Universe (10 years)" + ); + formattedKey = formattedKey.replace( + "Microstack esm", + "Expanded Security Maintenance (ESM)" + ); + formattedKey = formattedKey.replace( + "Pro support", + "Ubuntu Pro + Support coverage" + ); + return formattedKey; +} + +/** + * + * @param {Array} taskTypes + * + * Calculate the longest Y-Axis label + */ +function calculateYAxisWidth(YAxisLabels) { + var YAxisLabelsCopy = YAxisLabels.slice(); + var longestLabel = YAxisLabelsCopy.sort(function (a, b) { + return b.length - a.length; + })[0]; + return longestLabel.length * 7; +} + +/** + * + * @param {String} chartSelector + * @param {Array} taskTypes + * @param {Object} taskStatus + * @param {Array} tasks + * + * Builds chart using supplied selector and data + */ +export function createReleaseChart( + chartSelector, + keySelector, + taskTypes, + taskStatus, + tasks, + taskVersions, + removePadding, + highlightVersion +) { + var margin = { + top: 12, + right: 40, + bottom: 20, + }; + margin.left = calculateYAxisWidth(taskTypes); + var rowHeight = 64; + var timeDomainStart; + var timeDomainEnd; + var earliestStartDate = d3.min(tasks, (d) => d.startDate); + var latestEndDate = d3.max(tasks, (d) => d.endDate); + if (removePadding) { + timeDomainStart = earliestStartDate; + timeDomainEnd = latestEndDate; + } else { + timeDomainStart = d3.timeYear.offset(earliestStartDate, -1); + timeDomainEnd = d3.timeYear.offset(latestEndDate, +1); } - const kubernetesEol = document.querySelector("#kubernetes-eol"); - if (kubernetesEol) { - kubernetesEol.innerHTML = ""; + var keyAttachmentSelector = keySelector || chartSelector; + var height = taskTypes.length * rowHeight; + var containerWidth = document.querySelector(chartSelector).clientWidth; + if (containerWidth <= 0) { + var closestCol = document + .querySelector(chartSelector) + .closest('[class*="col-"]'); + + if (closestCol.clientWidth <= 0) { + return; + } + + containerWidth = closestCol.clientWidth - margin.left; } - const kernelSchedule = document.querySelector("#kernel-schedule"); - if (kernelSchedule) { - kernelSchedule.innerHTML = ""; + var width = containerWidth - margin.right - margin.left; + + var x = d3 + .scaleTime() + .domain([timeDomainStart, timeDomainEnd]) + .range([0, width + margin.right]) + .clamp(true); + + var y = d3 + .scaleBand() + .domain(taskTypes) + .rangeRound([0, height - margin.top - margin.bottom]) + .padding(0.58); + + var version = d3 + .scaleBand() + .domain(taskTypes) + .rangeRound([0, height - margin.top - margin.bottom]) + .padding(0.4); + + var xAxis = d3.axisBottom(x); + + var yAxis = d3.axisRight(y).tickPadding(-margin.left).tickSize(0); + + var chartTranslateX = margin.left; + + if (taskVersions) { + var versionAxis = d3 + .axisRight(version) + .tickPadding(-margin.left * 1.6) + .tickSize(0); + + chartTranslateX = margin.left * 1.6; } - const microstackEol = document.querySelector("#microstack-eol"); - if (microstackEol) { - microstackEol.innerHTML = ""; + + sortTasks(tasks); + + // Build initial chart body + var svg = d3 + .select(chartSelector) + .append("svg") + .attr("class", "chart") + .attr("width", width + margin.left + margin.right) + .attr("height", height - margin.top - margin.bottom) + .append("g") + .attr("class", "gantt-chart") + .attr("width", width + margin.left + margin.right) + .attr("height", height) + .attr( + "transform", + "translate(" + chartTranslateX + ", " + margin.top + ")" + ); + + addBarsToChart(svg, tasks, taskStatus, x, y, highlightVersion); + addXAxis(svg, height, margin, xAxis); + addYAxis(svg, yAxis, y); + + if (taskVersions) { + addVersionAxis(svg, versionAxis); + setVersionAxisLabels(svg, taskVersions); } -} -var mediumBreakpoint = 620; - -// A bit of a hack, but chart doesn't load with full year axis on first load, -// It has to be loaded once, and then again -// This will need looking into but this fix will work for now -if (window.innerWidth >= mediumBreakpoint) { - buildCharts(); - setTimeout(function () { - clearCharts(); - buildCharts(); - }, 0); -} + addXAxisVerticalLines(svg, height, margin); + addYAxisHorizontalLines(svg, yAxis, width, margin); + cleanUpChart(svg); + buildChartKey(keyAttachmentSelector, taskStatus); -window.addEventListener( - "resize", - debounce(function () { - if (window.innerWidth >= mediumBreakpoint) { - clearCharts(); - buildCharts(); - } - }, 250) -); + highlightChartRow(svg, y, highlightVersion); +} diff --git a/static/js/src/support-chart.js b/static/js/src/support-chart.js deleted file mode 100644 index 737725a9d60..00000000000 --- a/static/js/src/support-chart.js +++ /dev/null @@ -1,653 +0,0 @@ -import { ro } from "date-fns/locale"; - -/** - * - * @param {Array} tasks - * - * Sorts tasks by date - */ -function sortTasks(tasks) { - tasks.sort(function (a, b) { - return a.endDate - b.endDate; - }); - - tasks.sort(function (a, b) { - return a.startDate - b.startDate; - }); - - return tasks; -} - -/** - * - * @param {*} svg - * @param {Array} tasks - * @param {Object} taskStatus - * @param {*} x - * @param {*} y - * - * Add bars to chart using supplied data - */ -function addBarsToChart(svg, tasks, taskStatus, x, y, highlightVersion) { - svg - .selectAll(".chart") - .data(tasks, function (d) { - return d.startDate + d.taskName + d.endDate; - }) - .enter() - .append("rect") - .attr("class", function (d) { - var className = ""; - - if (taskStatus[d.status] === null) { - return "bar"; - } - - if (highlightVersion && !d.taskName.includes(highlightVersion)) { - className += " chart__bar--transparent"; - } - - className += " " + taskStatus[d.status]; - - return className; - }) - .attr("y", 0) - .attr("transform", function (d) { - if (d.status === "MAIN_UNIVERSE" || d.status === "PRO_SUPPORT") { - return ( - "translate(" + - x(d.startDate) + - "," + - (y(d.taskName) - y.bandwidth()) + - ")" - ); - } - return "translate(" + x(d.startDate) + "," + y(d.taskName) + ")"; - }) - .attr("height", function () { - return y.bandwidth(); - }) - .attr("width", function (d) { - return x(d.endDate) - x(d.startDate); - }); -} - -/** - * - * @param {*} svg - * @param {Int} height - * @param {Object} margin - * @param {*} xAxis - * - * Add x-axis group to SVG - */ -function addXAxis(svg, height, margin, xAxis) { - svg - .append("g") - .attr("class", "x axis") - .attr("transform", "translate(0, " + (margin.top - 32) + ")") - .call(xAxis); -} - -/** - * - * @param {*} svg - * @param {*} yAxis - * - * Append y-axis group to SVG - */ -function appendYAxisGroup(svg, yAxis) { - return svg.append("g").attr("class", "y axis").call(yAxis); -} - -/** - * - * @param {*} yAxisGroup - * @param {*} y - * - * Centers labels in line with bars - */ -function transformTickText(yAxisGroup, y) { - yAxisGroup.selectAll(".tick text").attr("transform", function (d) { - var centerOffset = y.bandwidth() / 2; - return "translate(0, " + -centerOffset + ")"; - }); -} - -/** - * - * @param {*} textElement - * - * Splits the label into version number (inc. LTS if it exists) - * and release name and puts them over two lines - */ -function formatLabel(textElement) { - var textXValue = textElement.attr("x"); - var words = textElement.text().split("("); - - if (words[1]) { - words[1] = "(" + words[1]; - } - - textElement.text(""); - - textElement - .append("tspan") - .attr("x", textXValue) - .attr("dy", "-0.5em") - .text(words[0]) - .call(emboldenLTSLabels); - - if (words.length > 1) { - textElement - .append("tspan") - .attr("x", textXValue) - .attr("dy", "1.6em") - .text(words.slice(1).join(" ")); - } -} - -/** - * - * @param {*} textNode - * - * Embolden text if it contains LTS - * - */ -function emboldenLTSLabels(textNode) { - const textContent = textNode.text(); - if (textContent?.includes("LTS")) { - textNode.classed("chart__label--bold", true); - } -} - -/** - * - * @param {*} yAxisGroup - * - * Loops through the axis labels and calls the formatLabel - * function on them - */ -function formatAxisLabels(yAxisGroup) { - yAxisGroup.selectAll(".tick text").call(function (t) { - t.each(function (d) { - formatLabel(d3.select(this)); - }); - }); -} - -/** - * - * @param {*} svg - * @param {*} yAxis - * @param {*} y - * - * Builds and appends the y-axis - */ -function addYAxis(svg, yAxis, y) { - var yAxisGroup = appendYAxisGroup(svg, yAxis); - transformTickText(yAxisGroup, y); - formatAxisLabels(yAxisGroup); -} - -/** - * - * @param {*} yAxis - * - * Gets the tick positions of the y-axis - */ -function getTickPositions(yAxis) { - const yAxisScale = yAxis.scale(); - const ticks = yAxisScale.ticks ? yAxisScale.ticks() : yAxisScale.domain(); - return ticks.map((tick) => yAxisScale(tick)); -} - -/** - * - * @param {*} svg - * @param {Int} x1 - * @param {Int} x2 - * @param {*} y - * @param {String} strokeColor - * @param {Int} strokeColor - * - * Appends a horiontal line to the SVG based on custom parameters - */ -function addHorizontalLine(svg, x1, x2, y, strokeColor, strokeWidth) { - svg - .append("line") - .attr("x1", x1) - .attr("x2", x2) - .attr("y1", y) - .attr("y2", y) - .attr("stroke", strokeColor) - .attr("stroke-width", strokeWidth); -} - -/** - * - * @param {*} svg - * @param {*} yAxis - * @param {Int} width - * @param {Obj} margin - * - * Find the postion of the Y-axis ticks and adds a horizontal - * line above each label and one that spans the chart area - */ -function addYAxisHorizontalLines(svg, yAxis, width, margin) { - const tickPositions = getTickPositions(yAxis); - - const lineAdjustment = 27; - - tickPositions.forEach((posY, index) => { - addHorizontalLine( - svg, - -margin.left, - 0, - posY - lineAdjustment, - "#D9D9D9", - 2 - ); - - addHorizontalLine( - svg, - 0, - width + margin.right, - posY - lineAdjustment, - "#D9D9D9", - index === 0 ? 2 : 1 - ); - }); -} - -/** - * - * @param {*} svg - * @param {*} versionAxis - * - * Add version axis to chart - */ -function addVersionAxis(svg, versionAxis) { - svg.append("g").attr("class", "version axis").call(versionAxis); -} - -/** - * - * @param {*} svg - * - * Clean up unwanted elements on chart put in by d3.js - */ -function cleanUpChart(svg) { - svg.selectAll(".domain").remove(); -} - -/** - * - * @param {*} svg - * @param {String} highlightVersion - * - * Set version axis labels - */ -function highlightChartRow(svg, scale, highlightVersion) { - const domain = scale.domain(); - const tickValues = domain.map((value) => value.toString()); - - svg.selectAll(".y.axis .tick text").each(function (d, i) { - const tickText = d3.select(this); - const textContent = tickValues[i].toString(); - - var isNotHighlightedVersion = - highlightVersion && !textContent.includes(highlightVersion); - var isYearLabel = - textContent.includes("20") && !textContent.includes("Ubuntu "); - - if (isNotHighlightedVersion) { - tickText.classed("chart__label--transparent", true); - } - - if (isYearLabel) { - tickText.classed("chart__label--transparent", false); - } - }); -} - -/** - * - * @param {*} svg - * - * Set version axis labels - */ -function setVersionAxisLabels(svg, taskVersions) { - svg.selectAll(".version .tick text").select(function (tickLabel, index) { - this.textContent = taskVersions[index]; - }); -} - -/** - * - * @param {*} svg - * @param {Int} height - * - * Adds vertical lines to the x axis - */ -function addXAxisVerticalLines(svg, height, margin) { - svg - .selectAll(".x.axis .tick line") - .attr("y1", height - margin.bottom - margin.top) - .attr("y2", 26); -} - -/** - * - * @param {String} chartSelector - * @param {Object} taskStatus - * - * Builds key for supplied chart based on task status - */ -function buildChartKey(chartSelector, taskStatus) { - var taskStatusKeys = Object.keys(taskStatus); - var rectDimensions = 25; - var rowHeight = rectDimensions + 5; - var gapBetweenRectAndText = 10; - var verticalTextAlignmentOffset = 16; - var containerWidth = document.querySelector(chartSelector).clientWidth; - - var numberOfExtraLines = - getMaxNumberOfLines(taskStatusKeys, containerWidth) - 1; - var extraChartHeight = numberOfExtraLines * 9; - - var chartKey = d3 - .select(chartSelector) - .append("svg") - .attr("class", "chart-key") - .attr("width", containerWidth) - .attr( - "height", - rowHeight * taskStatusKeys.length + - extraChartHeight * taskStatusKeys.length - ); - - taskStatusKeys.forEach(function (key, i) { - var keyRow = chartKey - .append("g") - .attr("class", "chart-key__row") - .attr( - "transform", - "translate(0, " + (rowHeight * i + extraChartHeight * i) + ")" - ) - .attr("height", rectDimensions); - - keyRow - .append("rect") - .attr("class", taskStatus[key]) - .attr("width", rectDimensions) - .attr("height", rectDimensions) - .attr("y", 0); - - keyRow - .append("text") - .text(formatKeyLabel(key)) - .attr("class", "chart-key__label") - .attr("x", rectDimensions + gapBetweenRectAndText) - .attr("y", verticalTextAlignmentOffset) - .call(wrapText, containerWidth - rectDimensions - gapBetweenRectAndText); - }); -} - -/** - * - * @param {String} text - * @param {Int} containerWidth - * - * Find the max number of lines that any given text will occupy from - * a list of texts, based on a given container width - */ -function getMaxNumberOfLines(textList, width) { - var tempSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - tempSvg.style.position = "absolute"; - tempSvg.style.visibility = "hidden"; - tempSvg.width = width; - document.body.appendChild(tempSvg); - - var maxNumberOfLines = 1; - - textList.forEach(function (key, i) { - let textNode = document.createElementNS( - "http://www.w3.org/2000/svg", - "text" - ); - textNode.textContent = formatKeyLabel(key); - tempSvg.appendChild(textNode); - var numberOfLines = Math.ceil(textNode.getComputedTextLength() / width); - if (numberOfLines > maxNumberOfLines) { - maxNumberOfLines = numberOfLines; - } - tempSvg.removeChild(textNode); - }); - document.body.removeChild(tempSvg); - return maxNumberOfLines; -} - -/** - * - * @param {String} text - * @param {Int} width - * - * At the point where a text would be longer that the container width, - * split the text into tspan (two lines) - */ -function wrapText(text, width) { - var negativeTextMargin = text.node().getComputedTextLength() > width ? 5 : 0; - text.each(function () { - var text = d3.select(this), - words = text.text().split(/\s+/).reverse(), - word, - line = [], - lineNumber = 0, - lineHeight = 1.1, - x = text.attr("x"), - y = text.attr("y"), - dy = 0; - var tspan = text - .text(null) - .append("tspan") - .attr("x", x) - .attr("y", y - negativeTextMargin) - .attr("dy", dy + "em"); - while ((word = words.pop())) { - line.push(word); - tspan.text(line.join(" ")); - if (tspan.node().getComputedTextLength() > width) { - line.pop(); - tspan.text(line.join(" ")); - line = [word]; - tspan = text - .append("tspan") - .attr("x", x) - .attr("y", y - negativeTextMargin) - .attr("dy", ++lineNumber * lineHeight + dy + "em") - .text(word); - } - } - }); -} - -/** - * - * @param {String} key - * - * Formats key into readable string - */ -function formatKeyLabel(key) { - var keyLowerCase = key.toLowerCase().replace(/_/g, " "); - var formattedKey = - keyLowerCase.charAt(0).toUpperCase() + keyLowerCase.substr(1); - formattedKey = formattedKey.replace( - "Lts", - "Ubuntu LTS release Standard Support" - ); - formattedKey = formattedKey.replace(" openstack ", " OpenStack "); - formattedKey = formattedKey.replace("kub", "Kub"); - formattedKey = formattedKey.replace( - "Interim release", - "Interim release standard security maintenance (9 months)" - ); - formattedKey = formattedKey.replace( - "Esm", - "LTS Expanded Security Maintenance (ESM) for Ubuntu Main (additional 5 years)" - ); - formattedKey = formattedKey.replace("Cve", "CVE/Critical fixes only"); - formattedKey = formattedKey.replace("Early", "Early preview"); - formattedKey = formattedKey.replace( - "Hardware and maintenance updates", - "LTS standard security maintenance for Ubuntu Main (initial 5 years)" - ); - formattedKey = formattedKey.replace( - "Main universe", - "LTS Expanded Security Maintenance (ESM) for Ubuntu Universe (10 years)" - ); - formattedKey = formattedKey.replace( - "Microstack esm", - "Expanded Security Maintenance (ESM)" - ); - formattedKey = formattedKey.replace( - "Pro support", - "Ubuntu Pro + Support coverage" - ); - return formattedKey; -} - -/** - * - * @param {Array} taskTypes - * - * Calculate the longest Y-Axis label - */ -function calculateYAxisWidth(YAxisLabels) { - var YAxisLabelsCopy = YAxisLabels.slice(); - var longestLabel = YAxisLabelsCopy.sort(function (a, b) { - return b.length - a.length; - })[0]; - return longestLabel.length * 7; -} - -/** - * - * @param {String} chartSelector - * @param {Array} taskTypes - * @param {Object} taskStatus - * @param {Array} tasks - * - * Builds chart using supplied selector and data - */ -export function createSupportChart( - chartSelector, - keySelector, - taskTypes, - taskStatus, - tasks, - taskVersions, - removePadding, - highlightVersion -) { - var margin = { - top: 12, - right: 40, - bottom: 20, - }; - margin.left = calculateYAxisWidth(taskTypes); - var rowHeight = 64; - var timeDomainStart; - var timeDomainEnd; - var earliestStartDate = d3.min(tasks, (d) => d.startDate); - var latestEndDate = d3.max(tasks, (d) => d.endDate); - if (removePadding) { - timeDomainStart = earliestStartDate; - timeDomainEnd = latestEndDate; - } else { - timeDomainStart = d3.timeYear.offset(earliestStartDate, -1); - timeDomainEnd = d3.timeYear.offset(latestEndDate, +1); - } - var keyAttachmentSelector = keySelector || chartSelector; - var height = taskTypes.length * rowHeight; - var containerWidth = document.querySelector(chartSelector).clientWidth; - if (containerWidth <= 0) { - var closestCol = document - .querySelector(chartSelector) - .closest('[class*="col-"]'); - - if (closestCol.clientWidth <= 0) { - return; - } - - containerWidth = closestCol.clientWidth - margin.left; - } - var width = containerWidth - margin.right - margin.left; - - var x = d3 - .scaleTime() - .domain([timeDomainStart, timeDomainEnd]) - .range([0, width + margin.right]) - .clamp(true); - - var y = d3 - .scaleBand() - .domain(taskTypes) - .rangeRound([0, height - margin.top - margin.bottom]) - .padding(0.58); - - var version = d3 - .scaleBand() - .domain(taskTypes) - .rangeRound([0, height - margin.top - margin.bottom]) - .padding(0.4); - - var xAxis = d3.axisBottom(x); - - var yAxis = d3.axisRight(y).tickPadding(-margin.left).tickSize(0); - - var chartTranslateX = margin.left; - - if (taskVersions) { - var versionAxis = d3 - .axisRight(version) - .tickPadding(-margin.left * 1.6) - .tickSize(0); - - chartTranslateX = margin.left * 1.6; - } - - sortTasks(tasks); - - // Build initial chart body - var svg = d3 - .select(chartSelector) - .append("svg") - .attr("class", "chart") - .attr("width", width + margin.left + margin.right) - .attr("height", height - margin.top - margin.bottom) - .append("g") - .attr("class", "gantt-chart") - .attr("width", width + margin.left + margin.right) - .attr("height", height) - .attr( - "transform", - "translate(" + chartTranslateX + ", " + margin.top + ")" - ); - - addBarsToChart(svg, tasks, taskStatus, x, y, highlightVersion); - addXAxis(svg, height, margin, xAxis); - addYAxis(svg, yAxis, y); - - if (taskVersions) { - addVersionAxis(svg, versionAxis); - setVersionAxisLabels(svg, taskVersions); - } - - addXAxisVerticalLines(svg, height, margin); - addYAxisHorizontalLines(svg, yAxis, width, margin); - cleanUpChart(svg); - buildChartKey(keyAttachmentSelector, taskStatus); - - highlightChartRow(svg, y, highlightVersion); -} diff --git a/static/js/src/tabbed-content.js b/static/js/src/tabbed-content.js index 0fe4c82d4b9..06cfff5925e 100644 --- a/static/js/src/tabbed-content.js +++ b/static/js/src/tabbed-content.js @@ -186,7 +186,7 @@ return false; }; - const targetScript = "release-chart.js"; + const targetScript = "release-chart-manager.js"; const triggerReload = isScriptIncluded(targetScript); document.addEventListener("DOMContentLoaded", () => { diff --git a/static/sass/_pattern_chart.scss b/static/sass/_pattern_chart.scss index 9896a994d1f..5d2d27b22a2 100644 --- a/static/sass/_pattern_chart.scss +++ b/static/sass/_pattern_chart.scss @@ -16,6 +16,12 @@ stroke-width: 1px; } +.chart__bar--light-grey { + fill: #c2c2c2; + stroke: #c2c2c2; + stroke-width: 1px; +} + .chart__bar--aubergine { fill: #772953; stroke: #772953; @@ -81,6 +87,27 @@ text-anchor: start !important; } +.chart-key { + display: block; +} + +.chart-key__row { + display: block; +} + +.horizontal-bar-chart { + .tick text { + font-size: 16px; + font-weight: 350; + } + + .x.axis text { + color: #666; + font-size: 16px; + font-weight: 400; + } +} + #server-desktop-eol { .tick text { font-size: 16px; @@ -96,11 +123,3 @@ font-weight: 600; } } - -.chart-key { - display: block; -} - -.chart-key__row { - display: block; -} diff --git a/templates/16-04/_release-chart-1604.html b/templates/16-04/_release-chart-1604.html index 8205cfc1329..214233b2b74 100644 --- a/templates/16-04/_release-chart-1604.html +++ b/templates/16-04/_release-chart-1604.html @@ -94,4 +94,4 @@ - + diff --git a/templates/18-04/_release-chart-1604.html b/templates/18-04/_release-chart-1604.html index 8205cfc1329..214233b2b74 100644 --- a/templates/18-04/_release-chart-1604.html +++ b/templates/18-04/_release-chart-1604.html @@ -94,4 +94,4 @@ - + diff --git a/templates/about/index.html b/templates/about/index.html index d723c8aa9e9..a3d8dca46ab 100755 --- a/templates/about/index.html +++ b/templates/about/index.html @@ -45,5 +45,5 @@

    Ubuntu today

    - + {% endblock content %} diff --git a/templates/about/release-cycle.html b/templates/about/release-cycle.html index 250433e1468..2cb500d99a4 100755 --- a/templates/about/release-cycle.html +++ b/templates/about/release-cycle.html @@ -247,6 +247,7 @@

    Canonical Kubernetes release cycle

    - + + {% endblock content %} diff --git a/templates/cpu-compatibility/index.html b/templates/cpu-compatibility/index.html index 3ac763d15d7..cb83bba62ce 100755 --- a/templates/cpu-compatibility/index.html +++ b/templates/cpu-compatibility/index.html @@ -253,6 +253,6 @@

    Supported OpenStack versions

    - + {% endblock content %} diff --git a/templates/desktop/developers.html b/templates/desktop/developers.html index 0b1fe83ba9c..b454ec5dfd6 100755 --- a/templates/desktop/developers.html +++ b/templates/desktop/developers.html @@ -155,26 +155,26 @@

    Access to cutting-edge hardware and software

    {{ image ( - url="https://assets.ubuntu.com/v1/57dd2115-TensorFlow-logo.svg", - alt="tensor flow logo", - width="145", - height="145", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe + url="https://assets.ubuntu.com/v1/57dd2115-TensorFlow-logo.svg", + alt="tensor flow logo", + width="145", + height="145", + hi_def=True, + loading="lazy", + attrs={"class": "p-logo-section__logo"} + ) | safe }}
    {{ image ( - url="https://assets.ubuntu.com/v1/f41c87c6-pytorch-logo.png", - alt="pytorch logo", - width="288", - height="288", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe + url="https://assets.ubuntu.com/v1/f41c87c6-pytorch-logo.png", + alt="pytorch logo", + width="288", + height="288", + hi_def=True, + loading="lazy", + attrs={"class": "p-logo-section__logo"} + ) | safe }}
    @@ -466,22 +466,43 @@

    Certified hardware

    Developers love Ubuntu, organisations trust it

    -
    -
    -

    Operating systems developers prefer
    Multiple choice poll

    -
    -
    +
    +
    +

    Operating systems developers prefer
    Multiple choice poll

    +
    +
    + {% include "desktop/partial/_hackearth-table.html" %} +
    + +
    +
    +

    Source: The 2020 + HackerEarth Developer Survey

    +
    +
    +

    Which of these open source technologies does your organisation use today to support your software infrastructure?

    +
    +
    + {% include "desktop/partial/_hackearth-table.html" %} +
    +
    +
    +

    Source: The + 2022 State of Open Source Report – OpenLogic

    +
    +
    +
    +
    +

    Source: The 2020 HackerEarth Developer Survey

    -

    Which of these open source technologies does your organisation use today to support your software infrastructure?

    -
    -
    -

    Source: The @@ -632,8 +653,7 @@

    - - - + + {% endblock content %} \ No newline at end of file diff --git a/templates/desktop/partial/_developers-table.html b/templates/desktop/partial/_developers-table.html new file mode 100644 index 00000000000..8571830a71e --- /dev/null +++ b/templates/desktop/partial/_developers-table.html @@ -0,0 +1,46 @@ +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Operating systemPercentage
    Ubutun35.6%
    Debian21.4%
    CentOS19.5%
    RHEL16%
    OpenSUSE14.6%
    SLES13.5%
    SELinux11.1%
    Rocky Linux7.5%
    NavyLinux4.8%
    \ No newline at end of file diff --git a/templates/desktop/partial/_hackearth-table.html b/templates/desktop/partial/_hackearth-table.html new file mode 100644 index 00000000000..7ea229a09fa --- /dev/null +++ b/templates/desktop/partial/_hackearth-table.html @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Operating systemPercentage
    Ubuntu66%
    MS Windows61%
    MacOS57%
    CentOs11%
    Debian10%
    Fedora9%
    Arch Linux8%
    Solaris4%
    FreeBSD2%
    Deepin1%
    \ No newline at end of file diff --git a/templates/engage/de_why-openstack.html b/templates/engage/de_why-openstack.html index df6b2d92ebe..f91d8af7a19 100644 --- a/templates/engage/de_why-openstack.html +++ b/templates/engage/de_why-openstack.html @@ -173,5 +173,5 @@

    Kontaktieren Sie uns

    - + {% endblock content %} diff --git a/templates/engage/es_why-openstack.html b/templates/engage/es_why-openstack.html index 1d5ebff21ad..e7c1c292159 100644 --- a/templates/engage/es_why-openstack.html +++ b/templates/engage/es_why-openstack.html @@ -155,5 +155,5 @@

    Ponerse en contacto

    - + {% endblock content %} diff --git a/templates/engage/fr_why-openstack.html b/templates/engage/fr_why-openstack.html index 5283887519e..f226abef1d2 100644 --- a/templates/engage/fr_why-openstack.html +++ b/templates/engage/fr_why-openstack.html @@ -158,5 +158,5 @@

    Entrer en contact

    - + {% endblock content %} diff --git a/templates/openstack/why-openstack.html b/templates/openstack/why-openstack.html index 904db530589..ff84d8e1a81 100644 --- a/templates/openstack/why-openstack.html +++ b/templates/openstack/why-openstack.html @@ -171,5 +171,5 @@

    Get in touch

    - + {% endblock content %} diff --git a/templates/shared/_kernel-support-schedule.html b/templates/shared/_kernel-support-schedule.html index 29f9045c71f..4509a220e29 100644 --- a/templates/shared/_kernel-support-schedule.html +++ b/templates/shared/_kernel-support-schedule.html @@ -392,5 +392,5 @@

    Kernel release schedule

    - - \ No newline at end of file + + diff --git a/templates/shared/_release_schedule.html b/templates/shared/_release_schedule.html index 38bd39ecf98..b0dd72d2250 100644 --- a/templates/shared/_release_schedule.html +++ b/templates/shared/_release_schedule.html @@ -111,4 +111,4 @@

    A release schedule you can depend

    - + From 1ce38a5ff40fee7921ee77db1d44cef164e38a01 Mon Sep 17 00:00:00 2001 From: MariaPaula Trujillo Date: Mon, 5 Feb 2024 16:12:12 +0100 Subject: [PATCH 19/33] Apply visual refresh --- templates/desktop/flavours.html | 532 ++++++++++++++++++++------------ 1 file changed, 338 insertions(+), 194 deletions(-) diff --git a/templates/desktop/flavours.html b/templates/desktop/flavours.html index 4fe82b6db00..26b65a7e8ff 100644 --- a/templates/desktop/flavours.html +++ b/templates/desktop/flavours.html @@ -4,33 +4,37 @@ {% block meta_description %}Ubuntu flavours are different installations of Ubuntu - each with a choice of packages and applications included by default. Here you are able to choose and download the officially recognised flavour that would best suit your particular industry and unique needs.{% endblock %} {% block meta_copydoc %}https://docs.google.com/document/d/1M5nkigcSRzq1YVjiXOZkeU4EUCqT0uYBR3Y_sjxM-wM/edit{% endblock meta_copydoc %} +{% block body_class %}is-paper{% endblock %} {% block content %} -
    -
    -
    -

    Ubuntu flavours

    -

    What are Ubuntu flavours?

    -

    Ubuntu flavours offer a unique way to experience Ubuntu, each with their own choice of default applications and settings. Ubuntu flavours are owned and developed by members of our global community and backed by the full Ubuntu archive for packages and updates.

    -
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/e84a9007-ubuntu-flavours-23.png", - alt="", - width="1296", - height="460", - hi_def=True, - loading="auto" - ) | safe - }} +
    +
    +
    +
    +

    Ubuntu flavours

    +

    What are Ubuntu flavours?

    +

    Ubuntu flavours offer a unique way to experience Ubuntu, each with their own choice of default applications and settings. Ubuntu flavours are owned and developed by members of our global community and backed by the full Ubuntu archive for packages and updates.

    +
    + {{ image ( + url="https://assets.ubuntu.com/v1/e84a9007-ubuntu-flavours-23.png", + alt="", + width="1296", + height="460", + hi_def=True, + loading="auto" + ) | safe + }} +
    +
    -
    -
    -
    +
    +
    +
    +
    {{ @@ -41,35 +45,29 @@

    Ubuntu flavours

    width="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img"} + attrs={"class": "p-heading-icon__img"}, ) | safe }} -

    Edubuntu

    +

    Edubuntu

    +
    +
    +
    +

    Edubuntu is an official flavor of Ubuntu crafted for use in the education world. Teachers and students will have access to a huge ecosystem of learning software and educational tools built on a familiar and usable desktop. Edubuntu provides a fast, stable, secure and privacy conscious option for schools, universities and other places of learning.

    -

    Get Edubuntu

    -

    Join the Edubuntu community ›

    -

    Follow Edubuntu ›

    + Get Edubuntu
    + +
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/54331fa0-edubuntu-2304-screenshot.png", - alt="", - width="2560", - height="1440", - hi_def=True, - loading="lazy" - ) | safe - }} -
    -
    - -
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/7c6fa2da-kubuntu-2204-screenshot.png", +
    + {{ + image ( + url="https://assets.ubuntu.com/v1/54331fa0-edubuntu-2304-screenshot.png", alt="", width="2560", height="1440", @@ -78,7 +76,13 @@

    Edubuntu

    ) | safe }}
    -
    +
    +
    + +
    +
    +
    +
    {{ @@ -92,23 +96,42 @@

    Edubuntu

    attrs={"class": "p-heading-icon__img"} ) | safe }} -

    Kubuntu

    +

    Kubuntu

    -
    +
    +
    +
    +

    Kubuntu unites Ubuntu with KDE and the Plasma desktop, bringing you a full set of applications including productivity, office, email, graphics, photography, and music applications ready to use at startup with extensive additional software installed from not one, but two desktop package managers.

    Built using the Qt toolkit, Kubuntu is fast, slick and beautiful. Kubuntu is mobile-ready, enabling easy integration between your PC desktop and phone or tablet with KDE Connect.

    -

    Get Kubuntu

    -

    Join the Kubuntu community › -

    Follow Kubuntu ›

    -
    + Get Kubuntu
    + +
    +
    +
    +
    + {{ + image ( + url="https://assets.ubuntu.com/v1/7c6fa2da-kubuntu-2204-screenshot.png", + alt="", + width="2560", + height="1440", + hi_def=True, + loading="lazy" + ) | safe + }}
    -
    -
    -
    +
    +
    +
    +
    {{ @@ -122,18 +145,25 @@

    Kubuntu

    attrs={"class": "p-heading-icon__img"} ) | safe }} -

    Lubuntu

    -
    -
    -

    Lubuntu is designed to be a simple, easy to use system that is light, fast and modern. Lubuntu provides the LXQt desktop environment which is focused on Qt technologies. Lubuntu comes with the essential applications and services needed to browse the Internet, chat, play and be productive.

    -

    Get Lubuntu

    -

    Join the Lubuntu community ›

    -

    Follow Lubuntu ›

    +

    Lubuntu

    -
    - {{ image ( +
    +
    +

    Lubuntu is designed to be a simple, easy to use system that is light, fast and modern. Lubuntu provides the LXQt desktop environment which is focused on Qt technologies. Lubuntu comes with the essential applications and services needed to browse the Internet, chat, play and be productive.

    + Get Lubuntu +
    + +
    +
    +
    +
    + {{ + image ( url="https://assets.ubuntu.com/v1/8d50725a-lubuntu-2204-screenshot.png", alt="", width="1920", @@ -146,20 +176,10 @@

    Lubuntu

    -
    -
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/eb97c55b-Ubuntu_Budgie.png", - alt="", - width="1920", - height="1080", - hi_def=True, - loading="lazy" - ) | safe - }} -
    -
    +
    +
    +
    +
    {{ @@ -173,22 +193,42 @@

    Lubuntu

    attrs={"class": "p-heading-icon__img"} ) | safe }} -

    Ubuntu Budgie

    -
    -

    Ubuntu Budgie is a proud official Ubuntu flavour. We combine the simplicity and elegance of the Budgie desktop environment with the power and familiarity of an Ubuntu based operative system.

    -

    The result is a modern and fast desktop distribution with great defaults, yet fully customizable.

    -

    Get Ubuntu Budgie

    -

    Join the Ubuntu Budgie community ›

    -

    Follow Ubuntu Budgie ›

    +

    Ubuntu Budgie

    +
    +
    +

    Ubuntu Budgie is a proud official Ubuntu flavour. We combine the simplicity and elegance of the Budgie desktop environment with the power and familiarity of an Ubuntu based operative system.

    +

    The result is a modern and fast desktop distribution with great defaults, yet fully customizable.

    + Get Ubuntu Budgie +
    + +
    +
    +
    +
    + {{ + image ( + url="https://assets.ubuntu.com/v1/eb97c55b-Ubuntu_Budgie.png", + alt="", + width="1920", + height="1080", + hi_def=True, + loading="lazy" + ) | safe + }} +
    -
    -
    -
    +
    +
    +
    +
    {{ @@ -202,18 +242,25 @@

    Ubuntu Budgie

    attrs={"class": "p-heading-icon__img"} ) | safe }} -

    Ubuntu Cinnamon

    -
    -
    -

    Ubuntu Cinnamon combines Ubuntu with the intuitive Cinnamon desktop. Built upon the legacy of GNOME 2, Ubuntu Cinnamon provides a traditionally modern experience crafted for professional and home users alike. The hassle free desktop allows for deep personalization options and add-ons for a little extra spice.

    -

    Get Ubuntu Cinnamon

    -

    Join the Ubuntu Cinnamon community ›

    -

    Follow Ubuntu Cinnamon ›

    +

    Ubuntu Cinnamon

    -
    - {{ image ( +
    +
    +

    Ubuntu Cinnamon combines Ubuntu with the intuitive Cinnamon desktop. Built upon the legacy of GNOME 2, Ubuntu Cinnamon provides a traditionally modern experience crafted for professional and home users alike. The hassle free desktop allows for deep personalization options and add-ons for a little extra spice.

    + Get Ubuntu Cinnamon +
    + +
    +
    +
    +
    + {{ + image ( url="https://assets.ubuntu.com/v1/70b28e5e-ubuntu-cinnamon-2304-screenshot.png", alt="", width="1920", @@ -226,20 +273,10 @@

    Ubuntu Cinnamon

    -
    -
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/0bd4870d-Kylin2204.png", - alt="", - width="1360", - height="768", - hi_def=True, - loading="lazy" - ) | safe - }} -
    -
    +
    +
    +
    +
    {{ @@ -253,21 +290,41 @@

    Ubuntu Cinnamon

    attrs={"class": "p-heading-icon__img"} ) | safe }} -

    Ubuntu Kylin

    -
    -

    The Ubuntu Kylin project is tuned to the needs of Chinese users, providing a thoughtful and elegant experience out-of-the-box. The lightweight Ubuntu Kylin User Interface (UKUI) is perfect for older machines, and an ideal introduction to Linux for first-time users.

    -

    Get Ubuntu Kylin

    -

    Join the Ubuntu Kylin community ›

    -

    Follow Ubuntu Kylin ›

    +

    Ubuntu Kylin

    +
    +
    +

    The Ubuntu Kylin project is tuned to the needs of Chinese users, providing a thoughtful and elegant experience out-of-the-box. The lightweight Ubuntu Kylin User Interface (UKUI) is perfect for older machines, and an ideal introduction to Linux for first-time users.

    + Get Ubuntu Kylin +
    + +
    +
    +
    +
    + {{ + image ( + url="https://assets.ubuntu.com/v1/0bd4870d-Kylin2204.png", + alt="", + width="1360", + height="768", + hi_def=True, + loading="lazy" + ) | safe + }} +
    -
    -
    -
    +
    +
    +
    +
    {{ @@ -281,18 +338,25 @@

    Ubuntu Kylin

    attrs={"class": "p-heading-icon__img"} ) | safe }} -

    Ubuntu MATE

    -
    -
    -

    Ubuntu MATE is a stable, easy-to-use operating system with a configurable desktop environment. It is ideal for those who want the most out of their computers and prefer a traditional desktop metaphor. With modest hardware requirements it is suitable for modern workstations, single board computers and older hardware alike. Ubuntu MATE makes modern computers fast and old computers usable.

    -

    Get Ubuntu MATE

    -

    Join the Ubuntu MATE community ›

    -

    Follow Ubuntu MATE ›

    +

    Ubuntu MATE

    -
    - {{ image ( +
    +
    +

    Ubuntu MATE is a stable, easy-to-use operating system with a configurable desktop environment. It is ideal for those who want the most out of their computers and prefer a traditional desktop metaphor. With modest hardware requirements it is suitable for modern workstations, single board computers and older hardware alike. Ubuntu MATE makes modern computers fast and old computers usable.

    + Get Ubuntu MATE +
    + +
    +
    +
    +
    + {{ + image ( url="https://assets.ubuntu.com/v1/1d7a53b1-UbuntuMATE-screenshot.png", alt="", width="1664", @@ -305,20 +369,10 @@

    Ubuntu MATE

    -
    -
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/777dd5d3-UbuntuStudio.png", - alt="", - width="1920", - height="1080", - hi_def=True, - loading="lazy" - ) | safe - }} -
    -
    +
    +
    +
    +
    {{ @@ -332,24 +386,45 @@

    Ubuntu MATE

    attrs={"class": "p-heading-icon__img"} ) | safe }} -

    Ubuntu Studio

    -
    -
    -

    Ubuntu Studio is pre-configured for content creation of all kinds. Whether you're an audio engineer, musician, graphic designer, photographer, video producer, or streamer, this is a full-fledged desktop computing system that will fit your needs. If you can dream it, you can create it with Ubuntu Studio.

    -

    Get Ubuntu Studio

    -

    Join the Ubuntu Studio community ›

    -

    Follow Ubuntu Studio ›

    +

    Ubuntu Studio

    +
    +
    +

    Ubuntu Studio is pre-configured for content creation of all kinds. Whether you're an audio engineer, musician, graphic designer, photographer, video producer, or streamer, this is a full-fledged desktop computing system that will fit your needs. If you can dream it, you can create it with Ubuntu Studio.

    + Get Ubuntu Studio +
    + +
    -
    -
    -
    +
    + {{ + image ( + url="https://assets.ubuntu.com/v1/777dd5d3-UbuntuStudio.png", + alt="", + width="1920", + height="1080", + hi_def=True, + loading="lazy" + ) | safe + }} +
    +
    +
    + +
    +
    +
    +
    - {{ image ( + {{ + image ( url="https://assets.ubuntu.com/v1/219d06b0-ubuntu-unity-logo.png", alt="Unity Icon", width="64", @@ -359,34 +434,26 @@

    Ubuntu Studio

    attrs={"class": "p-heading-icon__img"} ) | safe }} -

    Ubuntu Unity

    -
    -
    -

    Bringing the best of Ubuntu and Unity together, Ubuntu Unity is a beautiful, slick and lightweight Ubuntu flavour. With its beautiful design, efficient and elegant workflow, and features like the heads-up display (HUD), the Global Menu, powerful search and a high level of customizability (using the Unity Tweak Tool), you'll be able to work with an unparalleled level of efficiency. You can also choose from a wide range of window animations and effects available in Compiz.

    -

    Get Ubuntu Unity

    -

    Join the Ubuntu Unity community ›

    -

    Follow Ubuntu Unity ›

    +

    Ubuntu Unity

    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/e96f6b6d-ubuntu-unity-desktop-screenshot.png", - alt="", - width="1920", - height="1080", - hi_def=True, - loading="lazy" - ) | safe - }} +
    +
    +

    Bringing the best of Ubuntu and Unity together, Ubuntu Unity is a beautiful, slick and lightweight Ubuntu flavour. With its beautiful design, efficient and elegant workflow, and features like the heads-up display (HUD), the Global Menu, powerful search and a high level of customizability (using the Unity Tweak Tool), you'll be able to work with an unparalleled level of efficiency. You can also choose from a wide range of window animations and effects available in Compiz.

    + Get Ubuntu Unity +
    +
    -
    -
    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/5f23328b-xubuntu-2204-screenshot.png", +
    + {{ + image ( + url="https://assets.ubuntu.com/v1/e96f6b6d-ubuntu-unity-desktop-screenshot.png", alt="", width="1920", height="1080", @@ -395,7 +462,13 @@

    Ubuntu Unity

    ) | safe }}
    -
    +
    +
    + +
    +
    +
    +
    {{ @@ -409,36 +482,107 @@

    Ubuntu Unity

    attrs={"class": "p-heading-icon__img"} ) | safe }} -

    Xubuntu

    +

    Xubuntu

    +
    +
    +
    +
    +
    +

    Xubuntu comes with Xfce, which is a stable, light and configurable desktop environment with a lot of consideration for usability. Whether you have a high-end computer or even a moderately older machine, Xubuntu is able to provide you with a smooth and usable desktop experience. Xubuntu has an expansive list of customization options so you can make the desktop your own.

    + Get Xubuntu +
    + +
    +
    +
    +
    + {{ + image ( + url="https://assets.ubuntu.com/v1/5f23328b-xubuntu-2204-screenshot.png", + alt="", + width="1920", + height="1080", + hi_def=True, + loading="lazy" + ) | safe + }} +
    +
    +
    + +
    +
    +
    +

    More ways to experienc Ubuntu

    +
    +
    +
    +
    +
    +
    +

    Ubuntu-based variants

    +
    +
    +

    In addition to the officially recognised flavours, dozens of other Linux distributions take Ubuntu as a base for their own distinctive ideas and approaches.

    +

    A complete list of known flavours, editions and customizations is maintained on the Ubuntu Wiki's UbuntuFlavors page ›

    -
    -

    Xubuntu comes with Xfce, which is a stable, light and configurable desktop environment with a lot of consideration for usability. Whether you have a high-end computer or even a moderately older machine, Xubuntu is able to provide you with a smooth and usable desktop experience. Xubuntu has an expansive list of customization options so you can make the desktop your own.

    -

    Get Xubuntu

    -

    Join the Xubuntu community ›

    -

    Follow Xubuntu ›

    +
    +
    +
    +
    +

    Looking for Ubuntu?

    +
    +
    +

    Download the latest release of Ubuntu desktop, the open source operating system that powers millions of PCs and laptops around the world. It's easy to install on Windows or macOS, or run Ubuntu alongside them!

    +

    Download now

    -
    -
    -
    -

    Ubuntu-based variants

    -

    In addition to the officially recognised flavours, dozens of other Linux distributions take Ubuntu as a base for their own distinctive ideas and approaches.

    -

    A complete list of known flavours, editions and customizations is maintained on the Ubuntu Wiki's UbuntuFlavors page ›

    -
    -
    -

    Looking for Ubuntu?

    -

    Download the latest release of Ubuntu desktop, the open source operating system that powers millions of PCs and laptops around the world. It's easy to install on Windows or macOS, or run Ubuntu alongside them!

    -

    Download now

    +
    +
    +
    +
    +
    +

    Latest Ubuntu Desktop news
    from our blog ›

    +
    +
    +
    +
    +
    +
    +

    Explore all

    + +
    -{% with section_classes='p-strip', heading_topic='Ubuntu Desktop', tag_name='ubuntu-desktop', tag_id='1920', limit='4' %} - {% include "shared/_latest_news_strip.html" %} -{% endwith %} + + {% endblock content %} From 38f6841faf88aadf240eccfcf376a88b787873ab Mon Sep 17 00:00:00 2001 From: MariaPaula Trujillo Date: Mon, 5 Feb 2024 17:09:19 +0100 Subject: [PATCH 20/33] Update asset and icon margin --- templates/desktop/flavours.html | 64 +++++++++++++++++---------------- 1 file changed, 34 insertions(+), 30 deletions(-) diff --git a/templates/desktop/flavours.html b/templates/desktop/flavours.html index 26b65a7e8ff..6a1d31399cc 100644 --- a/templates/desktop/flavours.html +++ b/templates/desktop/flavours.html @@ -15,17 +15,21 @@

    Ubuntu flavours

    What are Ubuntu flavours?

    Ubuntu flavours offer a unique way to experience Ubuntu, each with their own choice of default applications and settings. Ubuntu flavours are owned and developed by members of our global community and backed by the full Ubuntu archive for packages and updates.

    -
    - {{ image ( - url="https://assets.ubuntu.com/v1/e84a9007-ubuntu-flavours-23.png", - alt="", - width="1296", - height="460", - hi_def=True, - loading="auto" - ) | safe - }} -
    +
    +
    +
    +
    + {{ + image ( + url="https://assets.ubuntu.com/v1/fe7c346b-ubuntu-flavours-23.png", + alt="", + width="1296", + height="460", + hi_def=True, + loading="auto", + attrs={"style": "margin-left: 2.5rem"} + ) | safe + }}
    @@ -45,7 +49,7 @@

    What are Ubuntu flavours?

    width="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img"}, + attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, ) | safe }}

    Edubuntu

    @@ -54,7 +58,7 @@

    Edubuntu

    -

    Edubuntu is an official flavor of Ubuntu crafted for use in the education world. Teachers and students will have access to a huge ecosystem of learning software and educational tools built on a familiar and usable desktop. Edubuntu provides a fast, stable, secure and privacy conscious option for schools, universities and other places of learning.

    +

    Edubuntu is an official flavour of Ubuntu crafted for use in the education world. Teachers and students will have access to a huge ecosystem of learning software and educational tools built on a familiar and usable desktop. Edubuntu provides a fast, stable, secure and privacy conscious option for schools, universities and other places of learning.

    Get Edubuntu
      @@ -93,7 +97,7 @@

      Edubuntu

      width="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img"} + attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, ) | safe }}

      Kubuntu

      @@ -142,7 +146,7 @@

      Kubuntu

      width="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img"} + attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, ) | safe }}

      Lubuntu

      @@ -190,7 +194,7 @@

      Lubuntu

      width="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img"} + attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, ) | safe }}

      Ubuntu Budgie

      @@ -239,7 +243,7 @@

      Ubuntu Budgie

      width="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img"} + attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, ) | safe }}

      Ubuntu Cinnamon

      @@ -287,7 +291,7 @@

      Ubuntu Cinnamon

      width="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img"} + attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, ) | safe }}

      Ubuntu Kylin

      @@ -335,7 +339,7 @@

      Ubuntu Kylin

      width="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img"} + attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, ) | safe }}

      Ubuntu MATE

      @@ -383,7 +387,7 @@

      Ubuntu MATE

      width="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img"} + attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, ) | safe }}

      Ubuntu Studio

      @@ -431,7 +435,7 @@

      Ubuntu Studio

      height="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img"} + attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, ) | safe }}

      Ubuntu Unity

      @@ -479,7 +483,7 @@

      Ubuntu Unity

      width="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img"} + attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, ) | safe }}

      Xubuntu

      @@ -519,23 +523,23 @@

      Xubuntu

      More ways to experienc Ubuntu

    -
    +
    -
    +

    Ubuntu-based variants

    -
    +

    In addition to the officially recognised flavours, dozens of other Linux distributions take Ubuntu as a base for their own distinctive ideas and approaches.

    A complete list of known flavours, editions and customizations is maintained on the Ubuntu Wiki's UbuntuFlavors page ›

    -
    +

    Looking for Ubuntu?

    -
    +

    Download the latest release of Ubuntu desktop, the open source operating system that powers millions of PCs and laptops around the world. It's easy to install on Windows or macOS, or run Ubuntu alongside them!

    Download now

    @@ -573,16 +577,16 @@

    {% endblock content %} From 5f7aefdb7cb539d2a40ccb9c6f7542784748ffc7 Mon Sep 17 00:00:00 2001 From: l Date: Tue, 6 Feb 2024 12:13:29 +0000 Subject: [PATCH 21/33] visual QA --- templates/desktop/flavours.html | 116 ++++++++++++++------------------ 1 file changed, 52 insertions(+), 64 deletions(-) diff --git a/templates/desktop/flavours.html b/templates/desktop/flavours.html index 6a1d31399cc..f1f1558c00c 100644 --- a/templates/desktop/flavours.html +++ b/templates/desktop/flavours.html @@ -12,24 +12,32 @@
    -

    Ubuntu flavours

    -

    What are Ubuntu flavours?

    -

    Ubuntu flavours offer a unique way to experience Ubuntu, each with their own choice of default applications and settings. Ubuntu flavours are owned and developed by members of our global community and backed by the full Ubuntu archive for packages and updates.

    +
    +
    +

    Ubuntu flavours

    +
    +
    +
    +

    What are Ubuntu flavours?

    +

    Ubuntu flavours offer a unique way to experience Ubuntu, each with their own choice of default applications and settings. Ubuntu flavours are owned and developed by members of our global community and backed by the full Ubuntu archive for packages and updates.

    +
    + {{ + image ( + url="https://assets.ubuntu.com/v1/8527100a-ubuntu-flavours-23.png", + alt="", + width="518", + height="173", + hi_def=True, + loading="auto", + ) | safe + }} +
    +
    - {{ - image ( - url="https://assets.ubuntu.com/v1/fe7c346b-ubuntu-flavours-23.png", - alt="", - width="1296", - height="460", - hi_def=True, - loading="auto", - attrs={"style": "margin-left: 2.5rem"} - ) | safe - }} +
    @@ -57,10 +65,8 @@

    Edubuntu

    -
    -

    Edubuntu is an official flavour of Ubuntu crafted for use in the education world. Teachers and students will have access to a huge ecosystem of learning software and educational tools built on a familiar and usable desktop. Edubuntu provides a fast, stable, secure and privacy conscious option for schools, universities and other places of learning.

    - Get Edubuntu -
    +

    Edubuntu is an official flavour of Ubuntu crafted for use in the education world. Teachers and students will have access to a huge ecosystem of learning software and educational tools built on a familiar and usable desktop. Edubuntu provides a fast, stable, secure and privacy conscious option for schools, universities and other places of learning.

    + Get Edubuntu
    -
    -

    Kubuntu unites Ubuntu with KDE and the Plasma desktop, bringing you a full set of applications including productivity, office, email, graphics, photography, and music applications ready to use at startup with extensive additional software installed from not one, but two desktop package managers.

    -

    Built using the Qt toolkit, Kubuntu is fast, slick and beautiful. Kubuntu is mobile-ready, enabling easy integration between your PC desktop and phone or tablet with KDE Connect.

    - Get Kubuntu -
    +

    Kubuntu unites Ubuntu with KDE and the Plasma desktop, bringing you a full set of applications including productivity, office, email, graphics, photography, and music applications ready to use at startup with extensive additional software installed from not one, but two desktop package managers.

    +

    Built using the Qt toolkit, Kubuntu is fast, slick and beautiful. Kubuntu is mobile-ready, enabling easy integration between your PC desktop and phone or tablet with KDE Connect.

    + Get Kubuntu
    -
    -

    Lubuntu is designed to be a simple, easy to use system that is light, fast and modern. Lubuntu provides the LXQt desktop environment which is focused on Qt technologies. Lubuntu comes with the essential applications and services needed to browse the Internet, chat, play and be productive.

    - Get Lubuntu -
    +

    Lubuntu is designed to be a simple, easy to use system that is light, fast and modern. Lubuntu provides the LXQt desktop environment which is focused on Qt technologies. Lubuntu comes with the essential applications and services needed to browse the Internet, chat, play and be productive.

    + Get Lubuntu
    -
    -

    Ubuntu Budgie is a proud official Ubuntu flavour. We combine the simplicity and elegance of the Budgie desktop environment with the power and familiarity of an Ubuntu based operative system.

    -

    The result is a modern and fast desktop distribution with great defaults, yet fully customizable.

    - Get Ubuntu Budgie -
    +

    Ubuntu Budgie is a proud official Ubuntu flavour. We combine the simplicity and elegance of the Budgie desktop environment with the power and familiarity of an Ubuntu based operative system.

    +

    The result is a modern and fast desktop distribution with great defaults, yet fully customizable.

    + Get Ubuntu Budgie
    -
    -

    Ubuntu Cinnamon combines Ubuntu with the intuitive Cinnamon desktop. Built upon the legacy of GNOME 2, Ubuntu Cinnamon provides a traditionally modern experience crafted for professional and home users alike. The hassle free desktop allows for deep personalization options and add-ons for a little extra spice.

    - Get Ubuntu Cinnamon -
    +

    Ubuntu Cinnamon combines Ubuntu with the intuitive Cinnamon desktop. Built upon the legacy of GNOME 2, Ubuntu Cinnamon provides a traditionally modern experience crafted for professional and home users alike. The hassle free desktop allows for deep personalization options and add-ons for a little extra spice.

    + Get Ubuntu Cinnamon
    -
    -

    The Ubuntu Kylin project is tuned to the needs of Chinese users, providing a thoughtful and elegant experience out-of-the-box. The lightweight Ubuntu Kylin User Interface (UKUI) is perfect for older machines, and an ideal introduction to Linux for first-time users.

    - Get Ubuntu Kylin -
    +

    The Ubuntu Kylin project is tuned to the needs of Chinese users, providing a thoughtful and elegant experience out-of-the-box. The lightweight Ubuntu Kylin User Interface (UKUI) is perfect for older machines, and an ideal introduction to Linux for first-time users.

    + Get Ubuntu Kylin
    -
    -

    Ubuntu MATE is a stable, easy-to-use operating system with a configurable desktop environment. It is ideal for those who want the most out of their computers and prefer a traditional desktop metaphor. With modest hardware requirements it is suitable for modern workstations, single board computers and older hardware alike. Ubuntu MATE makes modern computers fast and old computers usable.

    - Get Ubuntu MATE -
    +

    Ubuntu MATE is a stable, easy-to-use operating system with a configurable desktop environment. It is ideal for those who want the most out of their computers and prefer a traditional desktop metaphor. With modest hardware requirements it is suitable for modern workstations, single board computers and older hardware alike. Ubuntu MATE makes modern computers fast and old computers usable.

    + Get Ubuntu MATE
    -
    -

    Ubuntu Studio is pre-configured for content creation of all kinds. Whether you're an audio engineer, musician, graphic designer, photographer, video producer, or streamer, this is a full-fledged desktop computing system that will fit your needs. If you can dream it, you can create it with Ubuntu Studio.

    - Get Ubuntu Studio -
    +

    Ubuntu Studio is pre-configured for content creation of all kinds. Whether you're an audio engineer, musician, graphic designer, photographer, video producer, or streamer, this is a full-fledged desktop computing system that will fit your needs. If you can dream it, you can create it with Ubuntu Studio.

    + Get Ubuntu Studio
    -
    -

    Bringing the best of Ubuntu and Unity together, Ubuntu Unity is a beautiful, slick and lightweight Ubuntu flavour. With its beautiful design, efficient and elegant workflow, and features like the heads-up display (HUD), the Global Menu, powerful search and a high level of customizability (using the Unity Tweak Tool), you'll be able to work with an unparalleled level of efficiency. You can also choose from a wide range of window animations and effects available in Compiz.

    - Get Ubuntu Unity -
    +

    Bringing the best of Ubuntu and Unity together, Ubuntu Unity is a beautiful, slick and lightweight Ubuntu flavour. With its beautiful design, efficient and elegant workflow, and features like the heads-up display (HUD), the Global Menu, powerful search and a high level of customizability (using the Unity Tweak Tool), you'll be able to work with an unparalleled level of efficiency. You can also choose from a wide range of window animations and effects available in Compiz.

    + Get Ubuntu Unity
    -
    -

    Xubuntu comes with Xfce, which is a stable, light and configurable desktop environment with a lot of consideration for usability. Whether you have a high-end computer or even a moderately older machine, Xubuntu is able to provide you with a smooth and usable desktop experience. Xubuntu has an expansive list of customization options so you can make the desktop your own.

    - Get Xubuntu -
    +

    Xubuntu comes with Xfce, which is a stable, light and configurable desktop environment with a lot of consideration for usability. Whether you have a high-end computer or even a moderately older machine, Xubuntu is able to provide you with a smooth and usable desktop experience. Xubuntu has an expansive list of customization options so you can make the desktop your own.

    + Get Xubuntu
    -
    -
    +
    +
    -
    +

    Ubuntu-based variants

    -
    +

    In addition to the officially recognised flavours, dozens of other Linux distributions take Ubuntu as a base for their own distinctive ideas and approaches.

    A complete list of known flavours, editions and customizations is maintained on the Ubuntu Wiki's UbuntuFlavors page ›

    -
    +
    -
    +

    Looking for Ubuntu?

    -
    +

    Download the latest release of Ubuntu desktop, the open source operating system that powers millions of PCs and laptops around the world. It's easy to install on Windows or macOS, or run Ubuntu alongside them!

    Download now

    @@ -553,7 +541,7 @@

    Looking for Ubuntu?

    -

    Latest Ubuntu Desktop news
    from our blog ›

    +

    Latest Ubuntu Desktop news from our blog ›

    From b4efd6d0bab963c4e5543d8124a181861cb969ae Mon Sep 17 00:00:00 2001 From: MariaPaula Trujillo Date: Tue, 6 Feb 2024 15:36:22 +0100 Subject: [PATCH 22/33] Apply review suggestions --- templates/desktop/flavours.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/templates/desktop/flavours.html b/templates/desktop/flavours.html index f1f1558c00c..f6235e2aeda 100644 --- a/templates/desktop/flavours.html +++ b/templates/desktop/flavours.html @@ -18,7 +18,7 @@

    Ubuntu flavours

    -

    What are Ubuntu flavours?

    +

    What are Ubuntu flavours?

    Ubuntu flavours offer a unique way to experience Ubuntu, each with their own choice of default applications and settings. Ubuntu flavours are owned and developed by members of our global community and backed by the full Ubuntu archive for packages and updates.

    {{ @@ -52,7 +52,7 @@

    What are Ubuntu flavours?

    {{ image( url="https://assets.ubuntu.com/v1/a2f090ef-edubuntu-logo.svg", - alt="Edubuntu icon", + alt="", height="64", width="64", hi_def=True, @@ -98,7 +98,7 @@

    Edubuntu

    {{ image( url="https://assets.ubuntu.com/v1/267e8693-Kubuntu_logo.svg", - alt="Kubuntu icon", + alt="", height="64", width="64", hi_def=True, @@ -145,7 +145,7 @@

    Kubuntu

    {{ image( url="https://assets.ubuntu.com/v1/6ac4ba34-lubuntu-logo.svg", - alt="Lubuntu icon", + alt="", height="64", width="64", hi_def=True, @@ -191,7 +191,7 @@

    Lubuntu

    {{ image( url="https://assets.ubuntu.com/v1/49e647f4-budgie-remix-logo-medium.svg", - alt="Budgie icon", + alt="", height="64", width="64", hi_def=True, @@ -209,7 +209,7 @@

    Ubuntu Budgie

    Get Ubuntu Budgie
    @@ -508,7 +508,7 @@

    Xubuntu

    -

    More ways to experienc Ubuntu

    +

    More ways to experience Ubuntu

    From 54c2014387a9e9a1cccc5edb0c6b61c32876e1f1 Mon Sep 17 00:00:00 2001 From: MariaPaula Trujillo Date: Tue, 6 Feb 2024 15:39:08 +0100 Subject: [PATCH 23/33] Remove missed icon alt text --- templates/desktop/flavours.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/templates/desktop/flavours.html b/templates/desktop/flavours.html index f6235e2aeda..dfab800009e 100644 --- a/templates/desktop/flavours.html +++ b/templates/desktop/flavours.html @@ -238,7 +238,7 @@

    Ubuntu Budgie

    {{ image( url="https://assets.ubuntu.com/v1/504cc54e-ubuntu-cinnamon-logo.svg", - alt="Cinnamon icon", + alt="", height="64", width="64", hi_def=True, @@ -284,7 +284,7 @@

    Ubuntu Cinnamon

    {{ image( url="https://assets.ubuntu.com/v1/a9914e3f-ubuntu-kylin.svg", - alt="Kylin icon", + alt="", height="64", width="64", hi_def=True, @@ -330,7 +330,7 @@

    Ubuntu Kylin

    {{ image( url="https://assets.ubuntu.com/v1/b89d0c93-mate.svg", - alt="MATE icon", + alt="", height="64", width="64", hi_def=True, @@ -376,7 +376,7 @@

    Ubuntu MATE

    {{ image( url="https://assets.ubuntu.com/v1/4a512076-ubuntustudio.svg", - alt="Studio icon", + alt="", height="64", width="64", hi_def=True, @@ -422,7 +422,7 @@

    Ubuntu Studio

    {{ image ( url="https://assets.ubuntu.com/v1/219d06b0-ubuntu-unity-logo.png", - alt="Unity Icon", + alt="", width="64", height="64", hi_def=True, @@ -468,7 +468,7 @@

    Ubuntu Unity

    {{ image( url="https://assets.ubuntu.com/v1/36e8f12b-Xubuntu_logo.svg", - alt="Xbuntu icon", + alt="", height="64", width="64", hi_def=True, From 2565109d57faf1c6d963d791b3357c8f419efe2b Mon Sep 17 00:00:00 2001 From: MariaPaula Trujillo Date: Wed, 7 Feb 2024 12:11:52 +0100 Subject: [PATCH 24/33] Apply review suggestions --- templates/desktop/flavours.html | 31 +++++++++++++------------------ 1 file changed, 13 insertions(+), 18 deletions(-) diff --git a/templates/desktop/flavours.html b/templates/desktop/flavours.html index dfab800009e..a511476c76f 100644 --- a/templates/desktop/flavours.html +++ b/templates/desktop/flavours.html @@ -35,11 +35,6 @@

    Ubuntu flavours

    -
    -
    - -
    -
    @@ -57,7 +52,7 @@

    Ubuntu flavours

    width="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, + attrs={"class": "p-heading-icon__img u-image-separation"}, ) | safe }}

    Edubuntu

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

    Edubuntu

    -

    Edubuntu is an official flavour of Ubuntu crafted for use in the education world. Teachers and students will have access to a huge ecosystem of learning software and educational tools built on a familiar and usable desktop. Edubuntu provides a fast, stable, secure and privacy conscious option for schools, universities and other places of learning.

    +

    Edubuntu is an official flavour of Ubuntu crafted for use in the education world. Teachers and students will have access to a huge ecosystem of learning software and educational tools built on a familiar and usable desktop. Edubuntu provides a fast, stable, secure and privacy conscious option for schools and universities.

    Get Edubuntu
    • Join the Edubuntu community ›
      • @@ -103,7 +98,7 @@

      Edubuntu

      width="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, + attrs={"class": "p-heading-icon__img u-image-separation"}, ) | safe }}

      Kubuntu

      @@ -150,7 +145,7 @@

      Kubuntu

      width="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, + attrs={"class": "p-heading-icon__img u-image-separation"}, ) | safe }}

      Lubuntu

      @@ -196,7 +191,7 @@

      Lubuntu

      width="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, + attrs={"class": "p-heading-icon__img u-image-separation"}, ) | safe }}

      Ubuntu Budgie

      @@ -205,7 +200,7 @@

      Ubuntu Budgie

    Ubuntu Budgie is a proud official Ubuntu flavour. We combine the simplicity and elegance of the Budgie desktop environment with the power and familiarity of an Ubuntu based operative system.

    -

    The result is a modern and fast desktop distribution with great defaults, yet fully customizable.

    +

    The result is a modern and fast desktop distribution with great defaults, yet fully customisable.

    Get Ubuntu Budgie
    • Join the Ubuntu Budgie community ›
      • @@ -243,7 +238,7 @@

      Ubuntu Budgie

      width="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, + attrs={"class": "p-heading-icon__img u-image-separation"}, ) | safe }}

      Ubuntu Cinnamon

      @@ -251,7 +246,7 @@

      Ubuntu Cinnamon

    -

    Ubuntu Cinnamon combines Ubuntu with the intuitive Cinnamon desktop. Built upon the legacy of GNOME 2, Ubuntu Cinnamon provides a traditionally modern experience crafted for professional and home users alike. The hassle free desktop allows for deep personalization options and add-ons for a little extra spice.

    +

    Ubuntu Cinnamon combines Ubuntu with the Cinnamon desktop, built upon GNOME 2 to provide a traditionally modern experience. It is made for all home users alike, with intuitive software, and a simpler, customisable desktop suited with many personalization options and addons for some extra spice.

    Get Ubuntu Cinnamon
    • Join the Ubuntu Cinnamon community ›
      • @@ -289,7 +284,7 @@

      Ubuntu Cinnamon

      width="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, + attrs={"class": "p-heading-icon__img u-image-separation"}, ) | safe }}

      Ubuntu Kylin

      @@ -335,7 +330,7 @@

      Ubuntu Kylin

      width="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, + attrs={"class": "p-heading-icon__img u-image-separation"}, ) | safe }}

      Ubuntu MATE

      @@ -381,7 +376,7 @@

      Ubuntu MATE

      width="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, + attrs={"class": "p-heading-icon__img u-image-separation"}, ) | safe }}

      Ubuntu Studio

      @@ -427,7 +422,7 @@

      Ubuntu Studio

      height="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, + attrs={"class": "p-heading-icon__img u-image-separation"}, ) | safe }}

      Ubuntu Unity

      @@ -473,7 +468,7 @@

      Ubuntu Unity

      width="64", hi_def=True, loading="lazy", - attrs={"class": "p-heading-icon__img", "style": "margin-top: 0.5rem;"}, + attrs={"class": "p-heading-icon__img u-image-separation"}, ) | safe }}

      Xubuntu

      From b8120bc343fa180f5d2bbb32ca51b95af684ac76 Mon Sep 17 00:00:00 2001 From: MariaPaula Trujillo Date: Tue, 6 Feb 2024 15:19:01 +0100 Subject: [PATCH 25/33] Aply page revamp --- templates/desktop/organisations.html | 122 +++++++++++++++++++++++---- 1 file changed, 106 insertions(+), 16 deletions(-) diff --git a/templates/desktop/organisations.html b/templates/desktop/organisations.html index 2fdbe5b3929..46a4856ce76 100644 --- a/templates/desktop/organisations.html +++ b/templates/desktop/organisations.html @@ -4,29 +4,119 @@ {% block meta_description %}Ubuntu Desktop combines enterprise-grade support, security and functionality with the best of open source.{% endblock %} {% block meta_copydoc %}https://docs.google.com/document/d/1RuxCA6GYh9UriNv26HCZP9UHo4b4_9fYaaMtGQuH_xc/edit#{% endblock meta_copydoc %} +{% block body_class %}is-paper{% endblock %} + {% block content %} -
      -
      -
      -

      Bring Ubuntu to your
      organisation

      -

      - Ubuntu Desktop combines enterprise-grade support, security
      and functionality with the best of open source. -

      -

      Contact us

      -

      Secure open-source with Ubuntu Pro ›

      -

      Download the datasheet

      +
      +
      +
      +
      +
      +

      Bring Ubuntu to your organisation

      +

      Ubuntu Desktop combines enterprise-grade support, security
      and functionality with the best of open source.

      +
      +
      +

      + Contact us + Download the datasheet + Secure open-source with Ubuntu Pro › +

      +
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/f29015c6-image-laptop.png", +
      +
      + +
      +
      +
      +
      + {{ + image ( + url="https://assets.ubuntu.com/v1/5cdf69d6-Ubuntu+Pro.svg", alt="", - width="750", - height="484", + width="225", + height="58", hi_def=True, - loading="auto" + loading="lazy" ) | safe }}
      +
      +

      Secure enterprise management with Ubuntu Pro Desktop

      +
      +
      +
      +
      +
      +
      +
      +

      Secure open source stack

      +
      +
      +

      Receive 10 years of security patches for Ubuntu LTS releases with Expanded Security Maintenance (ESM) and coverage for over 23,000 packages in the Ubuntu Universe repository. Minimise downtime with Kernel Livepatch.

      +
      + Learn more about Ubuntu Pro › +
      +
      +
      +
      +
      +

      Landscape fleet management

      +
      +
      +

      Software updates, configuration management, policy compliance, and permission control for your entire physical and virtual fleet. Landscape is easy to use and smoothly integrates with other tooling through a robust API.

      +
      + Learn more about Landscape › +
      +
      +
      +
      +
      +

      Advanced Active Directory policies

      +
      +
      +

      Increase your management capabilities with full Group Policy Object support, remote script execution and privilege management.

      +
      + Learn more about Active Directory integration › +
      +
      +
      +
      +
      +

      Compliance, certification and hardening

      +
      +
      +

      Ubuntu Pro delivers security and compliance for even the most sensitive workloads with FIPS 140-2 certified modules, CIS hardening and Common Criteria EAL2 certification available.

      +
      + Learn more about Ubuntu's security practices › +
      +
      +
      +
      +
      +

      Weekday or 24/7 support

      +
      +
      +

      Advanced support customers get direct 24/7 access to our enterprise open source support team through our web portal, knowledge base or via phone.

      +
      + Contact us +
      +
      +
      +
      +
      + +
      +
      +
      +
      +

      Adopting a secure enterprise
      Linux descktop

      +
      +
      +

      Learn more about how you can adopt Linux securely for development teams in a Windows-centric organisation, without compromising on manageability and compliance.

      +
      + Download our guide +
      From 57d03433b786617d30dd60f520fe9a0f3056d03c Mon Sep 17 00:00:00 2001 From: MariaPaula Trujillo Date: Tue, 6 Feb 2024 18:11:12 +0100 Subject: [PATCH 26/33] Finish applying refresh --- templates/desktop/organisations.html | 767 +++++++++------------------ 1 file changed, 243 insertions(+), 524 deletions(-) diff --git a/templates/desktop/organisations.html b/templates/desktop/organisations.html index 46a4856ce76..e9cf15dbc75 100644 --- a/templates/desktop/organisations.html +++ b/templates/desktop/organisations.html @@ -8,7 +8,7 @@ {% block content %}
      -
      +
      @@ -23,7 +23,7 @@

      Bring Ubuntu to your organisation

      -
      +
      @@ -48,7 +48,7 @@

      Secure enterprise management with Ubuntu Pro Desktop

      -
      +

      Secure open source stack

      @@ -59,7 +59,7 @@

      Secure open source stack

      -
      +

      Landscape fleet management

      @@ -70,7 +70,7 @@

      Landscape fleet management

      -
      +

      Advanced Active Directory policies

      @@ -81,7 +81,7 @@

      Advanced Active Directory policies

      -
      +

      Compliance, certification and hardening

      @@ -92,7 +92,7 @@

      Compliance, certification and hardening

      -
      +

      Weekday or 24/7 support

      @@ -110,7 +110,7 @@

      Weekday or 24/7 support

      -

      Adopting a secure enterprise
      Linux descktop

      +

      Adopting a secure enterprise
      Linux desktop

      Learn more about how you can adopt Linux securely for development teams in a Windows-centric organisation, without compromising on manageability and compliance.

      @@ -120,103 +120,27 @@

      Adopting a secure enterprise
      Linux descktop

      -
      -
      -
      -

      Secure enterprise management with Ubuntu Pro Desktop

      -
      -
      -
      -
      -

      Secure open-source stack

      -
      -

      - Receive 10 years of security patches for Ubuntu LTS releases with Expanded Security Maintenance (ESM) and coverage for over 23,000 packages in the Ubuntu Universe repository. Minimise downtime with Kernel Livepatch. -

      -

      - - Learn more about Ubuntu Pro - -

      -
      -
      -

      Landscape Fleet Management

      -
      -

      - Software updates, configuration management, policy compliance, and permission control for your entire physical and virtual fleet. Landscape is easy to use and smoothly integrates with other tooling through a robust API. -

      -

      - - Learn more about Landscape - -

      -
      -
      -

      Advanced Active Directory Policies

      -
      -

      - Increase your management capabilities with full Group Policy Object support, remote script execution and privilege management. -

      -

      - - Learn more about Active
      Directory integration -       -

      -
      -
      -

      Compliance, certification and hardening

      -
      -

      - Ubuntu Pro delivers security and compliance for even the most sensitive workloads with FIPS 140-2 certified modules, CIS hardening and Common Criteria EAL2 certification available. -

      -

      - - Learn more about Ubuntu's security practices - -

      -
      -
      -

      Certified hardware

      -
      -

      - Ubuntu Desktop is certified across a wide range of laptops, desktops, and workstations, including the HP Z series and Dell XPS and Precision lines. -

      -

      - - Learn more about Ubuntu certified hardware - -

      +
      +
      +
      +
      +

      High performance
      on your choice of hardware

      -
      -

      Weekday or 24/7 Support

      -
      -

      - Advanced support customers get direct 24/7 access to our enterprise open source support team through our web portal, knowledge base or via phone. -

      -

      - - Contact us - -

      +
      +

      To offer the best performance on Ubuntu, manufacturers are pre-loading devices with an Ubuntu certified image. Canonical is committed to working closely with the world’s leading manufacturers to optimise and certify Ubuntu on their laptops and PCs.

      + Learn more about Ubuntu certified hardware ›
      -
      - -
      -
      -

      Seamless operations on your choice of hardware

      -

      To offer the best performance on Ubuntu, manufacturers are pre-loading devices with an Ubuntu certified image. Canonical is committed to working closely with the world's leading manufacturers to optimise and certify Ubuntu on their laptops and PCs.

      -

      Visit our partners page to find out more ›

      -
      -
      +
      - {{ image ( - url="https://assets.ubuntu.com/v1/11814428-hp-logo.png", + {{ + image ( + url="https://assets.ubuntu.com/v1/a5bec84b-hp-logo.png", alt="Hewlett Packard", - width="288", - height="288", + width="159", + height="372", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} @@ -224,11 +148,12 @@

      Seamless operations on your choice of hardware

      }}
      - {{ image ( - url="https://assets.ubuntu.com/v1/c70b529e-lenovo-logo.png", + {{ + image ( + url="https://assets.ubuntu.com/v1/3b24973b-lenovo-logo.png", alt="Lenovo", - width="288", - height="288", + width="169", + height="256", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} @@ -236,32 +161,25 @@

      Seamless operations on your choice of hardware

      }}
      - {{ image ( - url="https://assets.ubuntu.com/v1/987acdaa-dell-logo.png", + {{ + image ( + url="https://assets.ubuntu.com/v1/25514caf-dell-logo.svg", alt="Dell", - width="288", - height="288", + width="71", + height="144", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} ) | safe }}
      -
      -
      -
      -
      -
      -
      -
      -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/6079d02b-amd-logo.png", + {{ + image ( + url="https://assets.ubuntu.com/v1/1c926673-amd-xilinx-logo.png", alt="AMD", - width="288", - height="288", + width="247", + height="558", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} @@ -269,23 +187,25 @@

      Seamless operations on your choice of hardware

      }}
      - {{ image ( - url="https://assets.ubuntu.com/v1/67f81bfe-intel-new-logo.png", - alt="Intel", - width="288", - height="288", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe - }} + {{ + image ( + url="https://assets.ubuntu.com/v1/834d57ab-intel-logo.png", + alt="Intel", + width="149", + height="288", + hi_def=True, + loading="lazy", + attrs={"class": "p-logo-section__logo"} + ) | safe + }}
      - {{ image ( - url="https://assets.ubuntu.com/v1/711be910-arm-logo.png", + {{ + image ( + url="https://assets.ubuntu.com/v1/d9d05f49-arm-logo.png", alt="ARM", - width="288", - height="288", + width="183", + height="372", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} @@ -293,11 +213,12 @@

      Seamless operations on your choice of hardware

      }}
      - {{ image ( - url="https://assets.ubuntu.com/v1/cd765ccc-nvidia-logo.png", + {{ + image ( + url="https://assets.ubuntu.com/v1/5ac7ab41-nvidia-logo.png", alt="Nvidia", - width="288", - height="288", + width="369", + height="372", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} @@ -309,349 +230,124 @@

      Seamless operations on your choice of hardware

      -
      +
      -
      -
      -
      -

      Ubuntu delivers the best
      of open source

      -
      -
      -

      Drive innovation in high-growth areas such as data science and machine learning with support for the latest libraries and apps in addition to critical workflow tools like Multipass, Juju, LXD and MicroK8s.

      -
      -
      -
      -
      -
      -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/be56a944-tensor-flow-logo.png", - alt="TensorFlow", - width="158", - height="158", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe - }} -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/96c4727f-OpenCV-logo.png", - alt="OpenCV", - width="158", - height="158", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe - }} -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/5154773b-docker-logo-horizontal.png", - alt="Docker", - width="158", - height="158", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe - }} -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/94ae6189-edgexfoundry-logo.png", - alt="EdgeX Foundry", - width="158", - height="158", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe - }} -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/a20afc7d-kubeflow-logo.png", - alt="Kubeflow", - width="158", - height="158", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe - }} -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/835a5d08-Juju.png", - alt="Canonical Juju", - width="158", - height="158", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe - }} -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/75145268-acrn-logo.png", - alt="Acrn", - width="158", - height="158", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe - }} -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/eac2a3ad-openvino-logo.png", - alt="OpenVINO", - width="158", - height="158", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe - }} -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/1d3e5eaf-flutter-logo.png", - alt="Flutter", - width="158", - height="158", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe - }} -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/49e6dfc2-ros-logo.png", - alt="ROS", - width="158", - height="158", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe - }} -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/a984834a-LXD.png", - alt="Canonical LXD", - width="158", - height="158", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe - }} -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/d60029cc-pytorch-logo.png", - alt="Pytorch", - width="158", - height="158", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe - }} -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/1ad80137-Multipass.png", - alt="Canonical Multipass", - width="158", - height="158", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe - }} -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/083fd46b-open-v-switch.png", - alt="Open vSwitch", - width="158", - height="158", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe - }} -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/3f49251c-MicroK8s.png", - alt="Canonical MicroK8s", - width="158", - height="158", - hi_def=True, - loading="lazy", - attrs={"class": "p-logo-section__logo"} - ) | safe - }} -
      -
      -
      -
      + {{ image ( + url="https://assets.ubuntu.com/v1/1819c545-woman-working.jpg", + alt="", + width="2464", + height="1052", + hi_def=True, + loading="lazy" + ) | safe + }}
      -
      -
      -
      - -
      -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/750a8ab6-ubuntu-for-datascience.svg", - alt="Ubuntu for datascience", - width="538", - height="133", - hi_def=True, - loading="lazy" - ) | safe - }} -
      -
      -

      Ubuntu for Data Science

      -

      Develop AI models on high-end Ubuntu workstations. Train on racks of bare-metal or public clouds with hardware acceleration. Deploy to cloud, edge and IoT. All on Ubuntu.

      -

      How Ubuntu enables AI innovation

      -
      -
      +
      -
      - -

      Developers and data science teams use the Ubuntu platform to support their most important work. Our collaboration with Canonical enables industry innovators to get AI-powered insights from their data faster.

      - Manuvir Das — NVIDIA, Head of Enterprise Computing -
      -
      -
      - -
      -
      -
      - -
      -
      -

      Write once and deploy anywhere

      -

      Using Ubuntu Desktop provides a common platform for development, test, and production environments.

      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/c1a2b136-Screenshot+from+2022-04-12+16-20-18.png", - alt="", - width="650", - height="169", - hi_def=True, - loading="lazy" - ) | safe - }} -
      +

      Endorsed by partners and customers

      -
      -
      -

      Ubuntu in the cloud

      -

      Canonical fully supports public clouds and provides its own solutions for private cloud implementation and management, as well as workload orchestration in hybrid cloud and multicloud environments.

      -

      Ubuntu on cloud

      +
      +
      +
      +
      + {{ + image ( + url="https://assets.ubuntu.com/v1/ed098196-nvidia.png", + alt="", + width="110", + height="41", + hi_def=True, + loading="lazy" + ) | safe + }} +
      -
      - {{ - image( - url="https://assets.ubuntu.com/v1/ab87e245-Private-v-Public-Mulit-Cloud.svg", - alt="Private vs public cloud", - width="250", - height="214", - hi_def=True, - loading="auto", - ) | safe - }} +
      +
      +

      + “Developers and data science teams use the Ubuntu platform to support their most important work. Our collaboration with Canonical enables industry innovators to get AI-powered insights from their data faster”. +

      +
      +
      +
      +
      +

      Manuvir Das

      +
      +
      +

      NVIDIA, Head of Enterprise Computing

      +
      +
      -
      -
      -

      Easily manage your IT estate

      -
      -
      -
      -

      Landscape

      -

      Lower the complexity and cost of running a Linux desktop estate using Landscape, Canonical's systems management tool for monitoring, managing, patching and compliance reporting on all your Ubuntu desktops. Included in an Ubuntu Pro Desktop subscription.

      -

      Learn more about Landscape

      -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/990093e1-cn-home-landscape.png", - alt="", - width="515", - height="255", - hi_def=True, - loading="lazy" - ) | safe - }} -
      +
      +
      +
      +

      Seamless integration with your existing infrastructure

      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/e7bcb9fa-4b9bad4c100c73cc2c1c839f3eb5ec03_active-directory-logo.png", - alt="", - width="400", - height="99", - hi_def=True, - loading="lazy" - ) | safe - }} -
      -
      -

      Active Directory

      -

      Integrating Ubuntu Desktop into an existing Active Directory architecture can be an automated and effortless process when using System Security Services Daemon (SSSD). GPO is available by default to manage desktop settings and Ubuntu Pro users receive access to additional Active Directory policies like remote script execution and privilege management.

      -

      ADSys documentation

      -

      Integrating Ubuntu Desktop with Active Directory

      +
      +
      +
      +
      +

      Advanced Active Directory policies

      +
      +
      +

      System Security Services Daemon (SSSD) and GPO are available by default to manage desktop settings. Ubuntu Pro users receive access to advanced policies like remote script execution and privilege management.

      +
      +

      + Integrating Ubuntu Desktop with Active Directory › + ADSys documentation › +

      +
      +
      +
      +
      +
      +

      Supported by key Microsoft tools

      +
      +
      +

      Microsoft Intune on Ubuntu Desktop enables custom policy compliance and gated access to corporate resources via the Microsoft Edge browser. Ubuntu also supports critical business and administration applications such as Powershell and Microsoft Teams.

      +
      + Watch our webinar › +
      +
      +
      +
      +
      +

      Ubuntu on Windows Subsystem for Linux

      +
      +
      +

      Windows Subsystem for Linux (WSL) gives Windows developers a full Ubuntu terminal experience and easy access to cutting edge open source tools. IT administrators can leverage Ubuntu Pro to remotely manage and secure their developer instances.

      +
      + Learn more about Ubuntu on WSL › +
      +
      -
      - {% include "shared/_pro_strip.html" %} -
      -

      For more information, download our whitepaper:

      -

      - Adopting a secure enterprise Linux desktop -

      -

      More details and pricing ›

      -
      -
      -
      -
      -
      + +
      +
      +
      +

      Virtual desktops, powered by AWS

      +
      +

      Ubuntu Desktop on Amazon WorkSpaces offers developers an optimised Ubuntu Desktop environment to rapidly build, test and deploy code — spinning up and tearing down instances as required.

      IT organisations benefit from rapid deployment, configuration and scalability for their managed Ubuntu Desktops whilst their applications and data remain secured in the AWS cloud, even when their developers are working remotely.

      -

      - Find out more about Ubuntu WorkSpaces › -

      -
      -
      - {{ image ( +
      + Find out more about Ubuntu WorkSpaces › + {{ + image ( url="https://assets.ubuntu.com/v1/55bb92be-aws_workspaces.png", alt="", - width="400", - height="143", + width="603", + height="215", hi_def=True, loading="lazy" ) | safe @@ -660,84 +356,107 @@

      Virtual desktops, powered by AWS

      -
      -
      -

      Read more about Ubuntu Desktop in organisations

      +
      +
      +
      +
      +

      Day zero support with Ubuntu
      Desktop Enterprise Services

      +
      +
      +

      Designed to help your developers get up and running on Ubuntu as quickly as possible. Canonical engineers partner with you to deliver a solution tailored to your needs, including:

      +
      +
        +
      • Customised image creation
        • +
      • Post-deployment automation
        • +
      • Active Directory integration
        • +
      • Security configuration
        • +
      • Landscape deployment and registration
        • +
      +
      + Learn more about our enterprise services +
      -
      -
      -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/3769b4a7-webinar-icon.svg", - alt="", - width="88", - height="72", - hi_def=True, - loading="lazy", - attrs={"class": "p-heading-icon__img p-heading-icon__img--small"}, - ) | safe - }} -

      Webinar

      +
      + +
      +
      +
      +
      +

      Read more about Ubuntu
      Desktop in organisations

      +
      +
      +
      +
      +

      Webinars

      +
      +
      +
      -

      Unleashing Z Workstations by HP Powered by Ubuntu

      -
      -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/b061c401-White+paper.svg", - alt="", - width="171", - height="150", - hi_def=True, - loading="lazy", - attrs={"class": "p-heading-icon__img p-heading-icon__img--small"}, - ) | safe - }} -

      Whitepaper

      +
      +
      +
      +
      +
      +
      +

      Whitepapers

      +
      +
      +
      -

      Ubuntu Desktop for the enterprise

      -
      -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/b061c401-White+paper.svg", - alt="", - width="171", - height="150", - hi_def=True, - loading="lazy", - attrs={"class": "p-heading-icon__img p-heading-icon__img--small"}, - ) | safe - }} -

      Whitepaper

      -
      +
      +
      + +
      +
      +
      +
      +
      +

      Latest Ubuntu Desktop news from our blog ›

      -

      How to increase developer productivity with Ubuntu Desktop

      -
      -
      -
      - {{ image ( - url="https://assets.ubuntu.com/v1/df54bb6a-document-open-icon.svg", - alt="", - width="32", - height="28", - hi_def=True, - loading="lazy", - attrs={"class": "p-heading-icon__img p-heading-icon__img--small"}, - ) | safe - }} -

      Blog

      -
      +
      +
      -

      Planning phased Ubuntu 22.04 Enterprise Desktop upgrades with Landscape

      +
      +

      Explore all

      + +
      + + + {% endblock content %} From 363a854968267425f1b7b4681a1e4897ed9e0c65 Mon Sep 17 00:00:00 2001 From: MariaPaula Trujillo Date: Wed, 7 Feb 2024 13:03:40 +0100 Subject: [PATCH 27/33] Apply review suggestions --- templates/desktop/organisations.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/templates/desktop/organisations.html b/templates/desktop/organisations.html index e9cf15dbc75..3a4e2daa9eb 100644 --- a/templates/desktop/organisations.html +++ b/templates/desktop/organisations.html @@ -176,10 +176,10 @@

      High performance
      on your choice of hardware

      {{ image ( - url="https://assets.ubuntu.com/v1/1c926673-amd-xilinx-logo.png", + url="https://assets.ubuntu.com/v1/dac5c9d7-amd-logo.png", alt="AMD", - width="247", - height="558", + width="186", + height="257", hi_def=True, loading="lazy", attrs={"class": "p-logo-section__logo"} @@ -382,12 +382,12 @@

      Day zero support with Ubuntu
      Desktop Enterprise Services

      -

      Read more about Ubuntu
      Desktop in organisations

      +

      Learn more about Ubuntu
      Desktop in organisations

      -

      Webinars

      +

      Webinars

        @@ -403,7 +403,7 @@

        Webinars

        -

        Whitepapers

        +

        Whitepapers

          From d4f8d3f16f0586404af4ae8316c16ff07cd4ff6d Mon Sep 17 00:00:00 2001 From: l Date: Thu, 8 Feb 2024 11:24:23 +0000 Subject: [PATCH 28/33] visual qa --- templates/desktop/organisations.html | 52 ++++++++++++++++------------ 1 file changed, 29 insertions(+), 23 deletions(-) diff --git a/templates/desktop/organisations.html b/templates/desktop/organisations.html index 3a4e2daa9eb..9011088eda3 100644 --- a/templates/desktop/organisations.html +++ b/templates/desktop/organisations.html @@ -7,20 +7,26 @@ {% block body_class %}is-paper{% endblock %} {% block content %} -
          -
          +
          +
          -
          -
          -

          Bring Ubuntu to your organisation

          +
          +
          +
          +
          +

          Bring Ubuntu to your organisation

          +
          +
          +

          Ubuntu Desktop combines enterprise-grade support, security
          and functionality with the best of open source.

          +
          +

          + Contact us + Download the datasheet + Secure open‑source with Ubuntu Pro › +

          +
          -
          -

          - Contact us - Download the datasheet - Secure open-source with Ubuntu Pro › -

          @@ -29,7 +35,7 @@

          Bring Ubuntu to your organisation

          -
          +
          {{ image ( url="https://assets.ubuntu.com/v1/5cdf69d6-Ubuntu+Pro.svg", @@ -292,10 +298,10 @@

          Seamless integration with your existing infrastructure

          -
          +

          Advanced Active Directory policies

          -
          +

          System Security Services Daemon (SSSD) and GPO are available by default to manage desktop settings. Ubuntu Pro users receive access to advanced policies like remote script execution and privilege management.

          @@ -306,10 +312,10 @@

          Advanced Active Directory policies

          -
          +

          Supported by key Microsoft tools

          -
          +

          Microsoft Intune on Ubuntu Desktop enables custom policy compliance and gated access to corporate resources via the Microsoft Edge browser. Ubuntu also supports critical business and administration applications such as Powershell and Microsoft Teams.

          Watch our webinar › @@ -317,10 +323,10 @@

          Supported by key Microsoft tools

          -
          -

          Ubuntu on Windows Subsystem for Linux

          +
          +

          Ubuntu on Windows Subsystem for Linux

          -
          +

          Windows Subsystem for Linux (WSL) gives Windows developers a full Ubuntu terminal experience and easy access to cutting edge open source tools. IT administrators can leverage Ubuntu Pro to remotely manage and secure their developer instances.

          Learn more about Ubuntu on WSL › @@ -419,17 +425,17 @@

          Whitepapers

          -
          +
          -
          +

          Latest Ubuntu Desktop news from our blog ›

          -
          +
          -
          +

          Explore all

          From 98b7aec83d3d5dd84b8c46053126d8e48e94346d Mon Sep 17 00:00:00 2001 From: MariaPaula Trujillo Date: Thu, 8 Feb 2024 13:19:26 +0100 Subject: [PATCH 29/33] Created a latest news partial and applied the same medium screen layout for relevant section across the bubble --- templates/desktop/developers.html | 49 ++--------------- templates/desktop/flavours.html | 53 +++---------------- templates/desktop/organisations.html | 43 +-------------- .../desktop/partial/_desktop-latest-news.html | 40 ++++++++++++++ 4 files changed, 54 insertions(+), 131 deletions(-) create mode 100644 templates/desktop/partial/_desktop-latest-news.html diff --git a/templates/desktop/developers.html b/templates/desktop/developers.html index b454ec5dfd6..6ba185976f8 100755 --- a/templates/desktop/developers.html +++ b/templates/desktop/developers.html @@ -560,10 +560,10 @@

          Free for personal use
          on up to five machines

          Get started today

          -
          +
          -
          +

          Download and install

          @@ -574,7 +574,7 @@

          Download and install

          -
          +

          Buy it pre-installed

          @@ -585,7 +585,7 @@

          Buy it pre-installed

          -
          +

          Join our community

          @@ -611,46 +611,7 @@

          Join our community

          -
          -
          -
          -
          -
          -

          Latest Ubuntu Desktop news
          from our blog ›

          -
          -
          -
          -
          -
          -
          -

          Explore all

          -
          -
          - - -
          - - - +{% include "desktop/partial/_desktop-latest-news.html" %} diff --git a/templates/desktop/flavours.html b/templates/desktop/flavours.html index a511476c76f..02eba9567bf 100644 --- a/templates/desktop/flavours.html +++ b/templates/desktop/flavours.html @@ -508,21 +508,21 @@

          More ways to experience Ubuntu

          -
          -
          +
          +

          Ubuntu-based variants

          -
          +

          In addition to the officially recognised flavours, dozens of other Linux distributions take Ubuntu as a base for their own distinctive ideas and approaches.

          A complete list of known flavours, editions and customizations is maintained on the Ubuntu Wiki's UbuntuFlavors page ›

          -
          -
          +
          +

          Looking for Ubuntu?

          -
          +

          Download the latest release of Ubuntu desktop, the open source operating system that powers millions of PCs and laptops around the world. It's easy to install on Windows or macOS, or run Ubuntu alongside them!

          Download now

          @@ -531,45 +531,6 @@

          Looking for Ubuntu?

          -
          -
          -
          -
          -
          -

          Latest Ubuntu Desktop news from our blog ›

          -
          -
          -
          -
          -
          -
          -

          Explore all

          -
          -
          - - -
          - - - +{% include "desktop/partial/_desktop-latest-news.html" %} {% endblock content %} diff --git a/templates/desktop/organisations.html b/templates/desktop/organisations.html index 9011088eda3..9da36a2248c 100644 --- a/templates/desktop/organisations.html +++ b/templates/desktop/organisations.html @@ -350,7 +350,7 @@

          Virtual desktops, powered by AWS

          Find out more about Ubuntu WorkSpaces › {{ image ( - url="https://assets.ubuntu.com/v1/55bb92be-aws_workspaces.png", + url="https://assets.ubuntu.com/v1/1624c0a0-55bb92be-aws_workspaces.png.png", alt="", width="603", height="215", @@ -424,45 +424,6 @@

          Whitepapers

          -
          -
          -
          -
          -
          -

          Latest Ubuntu Desktop news from our blog ›

          -
          -
          -
          -
          -
          -
          -

          Explore all

          -
          -
          - - -
          - - - +{% include "desktop/partial/_desktop-latest-news.html" %} {% endblock content %} diff --git a/templates/desktop/partial/_desktop-latest-news.html b/templates/desktop/partial/_desktop-latest-news.html new file mode 100644 index 00000000000..47f939184a4 --- /dev/null +++ b/templates/desktop/partial/_desktop-latest-news.html @@ -0,0 +1,40 @@ +
          +
          +
          +
          +
          +

          Latest Ubuntu Desktop news from our blog ›

          +
          +
          +
          +
          +
          +
          +

          Explore all

          +
          +
          + + +
          + + + \ No newline at end of file From 556d015c39a56369b61966825b8c196b020e14cc Mon Sep 17 00:00:00 2001 From: MariaPaula Trujillo Date: Fri, 9 Feb 2024 09:57:01 +0100 Subject: [PATCH 30/33] Apply review suggestions --- templates/desktop/organisations.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/templates/desktop/organisations.html b/templates/desktop/organisations.html index 9da36a2248c..23c97ededc8 100644 --- a/templates/desktop/organisations.html +++ b/templates/desktop/organisations.html @@ -18,12 +18,12 @@

          Bring Ubuntu to your organisation

        -

        Ubuntu Desktop combines enterprise-grade support, security
        and functionality with the best of open source.

        +

        Ubuntu Desktop combines enterprise-grade support, security
        and functionality with the best of open source.

        Contact us Download the datasheet - Secure open‑source with Ubuntu Pro › + Secure open source with Ubuntu Pro ›

      @@ -372,7 +372,7 @@

      Day zero support with Ubuntu
      Desktop Enterprise Services

      Designed to help your developers get up and running on Ubuntu as quickly as possible. Canonical engineers partner with you to deliver a solution tailored to your needs, including:

        -
      • Customised image creation
        • +
      • Custom image creation
      • Post-deployment automation
      • Active Directory integration
      • Security configuration
        • From a297c732a948070b8c4d2d3d8dbd4d6c376f1a6f Mon Sep 17 00:00:00 2001 From: MariaPaula Trujillo Date: Fri, 9 Feb 2024 10:22:40 +0100 Subject: [PATCH 31/33] Apply updated links --- templates/desktop/organisations.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/desktop/organisations.html b/templates/desktop/organisations.html index 23c97ededc8..e715eb34f5e 100644 --- a/templates/desktop/organisations.html +++ b/templates/desktop/organisations.html @@ -92,7 +92,7 @@

        Advanced Active Directory policies

        Compliance, certification and hardening

      -

      Ubuntu Pro delivers security and compliance for even the most sensitive workloads with FIPS 140-2 certified modules, CIS hardening and Common Criteria EAL2 certification available.

      +

      Ubuntu Pro delivers security and compliance for even the most sensitive workloads with FIPS 140-2 certified modules, CIS hardening and Common Criteria EAL2 certification available.

      Learn more about Ubuntu's security practices ›
      From 0261cfdcc1f9d73b0ff57e0ed67fa100c8cc623c Mon Sep 17 00:00:00 2001 From: Pete Date: Fri, 9 Feb 2024 13:27:50 +0100 Subject: [PATCH 32/33] Fix linting errors --- static/js/src/release-chart-old.js | 2 +- static/js/src/release-chart.js | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/static/js/src/release-chart-old.js b/static/js/src/release-chart-old.js index 5f426a60057..e7b411805ac 100644 --- a/static/js/src/release-chart-old.js +++ b/static/js/src/release-chart-old.js @@ -440,7 +440,7 @@ export function createChartWithTitles( if (!taskTypesTitle || !taskVersionsTitle) return; // build regular chart - createChart(chartSelector, taskTypes, taskStatus, tasks, taskVersions); + createReleaseChartOld(chartSelector, taskTypes, taskStatus, tasks, taskVersions); // adjust chart height to fit titles margin.left = calculateYAxisWidth(taskTypes); diff --git a/static/js/src/release-chart.js b/static/js/src/release-chart.js index 10478f79050..ca1cf10caa9 100644 --- a/static/js/src/release-chart.js +++ b/static/js/src/release-chart.js @@ -305,7 +305,7 @@ function addXAxisVerticalLines(svg, height, margin) { * * Builds key for supplied chart based on task status */ -function buildChartKey(chartSelector, taskStatus) { +function buildChartKey(svg, chartSelector, taskStatus) { var taskStatusKeys = Object.keys(taskStatus); var rectDimensions = 25; var rowHeight = rectDimensions + 5; @@ -314,7 +314,7 @@ function buildChartKey(chartSelector, taskStatus) { var containerWidth = document.querySelector(chartSelector).clientWidth; var numberOfExtraLines = - getMaxNumberOfLines(taskStatusKeys, containerWidth) - 1; + getMaxNumberOfLines(svg, taskStatusKeys, containerWidth) - 1; var extraChartHeight = numberOfExtraLines * 9; var chartKey = d3 @@ -363,7 +363,7 @@ function buildChartKey(chartSelector, taskStatus) { * Find the max number of lines that any given text will occupy from * a list of texts, based on a given container width */ -function getMaxNumberOfLines(textList, width) { +function getMaxNumberOfLines(svg, textList, width) { var tempSvg = (svg = document.createElementNS( "http://www.w3.org/2000/svg", "svg" @@ -412,7 +412,7 @@ function wrapText(text, width) { x = text.attr("x"), y = text.attr("y"), dy = 0; - tspan = text + var tspan = text .text(null) .append("tspan") .attr("x", x) @@ -611,7 +611,7 @@ export function createReleaseChart( addXAxisVerticalLines(svg, height, margin); addYAxisHorizontalLines(svg, yAxis, width, margin); cleanUpChart(svg); - buildChartKey(keyAttachmentSelector, taskStatus); + buildChartKey(svg, keyAttachmentSelector, taskStatus); highlightChartRow(svg, y, highlightVersion); } From 186050b7888db38c16b6a1c59f87142622a73765 Mon Sep 17 00:00:00 2001 From: MariaPaula Trujillo Date: Fri, 9 Feb 2024 13:39:43 +0100 Subject: [PATCH 33/33] Run prettier --- static/js/src/release-chart-old.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/static/js/src/release-chart-old.js b/static/js/src/release-chart-old.js index e7b411805ac..7fbaf8e8f50 100644 --- a/static/js/src/release-chart-old.js +++ b/static/js/src/release-chart-old.js @@ -440,7 +440,13 @@ export function createChartWithTitles( if (!taskTypesTitle || !taskVersionsTitle) return; // build regular chart - createReleaseChartOld(chartSelector, taskTypes, taskStatus, tasks, taskVersions); + createReleaseChartOld( + chartSelector, + taskTypes, + taskStatus, + tasks, + taskVersions + ); // adjust chart height to fit titles margin.left = calculateYAxisWidth(taskTypes);