Switch to using tables for properties.

This commit is contained in:
Tom Alexander 2024-01-27 16:38:34 -05:00
parent b8eacd9c79
commit 1507050128
Signed by: talexander
GPG Key ID: D3A179C9A53C0EDE
3 changed files with 41 additions and 5 deletions

View File

@ -46,3 +46,34 @@
padding: 5px 5px 5px 20px;
background: #eeeeee;
}
.OrgAstProperties {
width: 100%;
> tbody {
> tr {
border-width: 1px 0;
border-style: solid;
border-color: #000000;
> th,
> td {
padding: 5px;
}
> th {
font-weight: 700;
text-align: right;
padding-right: 5px;
width: 0;
}
}
> tr:nth-child(odd) {
background-color: #eeeeee;
}
> tr:nth-child(even) {
background-color: #ffffff;
}
}
}

View File

@ -3,3 +3,4 @@ export const OrgAstNode: string;
export const OrgAstNodeType: string;
export const OrgAstChildren: string;
export const selected: string;
export const OrgAstProperties: string;

View File

@ -137,15 +137,19 @@ const OrgPropertiesList = (props: {
const entries = Object.entries(props.properties).map(([key, value]) => {
return (
<Fragment key={key}>
<dt>{key}</dt>
<dd>{JSON.stringify(value)}</dd>
<tr>
<th scope="row">{key}:</th>
<td>{JSON.stringify(value)}</td>
</tr>
</Fragment>
);
});
return (
<dl>
{entries}
</dl>
<table className={styles.OrgAstProperties}>
<tbody>
{entries}
</tbody>
</table>
);
};