Skip to content

[IMPROVE] UI of page not found#13757

Merged
sampaiodiego merged 20 commits intoRocketChat:developfrom
fliptrail:404-fix
Apr 2, 2019
Merged

[IMPROVE] UI of page not found#13757
sampaiodiego merged 20 commits intoRocketChat:developfrom
fliptrail:404-fix

Conversation

@fliptrail
Copy link
Contributor

@fliptrail fliptrail commented Mar 17, 2019 •
edited
Loading

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

sampaiodiego commented Mar 18, 2019

@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

engelgabriel commented Mar 18, 2019

@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

fliptrail commented Mar 18, 2019

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

engelgabriel commented Mar 18, 2019

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

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

brunosquadros commented Mar 18, 2019

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

@fliptrail
Copy link
Contributor Author

fliptrail commented Mar 18, 2019

Final State

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

@wreiske
Copy link
Contributor

wreiske commented Mar 19, 2019 •
edited
Loading

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

fliptrail commented Mar 19, 2019

@wreiske Will add this...

@fliptrail
Copy link
Contributor Author

fliptrail commented Mar 19, 2019

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

@engelgabriel Please review.

@engelgabriel engelgabriel added the area: ui Touches the code on client side label Mar 20, 2019
@geekgonecrazy
Copy link
Contributor

geekgonecrazy commented Mar 28, 2019 •
edited
Loading

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

@tassoevan tassoevan Mar 29, 2019

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

@fliptrail fliptrail Mar 30, 2019

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

@tassoevan tassoevan Mar 29, 2019

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

tassoevan commented Mar 29, 2019

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

@sampaiodiego sampaiodiego Apr 2, 2019

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

area: ui Touches the code on client side

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

Comments