Error page styles (#40)

* Update error page styles * Update header font size
grails-profiles · Mar 10, 2022 · 2cb2c22 · 2cb2c22
1 parent 58481ff
commit 2cb2c22
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 38 deletions.
diff --git a/skeleton/grails-app/assets/stylesheets/errors.css b/skeleton/grails-app/assets/stylesheets/errors.css
@@ -1,9 +1,9 @@
-h1, h2 {
-    margin: 10px 25px 5px;
+h1 {
+    font-size: 2rem;
 }
 
 h2 {
-    font-size: 1.1em;
+    font-size: 1.25rem;
 }
 
 .filename {
@@ -19,32 +19,21 @@ h2 {
 
 .stack,
 .snippet {
-    margin: 0 25px 10px;
+    margin: 10px 0;
 }
 
 .stack,
 .snippet {
     border: 1px solid #ccc;
-       -mox-box-shadow: 0 0 2px rgba(0,0,0,0.2);
-    -webkit-box-shadow: 0 0 2px rgba(0,0,0,0.2);
-            box-shadow: 0 0 2px rgba(0,0,0,0.2);
 }
 
 /* error details */
 .error-details {
-    border-top: 1px solid #FFAAAA;
-       -mox-box-shadow: 0 0 2px rgba(0,0,0,0.2);
-    -webkit-box-shadow: 0 0 2px rgba(0,0,0,0.2);
-            box-shadow: 0 0 2px rgba(0,0,0,0.2);
-    border-bottom: 1px solid #FFAAAA;
-       -mox-box-shadow: 0 0 2px rgba(0,0,0,0.2);
-    -webkit-box-shadow: 0 0 2px rgba(0,0,0,0.2);
-            box-shadow: 0 0 2px rgba(0,0,0,0.2);
+    border: 1px solid #FFAAAA;
     background-color:#FFF3F3;
     line-height: 1.5;
     overflow: hidden;
-    padding: 5px;
-    padding-left:25px;
+    padding: 10px 0 5px 25px;
 }
 
 .error-details dt {
@@ -66,7 +55,7 @@ h2 {
 .stack {
     padding: 5px;
     overflow: auto;
-    height: 150px;
+    height: 300px;
 }
 
 /* code snippet */

diff --git a/skeleton/grails-app/assets/stylesheets/main.css b/skeleton/grails-app/assets/stylesheets/main.css
@@ -315,10 +315,8 @@ fieldset.embedded legend {
 
 .errors,
 .message {
-    font-size: 0.8em;
-    line-height: 2;
-    margin: 1em 2em;
-    padding: 0.25em;
+    margin: 1em 0;
+    padding: 0.5em;
 }
 
 .message {

diff --git a/skeleton/grails-app/views/error.gsp b/skeleton/grails-app/views/error.gsp
@@ -9,27 +9,29 @@
     <div id="content" role="main">
         <div class="container">
             <section class="row">
-            <g:if env="development">
-                <g:if test="${Throwable.isInstance(exception)}">
-                    <g:renderException exception="${exception}" />
+                <div class="col-12">
+                <g:if env="development">
+                    <g:if test="${Throwable.isInstance(exception)}">
+                        <g:renderException exception="${exception}" />
+                    </g:if>
+                    <g:elseif test="${request.getAttribute('javax.servlet.error.exception')}">
+                        <g:renderException exception="${request.getAttribute('javax.servlet.error.exception')}" />
+                    </g:elseif>
+                    <g:else>
+                        <ul class="errors">
+                            <li>An error has occurred</li>
+                            <li>Exception: ${exception}</li>
+                            <li>Message: ${message}</li>
+                            <li>Path: ${path}</li>
+                        </ul>
+                    </g:else>
                 </g:if>
-                <g:elseif test="${request.getAttribute('javax.servlet.error.exception')}">
-                    <g:renderException exception="${request.getAttribute('javax.servlet.error.exception')}" />
-                </g:elseif>
                 <g:else>
-                    <ul class="col-12 errors">
+                    <ul class="errors">
                         <li>An error has occurred</li>
-                        <li>Exception: ${exception}</li>
-                        <li>Message: ${message}</li>
-                        <li>Path: ${path}</li>
                     </ul>
                 </g:else>
-            </g:if>
-            <g:else>
-                <ul class="col-12 errors">
-                    <li>An error has occurred</li>
-                </ul>
-            </g:else>
+                </div>
             </section>
         </div>
     </div>