Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[IMPROVE] UI of page not found #13757

Merged
merged 20 commits into from Apr 2, 2019
Merged

[IMPROVE] UI of page not found #13757

merged 20 commits into from Apr 2, 2019

Conversation

fliptrail
Copy link
Contributor

@fliptrail fliptrail commented Mar 17, 2019 •
edited

Closes #13756
Drastically improves the UI of 404 pageNotFound.html

Initial State

imported

Final Status

Screenshot from 2019-03-20 00-01-26

@sampaiodiego
Copy link
Member

@thiagosanchz do we have a design for a 404 page? what do you think about this one?

@engelgabriel engelgabriel added this to the 1.0.0 milestone Mar 18, 2019
@engelgabriel
Copy link
Member

@thiagosanchz can you provide the design here?

@wreiske
Copy link
Contributor

wreiske commented Mar 18, 2019

Often times I find myself in a 404 on the electron client, and after restarting the client, there is no way to go back. Maybe add a home button that goes to the main route?

@fliptrail
Copy link
Contributor Author

If you already have a design on paper, then I can try to replicate it on.

@ggazzo ggazzo requested a review from tassoevan March 18, 2019 13:52
@wreiske
Copy link
Contributor

wreiske commented Mar 18, 2019

Maybe model it more after https://rocket.chat/404 ?

image

@engelgabriel
Copy link
Member

@MartinSchoeler do you have the SVG version of the image from https://rocket.chat/404 ?

@wreiske
Copy link
Contributor

wreiske commented Mar 18, 2019 •
edited

JPG:
https://github.com/RocketChat/Rocket.Chat.Electron/blob/develop/src/public/images/not-found.jpg
https://github.com/RocketChat/rocketchat.github.io/blob/master/images/support/hero.jpg

SVG:
hero.svg.zip

@brunosquadros
Copy link
Contributor

Guys, please, use this SVG to 404 pages. Thanks!
404.svg.zip

@fliptrail
Copy link
Contributor Author

Final State

Screenshot from 2019-03-19 04-33-15

@wreiske
Copy link
Contributor

wreiske commented Mar 19, 2019 •
edited

Can we also add a "Go Back" button maybe under the text, or on the top left? (if in the electron client)

From https://stackoverflow.com/questions/3588315/how-to-check-if-the-user-can-go-back-in-browser-history-or-not :

function historyBackWFallback(fallbackUrl) {
    fallbackUrl = fallbackUrl || '/';
    var prevPage = window.location.href;

    window.history.go(-1);

    setTimeout(function(){ 
        if (window.location.href == prevPage) {
            window.location.href = fallbackUrl; 
        }
    }, 500);
}

@fliptrail
Copy link
Contributor Author

@wreiske Will add this...

@fliptrail
Copy link
Contributor Author

Final Status
Screenshot from 2019-03-20 00-01-26

@engelgabriel Please review.

@geekgonecrazy
Copy link
Member

geekgonecrazy commented Mar 28, 2019 •
edited

Wow this is 1000x better. 😍

This would be a fantastic bit of polish to 1.0 ;)

tassoevan
tassoevan reviewed Mar 29, 2019
View reviewed changes
client/routes/pageNotFound.html Outdated
<h3>{{_ "Oops_page_not_found"}}</h3>
<p>{{_ "Sorry_page_you_requested_does_not_exists_or_was_deleted"}}</p>
<section class = "page-not-found-container content-background-color">
<span class = "error-404">{{errorcode}}</span>
Copy link
Contributor

Choose a reason for hiding this comment

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

I don't think you need a helper here. Since the template's name is pageNotFound, it will be only applied for HTTP 404 cases.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes, you are right...I did not overlook that

client/routes/pageNotFound.js Outdated
errorcode() {
return '404';
},
});
Copy link
Contributor

Choose a reason for hiding this comment

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

I don't think you need a helper here. Since the template's name is pageNotFound, it will be only applied for HTTP 404 cases.

@tassoevan
Copy link
Contributor

LGTM @ggazzo

sampaiodiego
sampaiodiego reviewed Apr 2, 2019
View reviewed changes
client/routes/pageNotFound.js Outdated
Template.pageNotFound.events({
'click .page-not-found-button-home'(e) {
e.preventDefault();
window.location.href = '/';
Copy link
Member

Choose a reason for hiding this comment

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

This should be done using FlowRouter. I'm submitting a fix though

@sampaiodiego sampaiodiego changed the title [IMPROVE] UI of 404 pageNotFound.html [IMPROVE] UI of page not found Apr 2, 2019
@sampaiodiego sampaiodiego merged commit 6403849 into RocketChat:develop Apr 2, 2019
@rodrigok rodrigok mentioned this pull request Apr 28, 2019
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@tassoevan tassoevan tassoevan left review comments

@sampaiodiego sampaiodiego sampaiodiego approved these changes

Assignees

@thiagosanchz thiagosanchz

Labels
ui/ux
Projects
None yet
Milestone
1.0.0
Development

Successfully merging this pull request may close these issues.

The text in 404 page is unreadable
8 participants
@fliptrail @sampaiodiego @engelgabriel @wreiske @brunosquadros @geekgonecrazy @tassoevan @thiagosanchz