Some styling for tracebacks

This commit is contained in:
Klaas van Schelven
2023-11-08 20:35:24 +01:00
parent 79e333c923
commit 5536cd8aad
2 changed files with 118 additions and 10 deletions

View File

@@ -5,29 +5,31 @@
</head>
<body>
<div class="flex justify-center items-center">
<div class="w-[96rem] p-4">
{% for exception in exceptions %}
<h1>{{ exception.type }}: {{ exception.value }}</h1>
<b>{{ parsed_data.request.url }}</b><br>
<h1 class="text-3xl mt-4">{{ exception.type }}</h1>
<div class="text-2xl">{{ exception.value }}</div>
<div class="italic mt-4">{{ parsed_data.request.method }} {{ parsed_data.request.url }}</div><br>
{% for frame in exception.stacktrace.frames %}
<p>
<br>
<b>{{ frame.filename }} line {{ frame.lineno }}, in {{ frame.function }}.</b><br>
<div class="font-mono">
<div class="font-bold">{{ frame.filename }} line {{ frame.lineno }}, in {{ frame.function }}.</div>
<pre>
<div class="whitespace-pre-wrap">
{% for line in frame.pre_context %}{{ line }}
{% endfor %}<b>{{ frame.context_line }}</b>
{% for line in frame.post_context %}{{ line }}
{% endfor %}<div class="font-bold bg-slate-200 w-full">{{ frame.context_line }}</div>{% for line in frame.post_context %}{{ line }}
{% endfor %}
</pre>
</div>
{% for var, value in frame.vars.items %}
<b>{{ var }}</b>: <i>{{ value }}</i></br>
{% endfor %}
</p>
</div>
{% endfor %}
@@ -35,6 +37,9 @@
{% endfor %}
</div>
</div>
</body>
</html>

View File

@@ -779,11 +779,27 @@ select {
position: sticky;
}
.m-4 {
margin: 1rem;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-4 {
margin-top: 1rem;
}
.mt-8 {
margin-top: 2rem;
}
.block {
display: block;
}
@@ -816,6 +832,30 @@ select {
height: 100vh;
}
.w-72 {
width: 18rem;
}
.w-96 {
width: 24rem;
}
.w-\[32rem\] {
width: 32rem;
}
.w-\[64rem\] {
width: 64rem;
}
.w-\[96rem\] {
width: 96rem;
}
.w-full {
width: 100%;
}
.border-collapse {
border-collapse: collapse;
}
@@ -836,6 +876,10 @@ select {
justify-content: center;
}
.whitespace-pre-wrap {
white-space: pre-wrap;
}
.border {
border-width: 1px;
}
@@ -845,6 +889,25 @@ select {
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}
.bg-slate-300 {
--tw-bg-opacity: 1;
background-color: rgb(203 213 225 / var(--tw-bg-opacity));
}
.bg-slate-200 {
--tw-bg-opacity: 1;
background-color: rgb(226 232 240 / var(--tw-bg-opacity));
}
.p-4 {
padding: 1rem;
}
.text-center {
text-align: center;
}
@@ -853,11 +916,51 @@ select {
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}
.font-mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.text-5xl {
font-size: 3rem;
line-height: 1;
}
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.font-bold {
font-weight: 700;
}
.font-black {
font-weight: 900;
}
.font-extrabold {
font-weight: 800;
}
.italic {
font-style: italic;
}
.leading-normal {
line-height: 1.5;
}