Skip to content

Commit ea338f1

Browse files
ryankshawryankshaw
committed
make all css/js standalone in 500 error page, fixes: #7944
test plan: * do something that causes a page error * verify that it looks like this: http://cl.ly/0t3E2V2H263F3f2g1342 Change-Id: I943ae98f65d14f50b98fe4ad673f6d0aabdac20d Reviewed-on: https://gerrit.instructure.com/10477 Tested-by: Jenkins <jenkins@instructure.com> Tested-by: Joe Tanner <joe@instructure.com> Reviewed-by: Joe Tanner <joe@instructure.com>
1 parent 408ab90 commit ea338f1

1 file changed

Lines changed: 91 additions & 94 deletions

File tree

‎public/500.html‎

Lines changed: 91 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,92 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5-
<title>Page Error</title>
6-
<noscript> <meta http-equiv=refresh content="0; URL=/enable-javascript.html" /> </noscript>
7-
<!--[if lte IE 6]> <meta http-equiv=refresh content="0; URL=/ie-6-is-not-supported.html" /> <![endif]-->
8-
<link href="/assets/common.css?1274476615" media="all" rel="stylesheet" type="text/css" />
9-
</head>
10-
<body class="">
11-
<div id="header" class="no-print no-user">
12-
<b id="header-logo"></b>
13-
<a href="#content" id="skip_navigation_link">Skip To Content</a>
14-
<div id="topbar">
15-
<ul id="identity">
16-
<li class="no-left-border"><a href="/register">Sign Up as a Teacher</a></li>
17-
<li><a href="/login">Log In</a></li>
18-
</ul>
19-
</div>
20-
</div>
21-
<div id="flash_message_holder">
22-
<div id="flash_notice_message" style="display: none;"></div>
23-
<div id="flash_error_message" style="display: none;"></div>
24-
</div>
25-
<div id="wrapper-container">
26-
<div id="wrapper">
27-
<div id="main">
28-
<div id="right-side-wrapper">
29-
<div id="right-side"></div>
30-
</div>
31-
<div id="content">
32-
<div style="width: 410px; margin-left: auto; margin-right: auto; margin-top: 50px;">
33-
<h2>Page Error</h2>
34-
<p>Well, looks like something broke. Sorry you had to see that.</p>
35-
<a href="#" style="font-size: 1.2em;" class="submit_error_link discussion-topic">Tell us what you were looking for.</a>
36-
<form id="submit_error_form" style="display: none;" action="/errors" method="POST">
37-
<input id="error_category" name="error[category]" type="hidden" value="500" />
38-
<input id="error_id" name="error[id]" type="hidden" />
39-
<input id="error_url" name="error[url]" type="hidden" value="the value of this field should be changed by javascript on dom ready." />
40-
<div style="width: 100%; margin: 0px auto;">
41-
<textarea cols="40" id="error_comments" name="error[comments]" rows="20" style="width: 100%; height: 100px; border: 1px solid #888;"></textarea>
42-
Email (optional): <input id="error_email" name="error[email]" size="30" style="border: 1px solid #888;" type="text" value="" />
43-
</div>
44-
<div class="button-container">
45-
<button type="submit" class="button">Send Comments</button>
46-
</div>
47-
</form>
48-
</div>
49-
</div>
50-
</div>
51-
<div id="footer">
52-
<a href="http://www.instructure.com"><img alt="Powered By Instructure" src="/images/footer-logo.png?1274476615" /></a>
53-
<a href="http://support.instructure.com">Support</a>
54-
</div>
55-
</div>
56-
</div>
57-
<div id="feedback_user_email" style="display: none;"></div>
58-
<div id="feedback_dialog" style="display: none;"></div>
59-
<script type="text/javascript">
60-
var INST = {
61-
environment: "production",
62-
logPageViews: true,
63-
allowMediaComments: false,
64-
http_status: "404 Not Found"
65-
};
66-
</script>
67-
<script src="/assets/common.js?1274476615" type="text/javascript"></script>
68-
<script>
69-
$("input#error_url").val(window.location.toString());
70-
$(document).ready(function() {
71-
$(".submit_error_link").click(function(event) {
72-
event.preventDefault();
73-
$("#submit_error_form").slideToggle(function() {
74-
$("#submit_error_form :input:visible:first").focus().select();
75-
});
76-
});
77-
$("#submit_error_form").formSubmit({
78-
formErrors: false,
79-
beforeSubmit: function(data) {
80-
$(this).loadingImage();
81-
},
82-
success: function(data) {
83-
$(this).loadingImage('remove');
84-
$.flashMessage("Thank you for your help! We'll get right on this.");
85-
$("#submit_error_form").slideToggle();
86-
},
87-
error: function(data) {
88-
$(this).loadingImage('remove');
89-
$(this).errorBox("Report didn't send. Please try again.");
90-
}
91-
});
92-
});
93-
</script>
94-
</body>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Canvas Page Error</title>
6+
<style>
7+
body {
8+
margin: 0;
9+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
10+
font-size: 13px;
11+
line-height: 18px;
12+
color: #333333;
13+
background-color: #eee;
14+
}
15+
16+
a {
17+
color: #0088cc;
18+
text-decoration: none;
19+
}
20+
21+
a:hover {
22+
color: #005580;
23+
text-decoration: underline;
24+
}
25+
26+
h1 {
27+
font-size: 22px;
28+
font-weight: normal;
29+
border-bottom: 1px solid #ccc;
30+
margin: 0;
31+
}
32+
.centered-div {
33+
position: absolute;
34+
top: 50%;
35+
left: 50%;
36+
margin: 0;
37+
padding: 0;
38+
margin-top: -210px;
39+
margin-left: -250px;
40+
width: 500px;
41+
border: 1px solid #ccc;
42+
background-color: #fff;
43+
border-radius: 5px;
44+
z-index: 1;
45+
46+
}
47+
.centered-div-content {
48+
padding: 15px 20px;
49+
}
50+
body, html {
51+
margin: 0;
52+
height: 100%;
53+
}
54+
.sticky-footer {
55+
position: absolute;
56+
left: 0;
57+
bottom: 0;
58+
margin: 10px;
59+
z-index: 0;
60+
}
61+
a img {
62+
border: none;
63+
}
64+
</style>
65+
</head>
66+
<body>
67+
<form class="centered-div" id="submit_error_form" action="/errors" method="POST">
68+
<h1 class="centered-div-content">Oops! It Looks Like Something Broke</h1>
69+
<div class="centered-div-content">
70+
<p>Please let us know how you got here so we can fix it as soon as possible:</p>
71+
<input id="error_category" name="error[category]" type="hidden" value="500" />
72+
<input id="error_url" name="error[url]" type="hidden" value="the value of this field should be changed by javascript on dom ready." />
73+
<textarea autofocus name="error[comments]" style="width: 100%; min-height: 100px"></textarea>
74+
Your email address: <input id="error_email" name="error[email]" style="width: 100%" />
75+
<p>
76+
If you need more assistance, go to our
77+
<a href="http://help.instructure.com">support website</a> or
78+
<a href="mailto:support@instructure.com?subject=Feedback from Canvas page error">send us an email</a>.
79+
</p>
80+
<div class="button-container">
81+
<button type="submit" class="button">Send Comments</button>
82+
</div>
83+
</div>
84+
</form>
85+
<div class="sticky-footer">
86+
<a href="http://www.instructure.com"><img alt="Powered By Instructure" src="/images/footer-logo.png?1274476615" /></a>
87+
</div>
88+
<script>
89+
document.getElementById('error_url').value = window.location;
90+
</script>
91+
</body>
9592
</html>

0 commit comments

Comments
 (0)