From 4907d644bb78f69d8e2f957f2cffad0e2ed6a4e4 Mon Sep 17 00:00:00 2001 From: George Kalpakas Date: Tue, 9 Mar 2021 14:15:47 +0200 Subject: [PATCH] refactor(docs-infra): use more consistent content width on marketing pages (#41051) Previously, each marketing page used a different limit for its content's width (if it had a limit at all) and implemented the width limiting in a different way. Besides resulting in an inconsistent UX, this also made it difficult to apply site-wide layout changes. This commit makes the limit for most marketing pages consistent and uses the same CSS class to make it easier to apply site-wide changes in the future. The chosen limit is slightly larger than that of docs pages (62.5em/1000px vs 50em/800px), because marketing pages have a different type of content and layout (i.e. images, multi-column layout, etc.). Finally, this commit also removes obsolete wrapper elements, CSS classes and CSS styles, that are no longer necessary after the changes. Notably, the homepage (`/`) and the "Contributors" page (`/about`) have remained unchanged, because the former has its own layout that is different from other marketing pages and the latter would offer a worse UX with a small content width limit (as the one used on other marketing pages). The content widths of the rest of the marketing pages change slightly as a result of the changes in this commit, but not in a way that would have a negative impact on UX. More specifically: | Page (URL) | Size before | Size after | |:--------------|------------:|-----------:| | `/contribute` | 880px | 1000px | | `/events` | unlimited | 1000px | | `/features` | 996px | 1000px | | `/presskit` | 800px | 1000px | | `/resources` | 800px | 1000px | PR Close #41051 --- aio/content/marketing/contribute.html | 2 +- aio/content/marketing/events.html | 2 +- aio/content/marketing/features.html | 174 +++++++++--------- .../resource/resource-list.component.html | 24 ++- aio/src/styles/1-layouts/_layout-global.scss | 2 +- .../styles/1-layouts/_marketing-layout.scss | 4 - aio/src/styles/2-modules/_contribute.scss | 1 - aio/src/styles/2-modules/_features.scss | 2 +- aio/src/styles/2-modules/_resources.scss | 7 - aio/src/styles/2-modules/_table.scss | 2 +- 10 files changed, 101 insertions(+), 119 deletions(-) diff --git a/aio/content/marketing/contribute.html b/aio/content/marketing/contribute.html index be14eb4b70..0b6e5bd01c 100644 --- a/aio/content/marketing/contribute.html +++ b/aio/content/marketing/contribute.html @@ -2,7 +2,7 @@

Contribute to Angular

-
+

Angular Projects

diff --git a/aio/content/marketing/events.html b/aio/content/marketing/events.html index df88a61ca2..9d7182f27c 100755 --- a/aio/content/marketing/events.html +++ b/aio/content/marketing/events.html @@ -2,6 +2,6 @@

Events

-
+
diff --git a/aio/content/marketing/features.html b/aio/content/marketing/features.html index 390a02af44..f303d017d0 100755 --- a/aio/content/marketing/features.html +++ b/aio/content/marketing/features.html @@ -2,107 +2,103 @@

Features & Benefits

-
-
-
-
-
-
Cross Platform
- -
-
+
+
+
+
Cross Platform
+ +
+
-
-
Progressive Web Apps
-

Use modern web platform capabilities to deliver app-like experiences. - High performance, offline, and zero-step installation.

-
- -
-
Native
-

Build native mobile apps with strategies from Cordova, Ionic, or NativeScript.

-
- -
-
Desktop
-

Create desktop-installed apps across Mac, Windows, and Linux using the same Angular methods you've learned for the web plus the ability to access native OS APIs.

-
-
-
+
+
Progressive Web Apps
+

Use modern web platform capabilities to deliver app-like experiences. + High performance, offline, and zero-step installation.

-
-
-
Speed and Performance
- -
-
- -
-
Code Generation
-

Angular turns your templates into code that's highly optimized for today's JavaScript virtual machines, giving you all the benefits of hand-written code with the productivity of a framework.

-
- -
-
Universal
-

Serve the first view of your application on Node.js®, .NET, PHP, and other servers for near-instant rendering in just HTML and CSS. Also paves the way for sites that optimize for SEO.

-
- -
-
Code Splitting
-

Angular apps load quickly with the new Component Router, which delivers automatic code-splitting so users only load code required to render the view they request.

-
-
-
+
+
Native
+

Build native mobile apps with strategies from Cordova, Ionic, or NativeScript.

-
-
-
Productivity
- -
-
+
+
Desktop
+

Create desktop-installed apps across Mac, Windows, and Linux using the same Angular methods you've learned for the web plus the ability to access native OS APIs.

+
+
+
+
-
-
Templates
-

Quickly create UI views with simple and powerful template syntax.

-
+
+
+
Speed and Performance
+ +
+
-
-
Angular CLI
-

Command line tools: start building fast, add components and tests, then instantly deploy.

-
- -
-
IDEs
-

Get intelligent code completion, instant errors, and other feedback in popular editors and IDEs.

-
-
-
+
+
Code Generation
+

Angular turns your templates into code that's highly optimized for today's JavaScript virtual machines, giving you all the benefits of hand-written code with the productivity of a framework.

-
-
-
Full Development Story
- -
-
+
+
Universal
+

Serve the first view of your application on Node.js®, .NET, PHP, and other servers for near-instant rendering in just HTML and CSS. Also paves the way for sites that optimize for SEO.

+
-
-
Testing
-

With Karma for unit tests, you can know if you've broken things every time you save. And Protractor makes your scenario tests run faster and in a stable manner.

-
+
+
Code Splitting
+

Angular apps load quickly with the new Component Router, which delivers automatic code-splitting so users only load code required to render the view they request.

+
+
+
+
-
-
Animation
-

Create high-performance, complex choreographies and animation timelines with very little code through Angular's intuitive API.

-
+
+
+
Productivity
+ +
+
-
-
Accessibility
-

Create accessible applications with ARIA-enabled components, developer guides, and built-in a11y test infrastructure.

-
-
+
+
Templates
+

Quickly create UI views with simple and powerful template syntax.

+
+ +
+
Angular CLI
+

Command line tools: start building fast, add components and tests, then instantly deploy.

+
+ +
+
IDEs
+

Get intelligent code completion, instant errors, and other feedback in popular editors and IDEs.

+
+
+
+
+ +
+
+
Full Development Story
+ +
+
+ +
+
Testing
+

With Karma for unit tests, you can know if you've broken things every time you save. And Protractor makes your scenario tests run faster and in a stable manner.

+
+ +
+
Animation
+

Create high-performance, complex choreographies and animation timelines with very little code through Angular's intuitive API.

+
+ +
+
Accessibility
+

Create accessible applications with ARIA-enabled components, developer guides, and built-in a11y test infrastructure.

diff --git a/aio/src/app/custom-elements/resource/resource-list.component.html b/aio/src/app/custom-elements/resource/resource-list.component.html index 14e29f27af..d26938d462 100644 --- a/aio/src/app/custom-elements/resource/resource-list.component.html +++ b/aio/src/app/custom-elements/resource/resource-list.component.html @@ -1,4 +1,4 @@ -
+
{{category.title}}
-
-
-
- -

{{subCategory.title}}

+
+
+ +

{{subCategory.title}}

- diff --git a/aio/src/styles/1-layouts/_layout-global.scss b/aio/src/styles/1-layouts/_layout-global.scss index 2ea7343131..16ea6c1ff1 100644 --- a/aio/src/styles/1-layouts/_layout-global.scss +++ b/aio/src/styles/1-layouts/_layout-global.scss @@ -9,7 +9,7 @@ body, .center-layout { margin: 0 auto; - max-width: 50em; + max-width: 62.5em; } .github-links + .content h1 { diff --git a/aio/src/styles/1-layouts/_marketing-layout.scss b/aio/src/styles/1-layouts/_marketing-layout.scss index b0b0d8f7f4..e1d99ef5fe 100644 --- a/aio/src/styles/1-layouts/_marketing-layout.scss +++ b/aio/src/styles/1-layouts/_marketing-layout.scss @@ -402,7 +402,3 @@ div[layout=row]{ margin-bottom: 20px; } } - -.events-container{ - overflow-x: auto; -} diff --git a/aio/src/styles/2-modules/_contribute.scss b/aio/src/styles/2-modules/_contribute.scss index ee4ecc4ceb..0b3b3b3937 100644 --- a/aio/src/styles/2-modules/_contribute.scss +++ b/aio/src/styles/2-modules/_contribute.scss @@ -5,7 +5,6 @@ .card-section { justify-content: space-between; - max-width: 880px; @media (max-width: 600px) { flex-direction: column; diff --git a/aio/src/styles/2-modules/_features.scss b/aio/src/styles/2-modules/_features.scss index 7bd13ea509..fce8580354 100644 --- a/aio/src/styles/2-modules/_features.scss +++ b/aio/src/styles/2-modules/_features.scss @@ -24,7 +24,7 @@ flex-wrap: wrap; justify-content: space-evenly; - @media (max-width: 600px) { + @media (max-width: 768px) { flex-direction: column; } diff --git a/aio/src/styles/2-modules/_resources.scss b/aio/src/styles/2-modules/_resources.scss index 7fb53654d9..2e7223231b 100644 --- a/aio/src/styles/2-modules/_resources.scss +++ b/aio/src/styles/2-modules/_resources.scss @@ -4,7 +4,6 @@ aio-resource-list { box-shadow: 0 1px 4px 0 rgba($black, 0.37); border-radius: 4px; margin-bottom: 8px * 6; - max-width: 50em; } .resource-item { @@ -18,12 +17,6 @@ aio-resource-list { } } - .resources-container { - display: flex; - flex-direction: column; - align-items: center; - } - .subcategory-title { padding: 16px 23px; margin: 0; diff --git a/aio/src/styles/2-modules/_table.scss b/aio/src/styles/2-modules/_table.scss index 170f98917e..bb68b7a7f1 100644 --- a/aio/src/styles/2-modules/_table.scss +++ b/aio/src/styles/2-modules/_table.scss @@ -109,7 +109,7 @@ table { } } -.events-container { +.page-events { tr > td, tr > th { width: 33%; }