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

used from nginx when Rails fails.
8 years ago · e22a56183a
parent b4a4eb73ae
commit e22a56183a
9 changed files with 54 additions and 132 deletions
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
@ -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
--- a/app/views/errors/404.html
+++ b/app/views/errors/404.html
@ -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>
--- a/app/views/errors/404.html.haml
+++ b/app/views/errors/404.html.haml
@ -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
--- a/app/views/errors/410.html
+++ b/app/views/errors/410.html
@ -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>
--- a/app/views/errors/410.html.haml
+++ b/app/views/errors/410.html.haml
@ -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
--- a/app/views/errors/422.html
+++ b/app/views/errors/422.html
@ -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>
--- a/app/views/errors/422.html.haml
+++ b/app/views/errors/422.html.haml
@ -0,0 +1,5 @@
 - content_for :page_title do
  Security verification failed
 - content_for :content do
  Security verification failed. Are you blocking cookies?
--- a/app/views/layouts/error.html.haml
+++ b/app/views/layouts/error.html.haml
@ -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
--- a/app/views/errors/500.html
+++ b/app/views/errors/500.html