Commit body!

Deployed adev-preview for ccecd71 to: https://ng-dev-previews-fw--pr-angular-angular-58831-adev-prev-klmq8unx.web.app

Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt.

The compiler unlike locally didn't replace the :host with its convenient attr ..... instead emited it as the native host selector in :host{ &.docs-with-TOC{}} .... I will change that to use another way to target the host element

Could you mention the dedicated issue in your commit : #52648
Thank you.

The compiler unlike locally didn't replace the :host with its convenient attr ..... instead emited it as the native host selector in :host{ &.docs-with-TOC{}} .... I will change that to use another way to target the host element

That's my bad, didn't notice that the deployed code has ViewEncapsulation:none! 

Anyway, I have used another way to target the element.

Also, I have added some enhancements to the global layout, and will push it shortly.

Could you mention the dedicated issue in your commit : #52648 Thank you.

Sure : ) ....Didn't even know there's a dedicated issue already for this =D ... nice ❤️

I'll remove the cli ref and api ref components' changes..... since it's pointless after merging this one #58610

I've integrated with the new design of API pages ... I guess we're ready now : ) .... what do you think ?

I have to say, I am a bit torn. I work on a wide screen and the new layout is a bit extreme at times:

https://ng-dev-previews-fw--pr-angular-angular-58831-adev-prev-by29p6vr.web.app/guide/templates/ng-template

Reading such paragraphs is difficult in a focused way.

This is also mentioned in: #52648 (comment)

However of course the current layout is also extreme in the other way, so I wonder if there is a middle ground - and perhaps moving the text more in the middle as mentioned. But I am not a UX person.

I have to say, I am a bit torn. I work on a wide screen and the new layout is a bit extreme at times:

https://ng-dev-previews-fw--pr-angular-angular-58831-adev-prev-by29p6vr.web.app/guide/templates/ng-template

Reading such paragraphs is difficult in a focused way.

This is also mentioned in: #52648 (comment)

However of course the current layout is also extreme in the other way, so I wonder if there is a middle ground - and perhaps moving the text more in the middle as mentioned. But I am not a UX person.

Yeah it needs a better way especially in pages that has no aside table of contents menu .... I believe it'd be better in large sizes if we put the content in the center of the page while having a fixed max-width like angular.io

And at the same time keeping pages that doesn't have articles inside it with the full width like: api list overview ... cli list ... tutorials overview

@thesmiler it's fixed now .... @JeanMeche @alxhub please let me know if you have any comments

For large screens:

for laptops:

@Ahmed-Hakeem Can you take a look and resolve these conflicts for us?

Hey Ahmed, I just reviewed again and agree - this looks good on both a laptop and on a very wide desktop screen now! Thanks so much for this contribution!

Just one question - Now when scaling the window to become wider, the transition is a bit weird as the content first becomes wider and wider and then suddenly gets narrower again when it moves to a fixed width. Is there a reason for this, that the widest non-fixed width is wider than the fixed one?

I'd say let's merge this one for now and improve incrementaly !

Thoughts @thesmiler & @hawkgs ?

Sure, I am for merging this. I like the idea!

However, I noticed that the API reference pages are still on the left hand side of the screen. Is this intentional? I think we should update them as well.

I like it too

This PR was merged into the repository by commit 108043f.

The changes were merged into the following branches: main, 19.2.x, 20.0.x

Hey everyone @JeanMeche @thePunderWoman @hawkgs @thesmiler @alxhub

really my apologies everyone, I just had a major release in the comp + my working as FE instructor so I hadn't even had the chance to check Github acc ....

Thank you for your suggestion @JeanMeche ❤️ .... I'll work on this one and open a PR to make it consistent and ensure no issues with it ..... cuz I could see a lot has changed which made the new layout I've made need to be reviewed to integrate it correctly with the new work

Thank you so much for your understanding ❤️

Yeah, we can incrementally improve our docs. Thanks for helping us with this !

Hey Ahmed, I just reviewed again and agree - this looks good on both a laptop and on a very wide desktop screen now! Thanks so much for this contribution!

Just one question - Now when scaling the window to become wider, the transition is a bit weird as the content first becomes wider and wider and then suddenly gets narrower again when it moves to a fixed width. Is there a reason for this, that the widest non-fixed width is wider than the fixed one?

Hi @thesmiler ..... thank you so much for your lovely words ❤️

I got your point ....what's happening is
-we are making the layout of the main content flexible (its width scale up to take the full available width ) until we reach a specific window size
-when we reach this size scaling up the main content will be messy (will be like a long lines of text ) ..... so I've made it with a specific fixed width (80ch)

so we have two solutions to this one
1- let the content scales up until that fixed size (so it will gets bigger and bigger but not bigger than this fixed size = (80ch ~= 808px))

2- let the content scales up until that fixed size as well but increase the fixed size to be (~=1070px) the same as the size before breaking to smaller fixed size

Yeah, we can incrementally improve our docs. Thanks for helping us with this !

It's my pleasure 😊 ❤️ .... Thank you

I believe now it's well integrated and has no UI issues

please check this PR: #61256