treehouse
/
mastodon
22
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

Improve error page layouting. 500 page has to stay static because it's 

used from nginx when Rails fails.
lolsob-rspec
Eugen Rochko 2017-01-21 22:30:47 +01:00
parent 280348f1e0
commit 2c29cc400e
9 changed files with 54 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/controllers/application_controller.rb
View File

@ -51,21 +51,21 @@ class ApplicationController < ActionController::Base
def not_found
respond_to do |format|
format.any { head 404 }
format.html { render "errors/404" }
format.html { render 'errors/404', layout: 'error' }
end
end
def gone
respond_to do |format|
format.any { head 410 }
format.html { render "errors/410" }
format.html { render 'errors/410', layout: 'error' }
end
end
def unprocessable_entity
respond_to do |format|
format.any { head 422 }
format.html { render "errors/422" }
format.html { render 'errors/422', layout: 'error' }
end
end

43
app/views/errors/404.html
View File

@ -1,43 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The page you were looking for doesn't exist</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto:400" rel="stylesheet">
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #282c37;
color: #9baec8;
text-align: center;
margin: 0;
padding: 20px;
}
.dialog img {
display: block;
margin: 20px auto;
margin-top: 50px;
max-width: 600px;
width: 100%;
height: auto;
}
.dialog h1 {
font: 20px/28px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-weight: 400;
}
</style>
</head>
<body>
<div class="dialog">
<img src="/oops.png" alt="Mastodon" />
<div>
<h1>The page you were looking for doesn't exist</h1>
</div>
</div>
</body>
</html>

5
app/views/errors/404.html.haml Normal file
View File

@ -0,0 +1,5 @@
- content_for :page_title do
The page you were looking for doesn't exist
- content_for :content do
The page you were looking for doesn't exist

43
app/views/errors/410.html
View File

@ -1,43 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The page you were looking for doesn't exist anymore</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto:400" rel="stylesheet">
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #282c37;
color: #9baec8;
text-align: center;
margin: 0;
padding: 20px;
}
.dialog img {
display: block;
margin: 20px auto;
margin-top: 50px;
max-width: 600px;
width: 100%;
height: auto;
}
.dialog h1 {
font: 20px/28px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-weight: 400;
}
</style>
</head>
<body>
<div class="dialog">
<img src="/oops.png" alt="Mastodon" />
<div>
<h1>The page you were looking for doesn't exist anymore</h1>
</div>
</div>
</body>
</html>

5
app/views/errors/410.html.haml Normal file
View File

@ -0,0 +1,5 @@
- content_for :page_title do
The page you were looking for doesn't exist anymore
- content_for :content do
The page you were looking for doesn't exist anymore

43
app/views/errors/422.html
View File

@ -1,43 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Security verification failed - are you blocking cookies?</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto:400" rel="stylesheet">
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #282c37;
color: #9baec8;
text-align: center;
margin: 0;
padding: 20px;
}
.dialog img {
display: block;
margin: 20px auto;
margin-top: 50px;
max-width: 600px;
width: 100%;
height: auto;
}
.dialog h1 {
font: 20px/28px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-weight: 400;
}
</style>
</head>
<body>
<div class="dialog">
<img src="/oops.png" alt="Mastodon" />
<div>
<h1>We're sorry, but we were unable to verify your request. Have you tried enabling cookies?</h1>
</div>
</div>
</body>
</html>

5
app/views/errors/422.html.haml Normal file
View File

@ -0,0 +1,5 @@
- content_for :page_title do
Security verification failed
- content_for :content do
Security verification failed. Are you blocking cookies?

36
app/views/layouts/error.html.haml Normal file
View File

@ -0,0 +1,36 @@
!!!
%html{:lang => "en"}
%head
%meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
%meta{:charset => "utf-8"}/
%title= yield :page_title
%meta{:content => "width=device-width,initial-scale=1", :name => "viewport"}/
%link{:href => "https://fonts.googleapis.com/css?family=Roboto:400", :rel => "stylesheet"}/
:css
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #282c37;
color: #9baec8;
text-align: center;
margin: 0;
padding: 20px;
}
.dialog img {
display: block;
margin: 20px auto;
margin-top: 50px;
max-width: 600px;
width: 100%;
height: auto;
}
.dialog h1 {
font: 20px/28px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-weight: 400;
}
%body
.dialog
%img{:alt => "Mastodon", :src => "/oops.png"}/
%div
%h1= yield :content

0
app/views/errors/500.html → public/500.html
View File