From e8f150c6eba93ca07b3ab3ac59471f51d2f98ed7 Mon Sep 17 00:00:00 2001 From: Kostya Tytelmaier Date: Mon, 28 Sep 2026 01:42:45 +0300 Subject: [PATCH 1/3] Display board variant in the BOM header --- InteractiveHtmlBom/web/ibom.css | 38 +++++++++++++++++++++++++++++++- InteractiveHtmlBom/web/ibom.html | 5 +++-- InteractiveHtmlBom/web/ibom.js | 7 ++++++ 3 files changed, 47 insertions(+), 3 deletions(-) diff --git a/InteractiveHtmlBom/web/ibom.css b/InteractiveHtmlBom/web/ibom.css index d3f16c3e..3e05baef 100644 --- a/InteractiveHtmlBom/web/ibom.css +++ b/InteractiveHtmlBom/web/ibom.css @@ -174,7 +174,16 @@ canvas:active { padding: 3px; } -.fileinfo .title { +.fileinfo #title { + width: 70%; +} + +.fileinfo #revision { + width: 30%; +} + +.fileinfo .title, +#variant { font-size: 20pt; font-weight: bold; } @@ -664,6 +673,33 @@ mark.highlight { overflow: auto; } +#fileinfodiv.has-variant { + display: flex; + align-items: flex-start; +} + +#fileinfodiv.has-variant .fileinfo { + flex: 2 1 40rem; + min-width: 0; + max-width: none; + box-sizing: border-box; +} + +#fileinfodiv.has-variant #title, +#fileinfodiv.has-variant #revision { + width: 50%; +} + +#variant { + flex: 1 1 20rem; + box-sizing: border-box; + min-width: 0; + padding: 6px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + #bomcontrols { display: flex; flex-direction: row-reverse; diff --git a/InteractiveHtmlBom/web/ibom.html b/InteractiveHtmlBom/web/ibom.html index 69fd7771..f442513c 100644 --- a/InteractiveHtmlBom/web/ibom.html +++ b/InteractiveHtmlBom/web/ibom.html @@ -60,10 +60,10 @@ - - @@ -77,6 +77,7 @@
+ Title + Revision
+
diff --git a/InteractiveHtmlBom/web/ibom.js b/InteractiveHtmlBom/web/ibom.js index d628d982..70867e02 100644 --- a/InteractiveHtmlBom/web/ibom.js +++ b/InteractiveHtmlBom/web/ibom.js @@ -896,6 +896,13 @@ function populateMetadata() { document.getElementById("revision").innerHTML = "Rev: " + pcbdata.metadata.revision; document.getElementById("company").innerHTML = pcbdata.metadata.company; document.getElementById("filedate").innerHTML = pcbdata.metadata.date; + var variant = pcbdata.metadata.variant; + var variantElement = document.getElementById("variant"); + var hasVariant = typeof variant === "string"; + variantElement.textContent = hasVariant ? "Variant: " + (variant || "Default") : ""; + variantElement.title = variantElement.textContent; + variantElement.hidden = !hasVariant; + document.getElementById("fileinfodiv").classList.toggle("has-variant", hasVariant); if (pcbdata.metadata.title != "") { document.title = pcbdata.metadata.title + " BOM"; } From 70988d2d1cadd99b333b841a86cacac3433790a7 Mon Sep 17 00:00:00 2001 From: Kostya Tytelmaier Date: Mon, 28 Sep 2026 02:02:39 +0300 Subject: [PATCH 2/3] Render variant as a metadata table cell --- InteractiveHtmlBom/web/ibom.css | 27 ++++----------------------- InteractiveHtmlBom/web/ibom.html | 2 +- 2 files changed, 5 insertions(+), 24 deletions(-) diff --git a/InteractiveHtmlBom/web/ibom.css b/InteractiveHtmlBom/web/ibom.css index 3e05baef..92868f1e 100644 --- a/InteractiveHtmlBom/web/ibom.css +++ b/InteractiveHtmlBom/web/ibom.css @@ -182,8 +182,7 @@ canvas:active { width: 30%; } -.fileinfo .title, -#variant { +.fileinfo .title { font-size: 20pt; font-weight: bold; } @@ -673,31 +672,13 @@ mark.highlight { overflow: auto; } -#fileinfodiv.has-variant { - display: flex; - align-items: flex-start; -} - #fileinfodiv.has-variant .fileinfo { - flex: 2 1 40rem; - min-width: 0; max-width: none; - box-sizing: border-box; -} - -#fileinfodiv.has-variant #title, -#fileinfodiv.has-variant #revision { - width: 50%; + table-layout: fixed; } -#variant { - flex: 1 1 20rem; - box-sizing: border-box; - min-width: 0; - padding: 6px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; +#fileinfodiv.has-variant .fileinfo td { + width: 33.333333%; } #bomcontrols { diff --git a/InteractiveHtmlBom/web/ibom.html b/InteractiveHtmlBom/web/ibom.html index f442513c..0e20c155 100644 --- a/InteractiveHtmlBom/web/ibom.html +++ b/InteractiveHtmlBom/web/ibom.html @@ -66,6 +66,7 @@ Revision + @@ -77,7 +78,6 @@ -
From 6b1e8f4b39c182cc0e659d63d7eb56141dc17829 Mon Sep 17 00:00:00 2001 From: Kostya Tytelmaier Date: Thu, 1 Oct 2026 12:39:03 +0300 Subject: [PATCH 3/3] Make variant header responsive and hide unnamed variants --- InteractiveHtmlBom/web/ibom.css | 49 ++++++++++++++++++++------------ InteractiveHtmlBom/web/ibom.html | 20 +++++-------- InteractiveHtmlBom/web/ibom.js | 15 ++++++++-- 3 files changed, 50 insertions(+), 34 deletions(-) diff --git a/InteractiveHtmlBom/web/ibom.css b/InteractiveHtmlBom/web/ibom.css index 92868f1e..cbd0e38e 100644 --- a/InteractiveHtmlBom/web/ibom.css +++ b/InteractiveHtmlBom/web/ibom.css @@ -168,18 +168,22 @@ canvas:active { } .fileinfo { + display: block; width: 100%; - max-width: 1000px; border: none; - padding: 3px; + padding: 6px; + box-sizing: border-box; } -.fileinfo #title { - width: 70%; +.fileinfo tbody { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + gap: 0.2rem 2rem; } -.fileinfo #revision { - width: 30%; +.fileinfo tr { + display: contents; } .fileinfo .title { @@ -188,13 +192,30 @@ canvas:active { } .fileinfo td { + display: block; + /* Wrap at a usable column width, independently of the metadata text length. */ + flex: 1 1 16rem; + min-width: 0; + max-width: 100%; + padding: 0; +} + +.fileinfo .metadata-field { overflow: hidden; white-space: nowrap; - max-width: 1px; - width: 50%; text-overflow: ellipsis; } +.fileinfo [hidden] { + display: none; +} + +@container (max-width: 52rem) { + .fileinfo .title { + font-size: 18pt; + } +} + .bom { border-collapse: collapse; font-family: Consolas, "DejaVu Sans Mono", Monaco, monospace; @@ -624,7 +645,7 @@ mark.highlight { #top { display: flex; flex-wrap: wrap; - justify-content: flex-end; + justify-content: center; align-items: center; } @@ -670,15 +691,7 @@ mark.highlight { #fileinfodiv { flex: 20rem 1 0; overflow: auto; -} - -#fileinfodiv.has-variant .fileinfo { - max-width: none; - table-layout: fixed; -} - -#fileinfodiv.has-variant .fileinfo td { - width: 33.333333%; + container-type: inline-size; } #bomcontrols { diff --git a/InteractiveHtmlBom/web/ibom.html b/InteractiveHtmlBom/web/ibom.html index 0e20c155..a6e5a6d2 100644 --- a/InteractiveHtmlBom/web/ibom.html +++ b/InteractiveHtmlBom/web/ibom.html @@ -60,21 +60,15 @@ - - - - - - - +
- Title + +
Title
+
Company
 - Revision -
- Company - - Date + +
Revision
+
Date
diff --git a/InteractiveHtmlBom/web/ibom.js b/InteractiveHtmlBom/web/ibom.js index 70867e02..9173095e 100644 --- a/InteractiveHtmlBom/web/ibom.js +++ b/InteractiveHtmlBom/web/ibom.js @@ -896,13 +896,22 @@ function populateMetadata() { document.getElementById("revision").innerHTML = "Rev: " + pcbdata.metadata.revision; document.getElementById("company").innerHTML = pcbdata.metadata.company; document.getElementById("filedate").innerHTML = pcbdata.metadata.date; + ["title", "revision", "company", "date"].forEach(function(field) { + var element = document.getElementById(field === "date" ? "filedate" : field); + var value = pcbdata.metadata[field]; + element.hidden = typeof value !== "string" || value.trim() === ""; + element.title = element.textContent; + }); + document.getElementById("board-info").hidden = + document.getElementById("title").hidden && document.getElementById("company").hidden; + document.getElementById("revision-info").hidden = + document.getElementById("revision").hidden && document.getElementById("filedate").hidden; var variant = pcbdata.metadata.variant; var variantElement = document.getElementById("variant"); - var hasVariant = typeof variant === "string"; - variantElement.textContent = hasVariant ? "Variant: " + (variant || "Default") : ""; + var hasVariant = typeof variant === "string" && variant.trim() !== ""; + variantElement.textContent = hasVariant ? "Variant: " + variant : ""; variantElement.title = variantElement.textContent; variantElement.hidden = !hasVariant; - document.getElementById("fileinfodiv").classList.toggle("has-variant", hasVariant); if (pcbdata.metadata.title != "") { document.title = pcbdata.metadata.title + " BOM"; }