Implement key-value-table as dl instead of table element.
This commit is contained in:
parent
a6efebda56
commit
ce19908bc0
@ -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)
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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 */
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user