fix(warnings): update styles (#1)

* fix(warnings): update styles * Update .gitignore * Sneak in lil change --------- Co-authored-by: Joshua Chen <[email protected]>
jc-verse · Jul 30, 2024 · e59f762 · e59f762
1 parent 64538b3
commit e59f762
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 13 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,4 @@ data/*
 !data/.keep
 sidebars
 docs/*.js
+*.txt
diff --git a/bun.lockb b/bun.lockb
diff --git a/docs/warnings.css b/docs/warnings.css
@@ -3,31 +3,39 @@ body {
 }
 
 header {
-  height: 2em;
+  height: 2rem;
   display: flex;
   flex-direction: column;
-  align-items: center;
   justify-content: center;
 }
 
 nav ul {
   display: flex;
-  gap: 2em;
+  gap: 2rem;
 }
 
 main {
   display: flex;
-  margin: 1em;
-  height: calc(100vh - 5em);
+  margin: 1rem 0 0 0;
 }
 
 select {
-  min-width: 300px;
-  height: 100%;
+  flex: none;
+  position: sticky;
+  top: 1rem;
+  padding: 0.4rem;
+  height: calc(100vh - 5rem);
+  overflow-y: auto;
+}
+
+option {
+  margin: 0;
+  padding: 0;
 }
 
 ul {
   list-style: none;
+  padding-inline-start: 1rem;
 }
 
 summary {
@@ -36,13 +44,13 @@ summary {
 }
 
 pre {
-  margin: 0;
+  margin: 0 0 0.4rem 1rem;
 }
 
 #note {
-  position: absolute;
+  position: fixed;
   top: 0;
   right: 0;
-  padding: 10px;
+  padding: 0.4rem;
   background-color: lightgray;
 }
diff --git a/docs/warnings.html b/docs/warnings.html
@@ -10,8 +10,8 @@
     <header>
       <nav>
         <ul>
-          <li><a href="/">The graph</a></li>
-          <li><a href="/warning-info">Warning docs</a></li>
+          <li><a href="/mdn-graph">The graph</a></li>
+          <li><a href="/mdn-graph/warning-info">Warning docs</a></li>
         </ul>
       </nav>
     </header>

diff --git a/src/client/warnings.ts b/src/client/warnings.ts
@@ -80,7 +80,9 @@ function createTree(
     for (const li of ul.children as HTMLCollectionOf<HTMLLIElement>)
       (li.children[0] as HTMLDetailsElement).open = true;
   }
-  root.append(ul);
+  if (ul.childElementCount > 0) {
+    root.append(ul);
+  }
   return count;
 }