dns-witch/nomilo
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

css refactoring

Browse source
This commit is contained in:
Hannaeko 2023-02-25 22:42:51 +01:00
parent d06d745dcb
commit 0801e83d3e
2 changed files with 40 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
public/scripts/records.js
View file

@ -174,15 +174,15 @@ function FriendlyRecord({type, record}) {
function RecordsByName({ name, recordSets }) { function RecordsByName({ name, recordSets }) {
return html` return html`
<article> <article class="rrsets-per-name">
<h3>${name}</h4> <h3 class="record-name">${name}</h4>
<div> <div class="rrsets-per-type">
${Object.entries(recordSets).map( ${Object.entries(recordSets).map(
([type, records]) => { ([type, records]) => {
return html` return html`
<article> <article class="rrset-per-type">
<h4>${recordTypeNames[type]}</h4> <h4 class="record-type">${recordTypeNames[type]}</h4>
<ul> <ul class="rrset-rdata">
${records.map(record => html`<li><${FriendlyRecord} type=${type} record=${record}/></li>`)} ${records.map(record => html`<li><${FriendlyRecord} type=${type} record=${record}/></li>`)}
</ul> </ul>
</article> </article>

59
public/styles/zone.css
View file

@ -22,55 +22,64 @@ h2 {
margin: 0; margin: 0;
flex-grow: 1; flex-grow: 1;
} }
header > :not(:last-of-type) { header > :not(:last-of-type) {
margin-right: 2ch; margin-right: 2ch;
} }
.zone-content h3, .zone-content h4 { .zone-content article.rrsets-per-name {
margin: 0; display: grid;
font-weight: normal; grid-template-columns: repeat(6, 1fr);
font-size: 1rem; grid-gap: 2ch;
width: 30%;
}
.zone-content article {
display: flex;
flex-wrap: wrap;
}
.zone-content > article > div {
flex-grow: 1;
}
.zone-content > article {
margin: .5rem 0; margin: .5rem 0;
position: relative;
} }
.zone-content > article:not(:last-of-type) { .zone-content article.rrsets-per-name:not(:last-of-type) {
border-bottom: 2px solid rgb(var(--color-hightlight-2)); border-bottom: 2px solid rgb(var(--color-hightlight-2));
} }
.zone-content article > *{ .zone-content h3.record-name,
margin-right: 2ch; .zone-content h4.record-type {
margin: 0;
font-weight: normal;
font-size: 1rem;
} }
.zone-content article ul { .zone-content h3.record-name {
grid-column: 1 / 3;
}
.zone-content div.rrsets-per-type {
grid-column: 3 / 7;
}
.zone-content article.rrset-per-type {
grid-template-columns: repeat(4, 1fr);
display: grid;
grid-gap: 2ch;
}
.zone-content h4.record-type {
grid-column: 1 / 2;
}
.zone-content ul.rrset-rdata {
padding: 0; padding: 0;
margin: 0; margin: 0;
list-style-type: none; list-style-type: none;
grid-column: 2 / 5;
} }
.zone-content article dl { .zone-content ul.rrset-rdata dl {
display: grid; display: grid;
grid-template: auto / max-content 1fr; grid-template: auto / max-content 1fr;
} }
.zone-content article dd { .zone-content ul.rrset-rdata dd {
margin: 0; margin: 0;
} }
.zone-content article dt span { .zone-content ul.rrset-rdata dt span {
display: inline-block; display: inline-block;
background-color: rgb(var(--color-hightlight-1)); background-color: rgb(var(--color-hightlight-1));
padding: 0.1em 0.5em; padding: 0.1em 0.5em;