Skip to content

Commit 4b9ed95

Browse files
authored
Tidy up the error pages (rails#53045)
* Update error pages * Update actionmailbox error pages * Update actiontext error pages * Update activestorage error pages
1 parent f4cf0dc commit 4b9ed95

File tree

17 files changed

+1921
-1117
lines changed

17 files changed

+1921
-1117
lines changed
Lines changed: 113 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,114 @@
1-
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<title>The server cannot process the request due to a client error (400)</title>
5-
<meta name="viewport" content="width=device-width,initial-scale=1">
6-
<style>
7-
.rails-default-error-page {
8-
background-color: #EFEFEF;
9-
color: #2E2F30;
10-
text-align: center;
11-
font-family: arial, sans-serif;
12-
margin: 0;
13-
}
14-
15-
.rails-default-error-page div.dialog {
16-
width: 95%;
17-
max-width: 33em;
18-
margin: 4em auto 0;
19-
}
20-
21-
.rails-default-error-page div.dialog > div {
22-
border: 1px solid #CCC;
23-
border-right-color: #999;
24-
border-left-color: #999;
25-
border-bottom-color: #BBB;
26-
border-top: #B00100 solid 4px;
27-
border-top-left-radius: 9px;
28-
border-top-right-radius: 9px;
29-
background-color: white;
30-
padding: 7px 12% 0;
31-
box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17);
32-
}
33-
34-
.rails-default-error-page h1 {
35-
font-size: 100%;
36-
color: #730E15;
37-
line-height: 1.5em;
38-
}
39-
40-
.rails-default-error-page div.dialog > p {
41-
margin: 0 0 1em;
42-
padding: 1em;
43-
background-color: #F7F7F7;
44-
border: 1px solid #CCC;
45-
border-right-color: #999;
46-
border-left-color: #999;
47-
border-bottom-color: #999;
48-
border-bottom-left-radius: 4px;
49-
border-bottom-right-radius: 4px;
50-
border-top-color: #DADADA;
51-
color: #666;
52-
box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17);
53-
}
54-
</style>
55-
</head>
56-
57-
<body class="rails-default-error-page">
58-
<!-- This file lives in public/400.html -->
59-
<div class="dialog">
60-
<div>
61-
<h1>The server cannot process the request due to a client error.</h1>
62-
<p>Please check the request and try again.</p>
63-
</div>
64-
<p>If you are the application owner check the logs for more information.</p>
65-
</div>
66-
</body>
1+
<!doctype html>
2+
3+
<html lang="en">
4+
5+
<head>
6+
7+
<title>The server cannot process the request due to a client error (400 Bad Request)</title>
8+
9+
<meta charset="utf-8">
10+
<meta name="viewport" content="initial-scale=1, width=device-width">
11+
<meta name="robots" content="noindex, nofollow">
12+
13+
<style>
14+
15+
*, *::before, *::after {
16+
box-sizing: border-box;
17+
}
18+
19+
* {
20+
margin: 0;
21+
}
22+
23+
html {
24+
font-size: 16px;
25+
}
26+
27+
body {
28+
background: #FFF;
29+
color: #261B23;
30+
display: grid;
31+
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Aptos, Roboto, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
32+
font-size: clamp(1rem, 2.5vw, 2rem);
33+
-webkit-font-smoothing: antialiased;
34+
font-style: normal;
35+
font-weight: 400;
36+
letter-spacing: -0.0025em;
37+
line-height: 1.4;
38+
min-height: 100vh;
39+
place-items: center;
40+
text-rendering: optimizeLegibility;
41+
-webkit-text-size-adjust: 100%;
42+
}
43+
44+
a {
45+
color: inherit;
46+
font-weight: 700;
47+
text-decoration: underline;
48+
text-underline-offset: 0.0925em;
49+
}
50+
51+
b, strong {
52+
font-weight: 700;
53+
}
54+
55+
i, em {
56+
font-style: italic;
57+
}
58+
59+
main {
60+
display: grid;
61+
gap: 1em;
62+
padding: 2em;
63+
place-items: center;
64+
text-align: center;
65+
}
66+
67+
main header {
68+
width: min(100%, 12em);
69+
}
70+
71+
main header svg {
72+
height: auto;
73+
max-width: 100%;
74+
width: 100%;
75+
}
76+
77+
main article {
78+
width: min(100%, 30em);
79+
}
80+
81+
main article p {
82+
font-size: 75%;
83+
}
84+
85+
main article br {
86+
87+
display: none;
88+
89+
@media(min-width: 48em) {
90+
display: inline;
91+
}
92+
93+
}
94+
95+
</style>
96+
97+
</head>
98+
99+
<body>
100+
101+
<!-- This file lives in public/400.html -->
102+
103+
<main>
104+
<header>
105+
<svg height="172" viewBox="0 0 480 172" width="480" xmlns="http://www.w3.org/2000/svg"><path d="m124.48 3.00509-45.6889 100.02991h26.2239v-28.1168h38.119v28.1168h21.628v35.145h-21.628v30.82h-37.308v-30.82h-72.1833v-31.901l50.2851-103.27391zm115.583 168.69891c-40.822 0-64.884-35.146-64.884-85.7015 0-50.5554 24.062-85.700907 64.884-85.700907 40.823 0 64.884 35.145507 64.884 85.700907 0 50.5555-24.061 85.7015-64.884 85.7015zm0-133.2831c-17.572 0-22.709 21.8984-22.709 47.5816 0 25.6835 5.137 47.5815 22.709 47.5815 17.303 0 22.71-21.898 22.71-47.5815 0-25.6832-5.407-47.5816-22.71-47.5816zm140.456 133.2831c-40.823 0-64.884-35.146-64.884-85.7015 0-50.5554 24.061-85.700907 64.884-85.700907 40.822 0 64.884 35.145507 64.884 85.700907 0 50.5555-24.062 85.7015-64.884 85.7015zm0-133.2831c-17.573 0-22.71 21.8984-22.71 47.5816 0 25.6835 5.137 47.5815 22.71 47.5815 17.302 0 22.709-21.898 22.709-47.5815 0-25.6832-5.407-47.5816-22.709-47.5816z" fill="#f0eff0"/><path d="m123.606 85.4445c3.212 1.0523 5.538 4.2089 5.538 8.0301 0 6.1472-4.209 9.5254-11.298 9.5254h-15.617v-34.0033h14.565c7.089 0 11.353 3.1566 11.353 9.2484 0 3.6551-2.049 6.3134-4.541 7.1994zm-12.904-2.9905h5.095c2.603 0 3.988-.9968 3.988-3.1013 0-2.1044-1.385-3.0459-3.988-3.0459h-5.095zm0 6.6456v6.5902h5.981c2.492 0 3.877-1.3291 3.877-3.2674 0-2.049-1.385-3.3228-3.877-3.3228zm43.786 13.9004h-8.362v-1.274c-.831.831-3.323 1.717-5.981 1.717-4.929 0-9.083-2.769-9.083-8.0301 0-4.818 4.154-7.9193 9.581-7.9193 2.049 0 4.486.6646 5.483 1.3845v-1.606c0-1.606-.942-2.9905-3.046-2.9905-1.606 0-2.548.7199-2.935 1.8275h-8.197c.72-4.8181 4.985-8.6393 11.409-8.6393 7.088 0 11.131 3.7659 11.131 10.2453zm-8.362-6.9779v-1.4399c-.554-1.0522-2.049-1.7167-3.655-1.7167-1.717 0-3.434.7199-3.434 2.3813 0 1.7168 1.717 2.4367 3.434 2.4367 1.606 0 3.101-.6645 3.655-1.6614zm27.996 6.9779v-1.994c-1.163 1.329-3.599 2.548-6.147 2.548-7.199 0-11.131-5.8151-11.131-13.0145s3.932-13.0143 11.131-13.0143c2.548 0 4.984 1.2184 6.147 2.5475v-13.0697h8.695v35.997zm0-9.1931v-6.5902c-.664-1.3291-2.159-2.326-3.821-2.326-2.99 0-4.763 2.4368-4.763 5.6488s1.773 5.5934 4.763 5.5934c1.717 0 3.157-.9415 3.821-2.326zm35.471-2.049h-3.101v11.2421h-8.806v-34.0033h15.285c7.31 0 12.35 4.1535 12.35 11.5744 0 5.1503-2.603 8.6947-6.757 10.2453l7.975 12.1836h-9.858zm-3.101-15.2849v8.1962h5.538c3.156 0 4.596-1.606 4.596-4.0981s-1.44-4.0981-4.596-4.0981zm36.957 17.8323h8.03c-.886 5.7597-5.206 9.2487-11.685 9.2487-7.643 0-12.682-5.2613-12.682-13.0145 0-7.6978 5.316-13.0143 12.515-13.0143 7.643 0 11.962 5.095 11.962 12.5159v2.1598h-16.115c.277 2.9905 1.827 4.5965 4.32 4.5965 1.772 0 3.156-.7753 3.655-2.4921zm-3.822-10.0237c-2.049 0-3.433 1.2737-3.987 3.5997h7.532c-.111-2.0491-1.385-3.5997-3.545-3.5997zm30.98 27.5234v-10.799c-1.163 1.329-3.6 2.548-6.147 2.548-7.2 0-11.132-5.9259-11.132-13.0145 0-7.144 3.932-13.0143 11.132-13.0143 2.547 0 4.984 1.2184 6.147 2.5475v-1.9937h8.695v33.726zm0-17.9981v-6.5902c-.665-1.3291-2.105-2.326-3.821-2.326-2.991 0-4.763 2.4368-4.763 5.6488s1.772 5.5934 4.763 5.5934c1.661 0 3.156-.9415 3.821-2.326zm36.789-15.7279v24.921h-8.695v-2.16c-1.329 1.551-3.821 2.714-6.646 2.714-5.482 0-8.75-3.5999-8.75-9.1379v-16.3371h8.64v14.288c0 2.1045.996 3.5997 3.212 3.5997 1.606 0 3.101-1.0522 3.544-2.769v-15.1187zm19.084 16.2263h8.03c-.886 5.7597-5.206 9.2487-11.685 9.2487-7.643 0-12.682-5.2613-12.682-13.0145 0-7.6978 5.316-13.0143 12.515-13.0143 7.643 0 11.963 5.095 11.963 12.5159v2.1598h-16.116c.277 2.9905 1.828 4.5965 4.32 4.5965 1.772 0 3.156-.7753 3.655-2.4921zm-3.822-10.0237c-2.049 0-3.433 1.2737-3.987 3.5997h7.532c-.111-2.0491-1.385-3.5997-3.545-3.5997zm13.428 11.0206h8.474c.387 1.3845 1.606 2.1598 3.156 2.1598 1.44 0 2.548-.5538 2.548-1.7168 0-.9414-.72-1.2737-1.939-1.5506l-4.873-.9969c-4.154-.886-6.867-2.8797-6.867-7.2547 0-5.3165 4.762-8.4178 10.633-8.4178 6.812 0 10.522 3.1567 11.297 8.0855h-8.03c-.277-1.0522-1.052-1.9937-3.046-1.9937-1.273 0-2.326.5538-2.326 1.6614 0 .7753.554 1.163 1.717 1.3845l4.929 1.163c4.541 1.0522 6.978 3.4335 6.978 7.4763 0 5.3168-4.818 8.2518-10.91 8.2518-6.369 0-10.965-2.88-11.741-8.2518zm27.538-.8861v-9.5807h-3.655v-6.7564h3.655v-6.8671h8.584v6.8671h5.205v6.7564h-5.205v8.307c0 1.9383.941 2.769 2.658 2.769.941 0 1.993-.2216 2.769-.5538v7.3654c-.997.443-2.88.775-4.818.775-5.871 0-9.193-2.769-9.193-9.0819z" fill="#d30001"/></svg>
106+
</header>
107+
<article>
108+
<p><strong>The server cannot process the request due to a client error.</strong> Please check the request and try again. If you’re the application owner check the logs for more information.</p>
109+
</article>
110+
</main>
111+
112+
</body>
113+
67114
</html>
Lines changed: 113 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,114 @@
1-
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<title>The page you were looking for doesn't exist (404)</title>
5-
<meta name="viewport" content="width=device-width,initial-scale=1">
6-
<style>
7-
.rails-default-error-page {
8-
background-color: #EFEFEF;
9-
color: #2E2F30;
10-
text-align: center;
11-
font-family: arial, sans-serif;
12-
margin: 0;
13-
}
14-
15-
.rails-default-error-page div.dialog {
16-
width: 95%;
17-
max-width: 33em;
18-
margin: 4em auto 0;
19-
}
20-
21-
.rails-default-error-page div.dialog > div {
22-
border: 1px solid #CCC;
23-
border-right-color: #999;
24-
border-left-color: #999;
25-
border-bottom-color: #BBB;
26-
border-top: #B00100 solid 4px;
27-
border-top-left-radius: 9px;
28-
border-top-right-radius: 9px;
29-
background-color: white;
30-
padding: 7px 12% 0;
31-
box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17);
32-
}
33-
34-
.rails-default-error-page h1 {
35-
font-size: 100%;
36-
color: #730E15;
37-
line-height: 1.5em;
38-
}
39-
40-
.rails-default-error-page div.dialog > p {
41-
margin: 0 0 1em;
42-
padding: 1em;
43-
background-color: #F7F7F7;
44-
border: 1px solid #CCC;
45-
border-right-color: #999;
46-
border-left-color: #999;
47-
border-bottom-color: #999;
48-
border-bottom-left-radius: 4px;
49-
border-bottom-right-radius: 4px;
50-
border-top-color: #DADADA;
51-
color: #666;
52-
box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17);
53-
}
54-
</style>
55-
</head>
56-
57-
<body class="rails-default-error-page">
58-
<!-- This file lives in public/404.html -->
59-
<div class="dialog">
60-
<div>
61-
<h1>The page you were looking for doesn't exist.</h1>
62-
<p>You may have mistyped the address or the page may have moved.</p>
63-
</div>
64-
<p>If you are the application owner check the logs for more information.</p>
65-
</div>
66-
</body>
1+
<!doctype html>
2+
3+
<html lang="en">
4+
5+
<head>
6+
7+
<title>The page you were looking for doesn’t exist (404 Not found)</title>
8+
9+
<meta charset="utf-8">
10+
<meta name="viewport" content="initial-scale=1, width=device-width">
11+
<meta name="robots" content="noindex, nofollow">
12+
13+
<style>
14+
15+
*, *::before, *::after {
16+
box-sizing: border-box;
17+
}
18+
19+
* {
20+
margin: 0;
21+
}
22+
23+
html {
24+
font-size: 16px;
25+
}
26+
27+
body {
28+
background: #FFF;
29+
color: #261B23;
30+
display: grid;
31+
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Aptos, Roboto, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
32+
font-size: clamp(1rem, 2.5vw, 2rem);
33+
-webkit-font-smoothing: antialiased;
34+
font-style: normal;
35+
font-weight: 400;
36+
letter-spacing: -0.0025em;
37+
line-height: 1.4;
38+
min-height: 100vh;
39+
place-items: center;
40+
text-rendering: optimizeLegibility;
41+
-webkit-text-size-adjust: 100%;
42+
}
43+
44+
a {
45+
color: inherit;
46+
font-weight: 700;
47+
text-decoration: underline;
48+
text-underline-offset: 0.0925em;
49+
}
50+
51+
b, strong {
52+
font-weight: 700;
53+
}
54+
55+
i, em {
56+
font-style: italic;
57+
}
58+
59+
main {
60+
display: grid;
61+
gap: 1em;
62+
padding: 2em;
63+
place-items: center;
64+
text-align: center;
65+
}
66+
67+
main header {
68+
width: min(100%, 12em);
69+
}
70+
71+
main header svg {
72+
height: auto;
73+
max-width: 100%;
74+
width: 100%;
75+
}
76+
77+
main article {
78+
width: min(100%, 30em);
79+
}
80+
81+
main article p {
82+
font-size: 75%;
83+
}
84+
85+
main article br {
86+
87+
display: none;
88+
89+
@media(min-width: 48em) {
90+
display: inline;
91+
}
92+
93+
}
94+
95+
</style>
96+
97+
</head>
98+
99+
<body>
100+
101+
<!-- This file lives in public/404.html -->
102+
103+
<main>
104+
<header>
105+
<svg height="172" viewBox="0 0 480 172" width="480" xmlns="http://www.w3.org/2000/svg"><path d="m124.48 3.00509-45.6889 100.02991h26.2239v-28.1168h38.119v28.1168h21.628v35.145h-21.628v30.82h-37.308v-30.82h-72.1833v-31.901l50.2851-103.27391zm115.583 168.69891c-40.822 0-64.884-35.146-64.884-85.7015 0-50.5554 24.062-85.700907 64.884-85.700907 40.823 0 64.884 35.145507 64.884 85.700907 0 50.5555-24.061 85.7015-64.884 85.7015zm0-133.2831c-17.572 0-22.709 21.8984-22.709 47.5816 0 25.6835 5.137 47.5815 22.709 47.5815 17.303 0 22.71-21.898 22.71-47.5815 0-25.6832-5.407-47.5816-22.71-47.5816zm165.328-35.41581-45.689 100.02991h26.224v-28.1168h38.119v28.1168h21.628v35.145h-21.628v30.82h-37.308v-30.82h-72.184v-31.901l50.285-103.27391z" fill="#f0eff0"/><path d="m157.758 68.9967v34.0033h-7.199l-14.233-19.8814v19.8814h-8.584v-34.0033h8.307l13.125 18.7184v-18.7184zm28.454 21.5428c0 7.6978-5.15 13.0145-12.737 13.0145-7.532 0-12.738-5.3167-12.738-13.0145s5.206-13.0143 12.738-13.0143c7.587 0 12.737 5.3165 12.737 13.0143zm-8.528 0c0-3.4336-1.496-5.8703-4.209-5.8703-2.659 0-4.154 2.4367-4.154 5.8703s1.495 5.8149 4.154 5.8149c2.713 0 4.209-2.3813 4.209-5.8149zm13.184 3.8766v-9.5807h-3.655v-6.7564h3.655v-6.8671h8.584v6.8671h5.205v6.7564h-5.205v8.307c0 1.9383.941 2.769 2.658 2.769.941 0 1.994-.2216 2.769-.5538v7.3654c-.997.443-2.88.775-4.818.775-5.87 0-9.193-2.769-9.193-9.0819zm37.027 8.5839h-8.806v-34.0033h23.924v7.6978h-15.118v6.7564h13.9v7.5316h-13.9zm41.876-12.4605c0 7.6978-5.15 13.0145-12.737 13.0145-7.532 0-12.738-5.3167-12.738-13.0145s5.206-13.0143 12.738-13.0143c7.587 0 12.737 5.3165 12.737 13.0143zm-8.529 0c0-3.4336-1.495-5.8703-4.208-5.8703-2.659 0-4.154 2.4367-4.154 5.8703s1.495 5.8149 4.154 5.8149c2.713 0 4.208-2.3813 4.208-5.8149zm35.337-12.4605v24.921h-8.695v-2.16c-1.329 1.551-3.821 2.714-6.646 2.714-5.482 0-8.75-3.5999-8.75-9.1379v-16.3371h8.64v14.288c0 2.1045.997 3.5997 3.212 3.5997 1.606 0 3.101-1.0522 3.544-2.769v-15.1187zm4.076 24.921v-24.921h8.694v2.1598c1.385-1.5506 3.822-2.7136 6.701-2.7136 5.538 0 8.806 3.5997 8.806 9.1377v16.3371h-8.639v-14.2327c0-2.049-1.053-3.5443-3.268-3.5443-1.717 0-3.156.9969-3.6 2.7136v15.0634zm44.113 0v-1.994c-1.163 1.329-3.6 2.548-6.147 2.548-7.2 0-11.132-5.8151-11.132-13.0145s3.932-13.0143 11.132-13.0143c2.547 0 4.984 1.2184 6.147 2.5475v-13.0697h8.695v35.997zm0-9.1931v-6.5902c-.665-1.3291-2.16-2.326-3.821-2.326-2.991 0-4.763 2.4368-4.763 5.6488s1.772 5.5934 4.763 5.5934c1.717 0 3.156-.9415 3.821-2.326z" fill="#d30001"/></svg>
106+
</header>
107+
<article>
108+
<p><strong>The page you were looking for doesn’t exist.</strong> You may have mistyped the address or the page may have moved. If you’re the application owner check the logs for more information.</p>
109+
</article>
110+
</main>
111+
112+
</body>
113+
67114
</html>

0 commit comments

Comments
 (0)