honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
This commit is contained in:
George Kalpakas 2021-03-09 14:15:47 +02:00 committed by Andrew Kushnir
parent 8365bc8946
commit 4907d644bb
10 changed files with 101 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
aio/content/marketing/contribute.html
View File

@ -2,7 +2,7 @@
<h1 class="banner-headline no-toc no-anchor">Contribute to Angular</h1>
</header>
<article class="contribute-container flex-center">
<article class="contribute-container center-layout">
<div>
<h2 class="no-anchor">Angular Projects</h2>

2
aio/content/marketing/events.html
View File

@ -2,6 +2,6 @@
<h1 class="banner-headline no-toc no-anchor">Events</h1>
</header>
<article class="events-container">
<article class="center-layout">
<aio-events></aio-events>
</article>

174
aio/content/marketing/features.html
View File

@ -2,107 +2,103 @@
<h1 class="banner-headline no-toc no-anchor">Features & Benefits</h1>
</header>
<article>
<div class="flex-center">
<div>
<div class="feature-section">
<div class="feature-header">
<div class="text-headline">Cross Platform</div>
<img src="generated/images/marketing/features/feature-icon.svg" height="70px" alt="">
</div>
<div class="feature-row">
<article class="center-layout">
<div class="feature-section">
<div class="feature-header">
<div class="text-headline">Cross Platform</div>
<img src="generated/images/marketing/features/feature-icon.svg" height="70px" alt="">
</div>
<div class="feature-row">
<div class="feature">
<div class="feature-title">Progressive Web Apps</div>
<p class="text-body">Use modern web platform capabilities to deliver app-like experiences.
High performance, offline, and zero-step installation.</p>
</div>
<div class="feature">
<div class="feature-title">Native</div>
<p class="text-body">Build native mobile apps with strategies from Cordova, Ionic, or NativeScript.</p>
</div>
<div class="feature">
<div class="feature-title">Desktop</div>
<p class="text-body">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.</p>
</div>
</div>
<hr>
<div class="feature">
<div class="feature-title">Progressive Web Apps</div>
<p class="text-body">Use modern web platform capabilities to deliver app-like experiences.
High performance, offline, and zero-step installation.</p>
</div>
<div class="feature-section">
<div class="feature-header">
<div class="text-headline">Speed and Performance</div>
<img src="generated/images/marketing/features/feature-icon.svg" height="70px" alt="">
</div>
<div class="feature-row">
<div class="feature">
<div class="feature-title">Code Generation</div>
<p class="text-body">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.</p>
</div>
<div class="feature">
<div class="feature-title">Universal</div>
<p class="text-body">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.</p>
</div>
<div class="feature">
<div class="feature-title">Code Splitting</div>
<p class="text-body">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.</p>
</div>
</div>
<hr>
<div class="feature">
<div class="feature-title">Native</div>
<p class="text-body">Build native mobile apps with strategies from Cordova, Ionic, or NativeScript.</p>
</div>
<div class="feature-section">
<div class="feature-header">
<div class="text-headline">Productivity</div>
<img src="generated/images/marketing/features/feature-icon.svg" height="70px" alt="">
</div>
<div class="feature-row">
<div class="feature">
<div class="feature-title">Desktop</div>
<p class="text-body">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.</p>
</div>
</div>
<hr>
</div>
<div class="feature">
<div class="feature-title">Templates</div>
<p class="text-body">Quickly create UI views with simple and powerful template syntax.</p>
</div>
<div class="feature-section">
<div class="feature-header">
<div class="text-headline">Speed and Performance</div>
<img src="generated/images/marketing/features/feature-icon.svg" height="70px" alt="">
</div>
<div class="feature-row">
<div class="feature">
<div class="feature-title">Angular CLI</div>
<p class="text-body">Command line tools: start building fast, add components and tests, then instantly deploy.</p>
</div>
<div class="feature">
<div class="feature-title">IDEs</div>
<p class="text-body">Get intelligent code completion, instant errors, and other feedback in popular editors and IDEs.</p>
</div>
</div>
<hr>
<div class="feature">
<div class="feature-title">Code Generation</div>
<p class="text-body">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.</p>
</div>
<div class="feature-section">
<div class="feature-header">
<div class="text-headline">Full Development Story</div>
<img src="generated/images/marketing/features/feature-icon.svg" height="70px" alt="">
</div>
<div class="feature-row">
<div class="feature">
<div class="feature-title">Universal</div>
<p class="text-body">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.</p>
</div>
<div class="feature">
<div class="feature-title">Testing</div>
<p class="text-body">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.</p>
</div>
<div class="feature">
<div class="feature-title">Code Splitting</div>
<p class="text-body">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.</p>
</div>
</div>
<hr>
</div>
<div class="feature">
<div class="feature-title">Animation</div>
<p class="text-body">Create high-performance, complex choreographies and animation timelines with very little code through Angular's intuitive API.</p>
</div>
<div class="feature-section">
<div class="feature-header">
<div class="text-headline">Productivity</div>
<img src="generated/images/marketing/features/feature-icon.svg" height="70px" alt="">
</div>
<div class="feature-row">
<div class="feature">
<div class="feature-title">Accessibility</div>
<p class="text-body">Create accessible applications with ARIA-enabled components, developer guides, and built-in a11y test infrastructure.</p>
</div>
</div>
<div class="feature">
<div class="feature-title">Templates</div>
<p class="text-body">Quickly create UI views with simple and powerful template syntax.</p>
</div>
<div class="feature">
<div class="feature-title">Angular CLI</div>
<p class="text-body">Command line tools: start building fast, add components and tests, then instantly deploy.</p>
</div>
<div class="feature">
<div class="feature-title">IDEs</div>
<p class="text-body">Get intelligent code completion, instant errors, and other feedback in popular editors and IDEs.</p>
</div>
</div>
<hr>
</div>
<div class="feature-section">
<div class="feature-header">
<div class="text-headline">Full Development Story</div>
<img src="generated/images/marketing/features/feature-icon.svg" height="70px" alt="">
</div>
<div class="feature-row">
<div class="feature">
<div class="feature-title">Testing</div>
<p class="text-body">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.</p>
</div>
<div class="feature">
<div class="feature-title">Animation</div>
<p class="text-body">Create high-performance, complex choreographies and animation timelines with very little code through Angular's intuitive API.</p>
</div>
<div class="feature">
<div class="feature-title">Accessibility</div>
<p class="text-body">Create accessible applications with ARIA-enabled components, developer guides, and built-in a11y test infrastructure.</p>
</div>
</div>
</div>

