Skip to content

feat(aio): 404 page#16089

Closed
sjtrimble wants to merge 2 commits intoangular:masterfrom
sjtrimble:404-page
Closed

feat(aio): 404 page#16089
sjtrimble wants to merge 2 commits intoangular:masterfrom
sjtrimble:404-page

Conversation

@sjtrimble
Copy link
Copy Markdown
Contributor

@sjtrimble sjtrimble commented Apr 18, 2017

404 page styling with graphic. Builds off of #16085 lands.

Please check if the PR fulfills these requirements

What kind of change does this PR introduce? (check one with "x")

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Other... Please describe:

@mary-poppins
Copy link
Copy Markdown

The angular.io preview for 8d2c043698d07c1cb9d4a5268bac40a261f00dce is available here.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

so this will change to #file-not-found

@mary-poppins
Copy link
Copy Markdown

The angular.io preview for c130c3374927f9e37e19d63b38dc66adde85343b is available here.

@sjtrimble
Copy link
Copy Markdown
Contributor Author

Thanks @petebacondarwin :) I changed it

@sjtrimble sjtrimble changed the title WIP feat(aio): 404 page feat(aio): 404 page Apr 18, 2017
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

width and height attributes hold the "intrinsic width/height of the image in pixels". You only need to specify the numeric value (the rest is ignored).

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

also there should be no extra commas in the value strings.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Having a title here, adds an h1 heading to the page that doesn't look inline with the rest of the design.
(Not sure what the correct solution is for such cases.)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The problem here is that Pete will report it as an error (which a missing title would be normally).
A solution would be to style that <h1> so it disappears.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about we allow an empty @title tag, which indicates that we explicitly do not want a heading?

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

SGTM 😃

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

won't that be error-prone? how about we allowed @title VOID instead?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is not that error prone because it is very unlikely that someone would add a @title tag and forget to add a title.

The support for this landed a few hours ago.

I just realised though that this might not be necessary. If no title is provided via @title then the content is searched for the first h1 element.

So if @sjtrimble changes the file so that <h2>Page Not Found</h2> becomes <h1>Page Not Found</h1> then we can ditch the @title and @description tags from the file altogether.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wouldn't that render the title (which is exactly what we are trying to prevent)?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As I understand it, we do want a heading (there is already a h2 there) but not at the top of the page. The thing about adding a title via the @title tag is that it automatically adds a h1 at the top of the page.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, I see. Then, I agree this could be solved by removing the @title and changing the h2 to h1 (and styling it appropriately).

Copy link
Copy Markdown
Contributor

@wardbell wardbell left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM after you fix the title <h1> problem

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The problem here is that Pete will report it as an error (which a missing title would be normally).
A solution would be to style that <h1> so it disappears.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As we discussed, a lighter weight alternative is an MD icon such as seen in the network fail page PR #16139.

I would merge this now and wait to change it a later PR.

@wardbell wardbell added the action: cleanup The PR is in need of cleanup, either due to needing a rebase or in response to comments from reviews label Apr 19, 2017
@IgorMinar
Copy link
Copy Markdown
Contributor

I suggest we remove the h1 heading and the vertical bar under it. And instead of 404 turn the logo into a sad face. That way we can use it elsewhere and we don't have the issue with 0 being visually split into two by the logo which looks "disturbing".

screen shot 2017-04-19 at 4 44 53 pm

@sjtrimble
Copy link
Copy Markdown
Contributor Author

@IgorMinar This builds on top of Pete's PR which has a specific section ID that I use to override the h1 all together so it's hidden.

I can make a sad face instead :)

@sjtrimble sjtrimble force-pushed the 404-page branch 2 times, most recently from 5bfa352 to b2999f6 Compare April 19, 2017 18:41
@sjtrimble
Copy link
Copy Markdown
Contributor Author

I have made the changes - new icon, no @title on the .md, and custom h1 styling.

@mary-poppins
Copy link
Copy Markdown

The angular.io preview for 5bfa352c6427bf9735101cf389c9591b2628fac0 is available here.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can remove this @description as well :-)

@mary-poppins
Copy link
Copy Markdown

The angular.io preview for b2999f624387f3fb764e753f6c0e624125d57c94 is available here.

Copy link
Copy Markdown
Contributor

@petebacondarwin petebacondarwin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM - let's merge it and iterate on the fine tuning of the design if necessary.

@petebacondarwin petebacondarwin added action: merge The PR is ready for merge by the caretaker and removed action: cleanup The PR is in need of cleanup, either due to needing a rebase or in response to comments from reviews labels Apr 19, 2017
Add 404 svg image
h1 custom styling
@mary-poppins
Copy link
Copy Markdown

The angular.io preview for 114fa3c is available here.

mhevery pushed a commit that referenced this pull request Apr 20, 2017
@mhevery mhevery closed this in 9f66c9c Apr 20, 2017
asnowwolf pushed a commit to asnowwolf/angular that referenced this pull request Aug 11, 2017
asnowwolf pushed a commit to asnowwolf/angular that referenced this pull request Aug 11, 2017
juleskremer pushed a commit to juleskremer/angular that referenced this pull request Aug 28, 2017
juleskremer pushed a commit to juleskremer/angular that referenced this pull request Aug 28, 2017
@angular-automatic-lock-bot
Copy link
Copy Markdown

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 11, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

action: merge The PR is ready for merge by the caretaker cla: yes

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants