Implement key-value-table as dl instead of table element.

This commit is contained in:
L. Karkkainen 2023-02-07 20:51:25 +00:00
parent a6efebda56
commit ce19908bc0
3 changed files with 22 additions and 12 deletions

View File

@ -84,12 +84,12 @@ class ErrorPage(BasePage):
def _key_value_table( def _key_value_table(
self, title: str, table_id: str, data: Mapping[str, Any] self, title: str, table_id: str, data: Mapping[str, Any]
) -> None: ) -> None:
with self.doc.table(id=table_id, class_="key-value-table smalltext"): self.doc.h2(title)
self.doc.caption(title) with self.doc.dl(id=table_id, class_="key-value-table smalltext"):
for key, value in data.items(): for key, value in data.items():
# Reading values may cause a new exception, so suppress it # Reading values may cause a new exception, so suppress it
try: try:
value = str(value) value = str(value)
except Exception: except Exception:
value = E.em("Unable to display value") value = E.em("Unable to display value")
self.doc.tr.td.span(key, class_="nobr key").td(value) self.doc.dt.span(key, class_="nobr key").span(": ").dd(value)

View File

@ -58,6 +58,10 @@ h1 {
text-align: left; text-align: left;
} }
h2 {
margin: 1em 0 0.5em 0;
}
a:visited { a:visited {
color: inherit; color: inherit;
} }

View File

@ -11,14 +11,20 @@ summary {
--tracerite-highlight: var(--sanic-yellow); --tracerite-highlight: var(--sanic-yellow);
} }
.key-value-table { dl.key-value-table {
margin: 2rem 0; width: 100%;
display: grid;
grid-template-columns: 1fr 5fr;
grid-gap: 0.5rem;
white-space: pre-wrap;
} }
dl.key-value-table * {
.key-value-table caption { margin: 0;
caption-side: top; }
text-align: left; dl.key-value-table dt {
font-size: 1.25rem; color: gray;
font-weight: 700; word-break: break-word;
padding-bottom: 0.5rem; }
dl.key-value-table dd {
word-break: break-all; /* Better breaking for cookies header and such */
} }