24
aio/src/app/custom-elements/resource/resource-list.component.html
View File

@ -1,4 +1,4 @@
<div>
<div class="center-layout">
<div class="flex-center group-buttons">
<a *ngFor="let category of categories"
[class.selected]="category.id == selectedCategory.id"
@ -6,19 +6,17 @@
(click)="selectCategory(category.id)"
(keyup.enter)="selectCategory(category.id)">{{category.title}}</a>
</div>
<div class="resources-container">
<div class="showcase">
<div *ngFor="let subCategory of selectedCategory?.subCategories">
<a id="{{subCategory.id}}"></a>
<h3 class="subcategory-title">{{subCategory.title}}</h3>
<div class="showcase">
<div *ngFor="let subCategory of selectedCategory?.subCategories">
<a id="{{subCategory.id}}"></a>
<h3 class="subcategory-title">{{subCategory.title}}</h3>
<div *ngFor="let resource of subCategory.resources">
<div class="resource-item">
<a class="resource-row-link" rel="noopener" target="_blank" [href]="resource.url">
<h4>{{resource.title}}</h4>
<p class="resource-description">{{resource.desc || 'No Description'}}</p>
</a>
</div>
<div *ngFor="let resource of subCategory.resources">
<div class="resource-item">
<a class="resource-row-link" rel="noopener" target="_blank" [href]="resource.url">
<h4>{{resource.title}}</h4>
<p class="resource-description">{{resource.desc || 'No Description'}}</p>
</a>
</div>
</div>
</div>

2
aio/src/styles/1-layouts/_layout-global.scss
View File

@ -9,7 +9,7 @@ body,
.center-layout {
margin: 0 auto;
max-width: 50em;
max-width: 62.5em;
}
.github-links + .content h1 {

4
aio/src/styles/1-layouts/_marketing-layout.scss
View File

@ -402,7 +402,3 @@ div[layout=row]{
margin-bottom: 20px;
}
}
.events-container{
overflow-x: auto;
}

1
aio/src/styles/2-modules/_contribute.scss
View File

@ -5,7 +5,6 @@
.card-section {
justify-content: space-between;
max-width: 880px;
@media (max-width: 600px) {
flex-direction: column;

2
aio/src/styles/2-modules/_features.scss
View File

@ -24,7 +24,7 @@
flex-wrap: wrap;
justify-content: space-evenly;
@media (max-width: 600px) {
@media (max-width: 768px) {
flex-direction: column;
}

7
aio/src/styles/2-modules/_resources.scss
View File

@ -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;

2
aio/src/styles/2-modules/_table.scss
View File

@ -109,7 +109,7 @@ table {
}
}
.events-container {
.page-events {
tr > td, tr > th {
width: 33%;
}