Many pages had this tag, but many other didn't, which made navigation inconsistent for people using screen readers. Note that there are slight changes in two pages: * The homepage now includes the banner and the content of the `shared/header` element inside the <main> tag * The budgets index now includes the banner inside the <main> tag I see both potential advantages and disadvantages of this approach, since banners aren't necessarily related to the main content of a page but on the other hand they aren't the same across pages and people using screen readers might accidentally skip them if they jump to the <main> tag. So I'm choosing the option that is easier to implement. Note we're adding a `public-content` class to the <main> element in the application layout. This might be redundat because the element could already be accessed through the `.public main` selector, but this is consistent with the `admin-content` class used in the admin section, and without it the <main> element would sometimes have an empty class attribute and we'd have to use `if content_for?(:main_class)` or `tag.main` which IMHO makes the code less consistent. The Capybara::DSL monkey-patch is only done on the `visit` method because it's the only reliable one. Other methods like `click_link` generate AJAX requests, so `expect(page).to have_css "main", count: 1` might be executed before the AJAX request is finished, meaning it wouldn't properly test anything.
42 lines
674 B
HTML
42 lines
674 B
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Error 500 | Internal server error</title>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<style>
|
|
body {
|
|
background: #065687 url('/errors_bg.jpg');
|
|
color: #2E2F30;
|
|
font-family: arial, sans-serif;
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
h1 {
|
|
color: white;
|
|
font-size: 160px;
|
|
line-height: 160px;
|
|
margin: 0;
|
|
}
|
|
|
|
h2 {
|
|
color: white;
|
|
}
|
|
|
|
div.error {
|
|
margin-top: -144px;
|
|
position: absolute;
|
|
top: 50%;
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<main class="error">
|
|
<h1>500</h1>
|
|
<h2>Internal server error.</h2>
|
|
</main>
|
|
</body>
|
|
</html>
|