Fix layout, styles of admonition blocks with labels (#326)

Author: recrwplay

src/css/labels.css

@@ -14,8 +14,8 @@ div.labels {
   flex-wrap: wrap;
 }
 
-.admonitionblock > div.labels {
-  padding: 1rem 1rem 0.75rem;
+.admonitionblock div.labels {
+  padding: 0.5rem 0 1rem;
 }
 
 .header-label-container > div.labels {
@@ -62,16 +62,16 @@ h1 > .header-label {
   margin-bottom: 0.2rem;
 }
 
-.has-label {
+.paragraph.has-label {
   padding-left: 0.4rem;
   border-left: 2px solid rgba(var(--colors-baltic-60));
 }
 
-.has-label:has(> .labels > .label--new) {
+.paragraph.has-label:has(> .labels > .label--new) {
   border-left-color: var(--success-color);
 }
 
-.has-label:has(> .labels > .label--deprecated) {
+.paragraph.has-label:has(> .labels > .label--deprecated) {
   border-left-color: var(--deprecated-color);
 }
 

src/js/60-docs-roles.js

@@ -140,7 +140,7 @@ document.addEventListener('DOMContentLoaded', function () {
     // no need to do anything if we found only undefined roles
     if (labels.length === 0) return
 
-    const labelsLocation = (roleDiv.firstElementChild && headings.includes(roleDiv.firstElementChild.nodeName)) ? roleDiv.firstElementChild : roleDiv
+    let labelsLocation = (roleDiv.firstElementChild && headings.includes(roleDiv.firstElementChild.nodeName)) ? roleDiv.firstElementChild : roleDiv
     const labelsDiv = createElement('div', 'labels')
 
     for (const label of labels) {
@@ -154,6 +154,12 @@ document.addEventListener('DOMContentLoaded', function () {
       }
     }
 
+    console.log(roleDiv.classList)
+
+    if (roleDiv.classList.contains('admonitionblock')) {
+      labelsLocation = roleDiv.querySelector('td.content')
+    }
+
     if (roleDiv.nodeName === 'H1' || headings.includes(roleDiv.firstElementChild.nodeName)) {
       labelsLocation.append(labelsDiv)
       labelsLocation.classList.add('header-label-container')