Add custom error pages. With Tetris! (#574)

[Custom Error Pages](https://devcenter.heroku.com/articles/error-pages#customize-pages) for Pontoon deployment, e.g. on Heroku. Featuring Tetris via [blockrain.js](http://aerolab.github.io/blockrain.js/)!
mozilla · Apr 11, 2017 · 9e195cb · 9e195cb
1 parent 33fc66c
commit 9e195cb
Show file tree

Hide file tree

Showing 12 changed files with 2,844 additions and 2 deletions.
diff --git a/docs/admin/deployment.rst b/docs/admin/deployment.rst
@@ -78,6 +78,14 @@ you create:
    production.
    Adds some additional django apps that can be helpful during day to day development.
 
+``ERROR_PAGE_URL``
+   Optional. URL to the page displayed to your users when the application encounters
+   a system error. See `Heroku Reference`_ for more information.
+
+``MAINTENANCE_PAGE_URL``
+   Optional. URL to the page displayed to your users when the application is placed
+   in the maintenance state. See `Heroku Reference`_ for more information.
+
 ``NEW_RELIC_API_KEY``
    Optional. API key for accessing the New Relic REST API. Used to mark deploys
    on New Relic.
@@ -130,8 +138,7 @@ you create:
 
       heroku config:set SSH_KEY="`cat /path/to/key_rsa`"
 
-.. _Babel: http://babeljs.io/
-.. _Yuglify: https://github.com/yui/yuglify
+.. _Heroku Reference: https://devcenter.heroku.com/articles/error-pages#customize-pages
 
 ``TZ``
    Timezone for the dynos that will run the app. Pontoon operates in UTC, so set

diff --git a/error_pages/LICENSE b/error_pages/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Mozilla
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/error_pages/README.md b/error_pages/README.md
@@ -0,0 +1,4 @@
+# Pontoon Error Pages
+[Custom Error Pages](https://devcenter.heroku.com/articles/error-pages#customize-pages) for Pontoon deployment on Heroku, featuring Tetris via [blockrain.js](http://aerolab.github.io/blockrain.js/)!
+
+Must be hosted outside the main application, which will be down when these pages are displayed.
diff --git a/error_pages/application-error.html b/error_pages/application-error.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700" rel="stylesheet"> 
+  <link href='https://fonts.googleapis.com/css?family=Play:400,700' rel='stylesheet' type='text/css'>
+
+  <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="css/blockrain.css">
+
+  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+
+  <title>Application Error</title>
+</head>
+
+<body>
+  <header>
+    <h1>Application Error</h1>
+    <h2>Please check back later. Or play some Tetris.</h2>
+  </header>
+
+  <section id="examples">
+    <article id="example-slider">
+      <div class="example">
+        <div class="instructions">
+          Use only arrows
+          <div class="keyboard">
+            <div class="key key-up">&#9650;</div>
+            <div class="key key-left">&#9668;</div>
+            <div class="key key-down">&#9660;</div>
+            <div class="key key-right">&#9658;</div>
+          </div>
+        </div>
+        <div class="game" id="tetris-demo"></div>
+      </div>
+    </article>
+
+    <footer>
+      <a id="credits" href="https://github.com/Aerolab/blockrain.js">Powered by Blockrain.js</a>
+    </footer>
+  </section>
+
+  <script src="js/jquery-1.11.1.min.js"></script>
+  <script src="js/blockrain.jquery.libs.js"></script>
+  <script src="js/blockrain.jquery.src.js"></script>
+  <script src="js/blockrain.jquery.themes.js"></script>
+
+  <script>
+    var $demo = $('#tetris-demo').blockrain({
+      theme: 'pontoon',
+      playText: ''
+    });
+  </script>
+</body>
+</html>
diff --git a/error_pages/css/blockrain.css b/error_pages/css/blockrain.css
@@ -0,0 +1,163 @@
+.blockrain-game-holder {
+  position: relative;
+  padding: 0;
+  margin: 0;
+  color: #ffffff;
+  font-size: 18px;
+  line-height: 140%;
+}
+
+/* Touch Controls */
+.blockrain-touch {
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  display: block;
+  border-radius: 100%;
+  border: 1px solid white;
+  background: rgba(255,255,255,0.2);
+  z-index: 10;
+
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  line-height: 50px;
+  text-align: center;
+}
+.blockrain-touch:active {
+  background: rgba(255,255,255,0.3);
+}
+
+.blockrain-touch-left {
+  left: -60px;
+  bottom: 10px;
+}
+.blockrain-touch-left::after {
+  content: "<";
+}
+.blockrain-touch-right {
+  right: -60px;
+  bottom: 10px;
+}
+.blockrain-touch-right::after {
+  content: ">";
+}
+
+.blockrain-touch-rotate-left {
+  left: -60px;
+  bottom: 80px;
+}
+.blockrain-touch-rotate-left::after {
+  content: "<o";
+}
+
+.blockrain-touch-rotate-right {
+  right: -60px;
+  bottom: 80px;
+}
+.blockrain-touch-rotate-right::after {
+  content: "o>";
+}
+
+.blockrain-touch-drop {
+  left: 50%;
+  margin-left: -25px;
+  bottom: -60px;
+}
+.blockrain-touch-drop::after {
+  content: ".";
+}
+
+/* Buttons */
+.blockrain-btn {
+  position: relative;
+  display: inline-block;
+  background: none;
+  color: #ffffff;
+  text-decoration: none;
+  border: 2px solid #ffffff;
+  padding: 15px 30px;
+  font-size: 18px;
+  text-align: center;
+  cursor: default;
+}
+.blockrain-btn::before {
+  position: absolute;
+  content: "";
+  top: 100%;
+  left: 0px;
+  bottom: 0px;
+  right: 0px;
+  border: 2px solid #ffffff;
+  border-top: none;
+  border-right: none;
+  transition: all 0.2s ease;
+}
+.blockrain-btn::after {
+  position: absolute;
+  content: "";
+  top: 0px;
+  left: 100%;
+  bottom: 0px;
+  right: 0px;
+  border: 2px solid #ffffff;
+  border-left: none;
+  border-bottom: none;
+  transition: all 0.2s ease;
+}
+
+.blockrain-btn:hover::before {
+  left: 5px;
+  bottom: -8px;
+  right: -8px;
+}
+.blockrain-btn:hover::after {
+  top: 5px;
+  bottom: -8px;
+  right: -8px;
+}
+
+
+/* Score */
+.blockrain-score-holder {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  text-align: right;
+}
+.blockrain-score-msg {
+  font-size: 14px;  
+  line-height: 100%;
+  margin-bottom: 0.2em;
+}
+.blockrain-score-num {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+/* Menu */
+.blockrain-start-holder, .blockrain-game-over-holder {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  background: rgba(0,0,0,0.0);
+  text-align: center;
+}
+.blockrain-start, .blockrain-game-over {
+  position: absolute;
+  top: 50%;
+  width: 100%;
+  transform: translateY(-50%);
+}
+
+.blockrain-start-msg, .blockrain-game-over-msg {
+  font-size: 18px;
+  margin-bottom: 30px;
+}
+