From 033edcb3450e653483e32d3e0f67fd67b81ade82 Mon Sep 17 00:00:00 2001
From: Tim <tim.veenendaal@gmail.com>
Date: Mon, 2 Sep 2019 17:58:36 +0200
Subject: [PATCH] Improve user experience of error viewer

---
 Resources/views/errors.html.twig | 35 ++++++++++++++++++--------------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/Resources/views/errors.html.twig b/Resources/views/errors.html.twig
index 078b58a..6b1e274 100644
--- a/Resources/views/errors.html.twig
+++ b/Resources/views/errors.html.twig
@@ -1,21 +1,26 @@
 {% extends '@ArdentLogger/layout.html.twig' %}
 
 {% block ardent_logger_user_content %}
-    Error overview <br>
+    <div class="m-3">
+        <h2>Error overview</h2><br>
 
-    {% for log in logs %}
-        {# @var log \App\Ardent\LoggerBundle\Entity\LogEntry #}
-        <div class="card">
-            <div class="card-header bg-dark text-white" role="button" data-toggle="collapse" data-target="#log-body{{ log.id }}">{{ log.levelName }} #{{ log.id }}</div>
-            <div class="card-body collapse" id="log-body{{ log.id }}">
-                <p class="card-text">{{ log.message }}</p>
-                <ul class="list-group list-group-flush">
-                    {% for context in log.context %}
-                        <li class="list-group-item">{{ context }}</li>
-                    {% endfor %}
-                </ul>
+        {% for log in logs %}
+            {# @var log \App\Ardent\LoggerBundle\Entity\LogEntry #}
+            <div class="card">
+                <div class="card-header bg-secondary" role="button" data-toggle="collapse" data-target="#log-body{{ log.id }}" style="cursor: pointer">
+                    {{ log.levelName }} #{{ log.id }}
+                    <span class="float-right">Click to expand</span>
+                </div>
+                <div class="card-body collapse" id="log-body{{ log.id }}">
+                    <p class="card-text">{{ log.message }}</p>
+                    <ul class="list-group list-group-flush">
+                        {% for context in log.context %}
+                            <li class="list-group-item">{{ context }}</li>
+                        {% endfor %}
+                    </ul>
+                </div>
+                <div class="card-footer">{{ log.createdAt | date('D, d M y H:i:s') }} </div>
             </div>
-            <div class="card-footer">{{ log.createdAt | date('D, d M y H:i:s') }} </div>
-        </div>
-    {% endfor %}
+        {% endfor %}
+    </div>
 {% endblock %}
\ No newline at end of file