Added styled error messages

This commit is contained in:
Luke Barratt 2014-04-26 18:47:17 +01:00
parent 0ba4b034d1
commit 8014a0eac7
13 changed files with 108 additions and 133 deletions

View file

@ -0,0 +1,55 @@
/*
Libraries & Configuration
*/
@import "bourbon";
@import "variables";
@import "neat";
@import "neat-helpers";
/*
Layout
*/
@import "layout/body";
@import "layout/typography";
/*
Error Page
*/
html,
body {
height: 100%;
}
html {
@include linear-gradient($dark-blue, $deep-blue);
}
body {
color: white;
background: transparent;
}
#error {
display: table;
height: 100%;
margin: 0 auto;
max-width: 60%;
width: 90%;
text-align: center;
text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.75);
#code h1 {
font-size: 48px;
margin: 1em 0;
}
.message {
padding-top: 50px;
display: table-cell;
vertical-align: middle;
padding-bottom: 100px;
}
}

View file

@ -0,0 +1,13 @@
class ErrorsController < ApplicationController
layout 'errors'
def show
render status_code.to_s, status: status_code
end
private
def status_code
params[:code] || 500
end
end

View file

@ -0,0 +1,2 @@
<h1>You are not allowed to visit the page you were looking for.</h1>
<p>The administrator of this web site has denied access to you at this time.</p>

View file

@ -0,0 +1,2 @@
<h1>The page you were looking for doesn't exist.</h1>
<p>You may have mistyped the address or the page may have moved.</p>

View file

@ -0,0 +1,2 @@
<h1>The change you wanted was rejected.</h1>
<p>Maybe you tried to change something you didn't have access to.</p>

View file

@ -0,0 +1,2 @@
<h1>We're sorry, but something went wrong.</h1>
<p>We've been notified about this issue and we'll take a look at it shortly.</p>

View file

@ -0,0 +1,24 @@
<!doctype html>
<html>
<head>
<title><%= full_title(yield(:title)) %> | Error <%= params[:code] %></title>
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" type="image/png" href="/favicon.png" />
<%= stylesheet_link_tag 'errors' %>
</head>
<body>
<div id="error">
<div class="message">
<div id="logo">
<%= link_to image_tag("logo.png"), root_path %>
</div>
<div id="code">
<h1><%= params[:code] %></h1>
</div>
<%= yield %>
</div>
</div>
</body>
</html>

View file

@ -1,13 +1,12 @@
require File.expand_path('../boot', __FILE__)
require 'rails/all'
Bundler.require(*Rails.groups(:assets => %w(development test)))
Bundler.require(*Rails.groups(assets: %w(development test)))
module Ensl
class Application < Rails::Application
# Settings in config/environments/* take precedence over those specified here.
# Application configuration should go into files in config/initializers
# -- all .rb files in that directory are automatically loaded.
# Custom error pages
config.exceptions_app = self.routes
# Custom directories with classes and modules you want to be autoloadable.
config.autoload_paths += Dir["#{config.root}/app/services/**/", "#{config.root}/app/models/concerns/"]
@ -16,16 +15,12 @@ module Ensl
config.secret_token = ENV['APP_SECRET']
# Use cookies
config.session_store :cookie_store, :key => '_ENSL_session_key', :expire_after => 30.days.to_i
config.session_store :cookie_store, key: '_ENSL_session_key', expire_after: 30.days.to_i
# Set Time.zone default to the specified zone and make Active Record auto-convert to this zone.
# Run "rake -D time" for a list of tasks for finding time zone names. Default is UTC.
config.time_zone = 'Amsterdam'
# The default locale is :en and all translations from config/locales/*.rb,yml are auto loaded.
# config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s]
# config.i18n.default_locale = :de
# Configure the default encoding used in templates for Ruby 1.9.
config.encoding = "utf-8"

View file

@ -1,4 +1,8 @@
Ensl::Application.routes.draw do
%w(403 404 422 500).each do |code|
get code, to: 'errors#show', code: code
end
root to: "articles#news_index"
resources :articles do

View file

@ -1,31 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>You are not allowed to access this resource (403)</title>
<style type="text/css">
body { background-color: #fff; color: #666; text-align: center; font-family: arial, sans-serif; }
div.dialog {
width: 25em;
padding: 0 4em;
margin: 4em auto 0 auto;
border: 1px solid #ccc;
border-right-color: #999;
border-bottom-color: #999;
}
h1 { font-size: 100%; color: #f00; line-height: 1.5em; }
</style>
</head>
<body>
<!-- This file lives in public/403.html -->
<div class="dialog">
<h1>You are not allowed to visit the page you were looking for.</h1>
<p>The administrator of this web site has denied access to you at this time.</p>
<h5>HTTP 403 Forbidden</h5>
</div>
</body>
</html>

View file

@ -1,30 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>The page you were looking for doesn't exist (404)</title>
<style type="text/css">
body { background-color: #fff; color: #666; text-align: center; font-family: arial, sans-serif; }
div.dialog {
width: 25em;
padding: 0 4em;
margin: 4em auto 0 auto;
border: 1px solid #ccc;
border-right-color: #999;
border-bottom-color: #999;
}
h1 { font-size: 100%; color: #f00; line-height: 1.5em; }
</style>
</head>
<body>
<!-- This file lives in public/404.html -->
<div class="dialog">
<h1>The page you were looking for doesn't exist.</h1>
<p>You may have mistyped the address or the page may have moved.</p>
</div>
</body>
</html>

View file

@ -1,30 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>The change you wanted was rejected (422)</title>
<style type="text/css">
body { background-color: #fff; color: #666; text-align: center; font-family: arial, sans-serif; }
div.dialog {
width: 25em;
padding: 0 4em;
margin: 4em auto 0 auto;
border: 1px solid #ccc;
border-right-color: #999;
border-bottom-color: #999;
}
h1 { font-size: 100%; color: #f00; line-height: 1.5em; }
</style>
</head>
<body>
<!-- This file lives in public/422.html -->
<div class="dialog">
<h1>The change you wanted was rejected.</h1>
<p>Maybe you tried to change something you didn't have access to.</p>
</div>
</body>
</html>

View file

@ -1,33 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>We're sorry, but something went wrong (500)</title>
<style type="text/css">
body { background-color: #fff; color: #666; text-align: center; font-family: arial, sans-serif; }
div.dialog {
width: 25em;
padding: 0 4em;
margin: 4em auto 0 auto;
border: 1px solid #ccc;
border-right-color: #999;
border-bottom-color: #999;
}
h1 { font-size: 100%; color: #f00; line-height: 1.5em; }
</style>
</head>
<body>
<!-- This file lives in public/500.html -->
<div class="dialog">
<h1>We're sorry, but something went wrong.</h1>
<p>We've been notified about this issue and we'll take a look at it shortly.</p>
<p><small>(If you're the administrator of this website, then please read
the log file "<%=h RAILS_ENV %>.log"
to find out what went wrong.)</small></p>
</div>
</body>
</html>