From 2588bbf7bc5374830662af7c01df688c42d30dc6 Mon Sep 17 00:00:00 2001
From: Igor Scheller <igor.scheller@igorshp.de>
Date: Tue, 13 Nov 2018 17:47:19 +0100
Subject: [PATCH] Templating: Improved error templates

---
 resources/assets/themes/base.less   |  5 +++--
 resources/assets/themes/error.less  | 33 +++++++++++++++++++++++++++++
 resources/views/errors/403.twig     |  5 +++++
 resources/views/errors/404.twig     | 18 ++++++++++++++++
 resources/views/errors/default.twig | 18 ++++++++++++++--
 5 files changed, 75 insertions(+), 4 deletions(-)
 create mode 100644 resources/assets/themes/error.less
 create mode 100644 resources/views/errors/403.twig
 create mode 100644 resources/views/errors/404.twig

diff --git a/resources/assets/themes/base.less b/resources/assets/themes/base.less
index 50789c33..733bb285 100644
--- a/resources/assets/themes/base.less
+++ b/resources/assets/themes/base.less
@@ -1,4 +1,5 @@
 @import "../../../node_modules/bootstrap/less/bootstrap";
+@import "error";
 
 body {
   padding-top: 50px;
@@ -17,7 +18,7 @@ body {
   display: block;
   font-size: 30px;
   line-height: 30px;
-  margin: 0px;
+  margin: 0;
 }
 
 .icon-icon_angel {
@@ -135,7 +136,7 @@ table a > .icon-icon_angel {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-itmes: stretch;
+  align-items: stretch;
   width: 100%;
 
   .lane {
diff --git a/resources/assets/themes/error.less b/resources/assets/themes/error.less
new file mode 100644
index 00000000..99a6aacb
--- /dev/null
+++ b/resources/assets/themes/error.less
@@ -0,0 +1,33 @@
+/* =============================================================
+	Error page
+   ============================================================= */
+
+.error-big {
+  text-align: center;
+
+  h2 {
+    font-size: 10em;
+    font-weight: bold;
+
+    small {
+      display: block;
+      font-size: 0.3em;
+    }
+
+    @keyframes error-page-pulse {
+      from {
+        opacity: 0.3;
+      }
+      to {
+        opacity: 1.0;
+      }
+    }
+    .pulse {
+      animation-name: error-page-pulse;
+      animation-duration: 1s;
+      animation-iteration-count: infinite;
+      animation-timing-function: ease-in-out;
+      animation-direction: alternate;
+    }
+  }
+}
diff --git a/resources/views/errors/403.twig b/resources/views/errors/403.twig
new file mode 100644
index 00000000..73bf0274
--- /dev/null
+++ b/resources/views/errors/403.twig
@@ -0,0 +1,5 @@
+{% extends "errors/default.twig" %}
+
+{% block title %}{{ __("Forbidden") }}{% endblock %}
+
+{% block content_headline_text %}{{ __("You are not allowed to access this page") }}{% endblock %}
diff --git a/resources/views/errors/404.twig b/resources/views/errors/404.twig
new file mode 100644
index 00000000..6eb9104e
--- /dev/null
+++ b/resources/views/errors/404.twig
@@ -0,0 +1,18 @@
+{% extends "errors/default.twig" %}
+
+{% block title %}{{ __("Page not found") }}{% endblock %}
+
+{% block content_container %}
+    <div class="row">
+        <div class="col-sm-6 col-sm-offset-3 error-big">
+            <h2>
+                4<span class="pulse">:</span>{{ status|slice(1, 2) }}
+                <small>{{ __("No sleep found") }}</small>
+            </h2>
+
+            {% block content_text %}
+                {{ content }}
+            {% endblock %}
+        </div>
+    </div>
+{% endblock %}
diff --git a/resources/views/errors/default.twig b/resources/views/errors/default.twig
index 5fb8bcbd..ab2863a0 100644
--- a/resources/views/errors/default.twig
+++ b/resources/views/errors/default.twig
@@ -1,7 +1,21 @@
 {% extends "layouts/app.twig" %}
 
-{% block title %}{% if status == 404 %}{{ __("Page not found") }}{% else %}Error {{ status }}{% endif %}{% endblock %}
+{% block title %}Error {{ status }}{% endblock %}
 
 {% block content %}
-    <div class="alert alert-info">{{ content }}</div>
+    <div class="container">
+        {% block content_container %}
+            <div class="alert alert-info">
+
+                {% block content_headline %}
+                    <h2>{% block content_headline_text %}Error {{ status }}{% endblock %}</h2>
+                {% endblock %}
+
+                {% block content_text %}
+                    {{ content }}
+                {% endblock %}
+
+            </div>
+        {% endblock %}
+    </div>
 {% endblock %}