From 0801e83d3ecf0434e5ec4aac0c7e63a56027a581 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Berthaud-M=C3=BCller?= Date: Sat, 25 Feb 2023 22:42:51 +0100 Subject: [PATCH] css refactoring --- public/scripts/records.js | 12 ++++---- public/styles/zone.css | 59 ++++++++++++++++++++++----------------- 2 files changed, 40 insertions(+), 31 deletions(-) diff --git a/public/scripts/records.js b/public/scripts/records.js index d427d6c..ad1bf50 100644 --- a/public/scripts/records.js +++ b/public/scripts/records.js @@ -174,15 +174,15 @@ function FriendlyRecord({type, record}) { function RecordsByName({ name, recordSets }) { return html` -
-

${name}

-
+
+

${name}

+
${Object.entries(recordSets).map( ([type, records]) => { return html` -
-

${recordTypeNames[type]}

-
    +
    +

    ${recordTypeNames[type]}

    +
      ${records.map(record => html`
    • <${FriendlyRecord} type=${type} record=${record}/>
    • `)}
    diff --git a/public/styles/zone.css b/public/styles/zone.css index 81a761b..2fb3023 100644 --- a/public/styles/zone.css +++ b/public/styles/zone.css @@ -22,55 +22,64 @@ h2 { margin: 0; flex-grow: 1; } + header > :not(:last-of-type) { margin-right: 2ch; } -.zone-content h3, .zone-content h4 { - margin: 0; - font-weight: normal; - font-size: 1rem; - width: 30%; -} - -.zone-content article { - display: flex; - flex-wrap: wrap; -} - -.zone-content > article > div { - flex-grow: 1; -} - -.zone-content > article { +.zone-content article.rrsets-per-name { + display: grid; + grid-template-columns: repeat(6, 1fr); + grid-gap: 2ch; 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)); } -.zone-content article > *{ - margin-right: 2ch; +.zone-content h3.record-name, +.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; margin: 0; list-style-type: none; + grid-column: 2 / 5; } -.zone-content article dl { +.zone-content ul.rrset-rdata dl { display: grid; grid-template: auto / max-content 1fr; } -.zone-content article dd { +.zone-content ul.rrset-rdata dd { margin: 0; } -.zone-content article dt span { +.zone-content ul.rrset-rdata dt span { display: inline-block; background-color: rgb(var(--color-hightlight-1)); padding: 0.1em 0.5em;