contracts styling

This commit is contained in:
Matthias Kretschmann 2022-10-19 20:56:12 +01:00
parent ed155b0127
commit c396d21633
Signed by: m
GPG Key ID: 606EEEF3C479A91F
2 changed files with 45 additions and 6 deletions

View File

@ -153,12 +153,19 @@ export default function HomePage(): ReactElement {
</summary> </summary>
<ul> <ul>
{Object.entries((addresses as any)[networkName]).map( {Object.entries((addresses as any)[networkName]).map(
([key, value]) => ([key, value]: [
key: string,
value: string | { [key: number]: string }
]) =>
key !== 'chainId' && key !== 'chainId' &&
key !== 'startBlock' && ( key !== 'startBlock' && (
<li key={key}> <li key={key}>
<code className={styles.key}>{key}</code>:{' '} <code className={styles.key}>{key}</code>
<code>{JSON.stringify(value)}</code> <code>
{typeof value === 'string'
? value
: JSON.stringify(value, null, 2)}
</code>
</li> </li>
) )
)} )}

View File

@ -47,7 +47,9 @@
.networkName { .networkName {
margin-top: calc(var(--spacer) * 3); margin-top: calc(var(--spacer) * 3);
margin-bottom: var(--spacer);
text-transform: capitalize; text-transform: capitalize;
line-height: 1;
} }
.card { .card {
@ -155,17 +157,47 @@
.contracts { .contracts {
margin-top: var(--spacer); margin-top: var(--spacer);
margin-left: 1rem;
} }
.contracts summary { .contracts summary {
margin-left: -1rem;
cursor: pointer; cursor: pointer;
} }
.contracts .titleComponent { .contracts .titleComponent {
display: inline-block; display: inline-block;
width: auto; width: auto;
margin-bottom: calc(var(--spacer) / 2);
}
.contracts li {
padding: calc(var(--spacer) / 6) calc(var(--spacer) / 2);
border-top: 1px solid var(--border-color);
}
.contracts li:hover {
background: var(--background-highlight);
}
.contracts li:last-child {
border-bottom: 1px solid var(--border-color);
}
.contracts li code {
display: block;
word-wrap: break-word;
overflow-wrap: break-word;
white-space: pre-wrap;
}
@media screen and (min-width: 55rem) {
.contracts li {
display: grid;
grid-template-columns: 2fr 4fr;
}
}
.contracts .key {
font-weight: var(--font-weight-bold);
} }
.loading { .loading {
@ -174,7 +206,7 @@
} }
.date { .date {
display: inline-block; display: inline;
margin-left: calc(var(--spacer) / 4); margin-left: calc(var(--spacer) / 4);
font-size: var(--font-size-small); font-size: var(--font-size-small);
color: var(--color-secondary); color: var(--color-secondary);