Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 35 additions & 5 deletions InteractiveHtmlBom/web/ibom.css
Original file line number Diff line number Diff line change
Expand Up @@ -168,10 +168,22 @@ canvas:active {
}

.fileinfo {
display: block;
width: 100%;
max-width: 1000px;
border: none;
padding: 3px;
padding: 6px;
box-sizing: border-box;
}

.fileinfo tbody {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 0.2rem 2rem;
}

.fileinfo tr {
display: contents;
}

.fileinfo .title {
Expand All @@ -180,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;
Expand Down Expand Up @@ -616,7 +645,7 @@ mark.highlight {
#top {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
justify-content: center;
align-items: center;
}

Expand Down Expand Up @@ -662,6 +691,7 @@ mark.highlight {
#fileinfodiv {
flex: 20rem 1 0;
overflow: auto;
container-type: inline-size;
}

#bomcontrols {
Expand Down
19 changes: 7 additions & 12 deletions InteractiveHtmlBom/web/ibom.html
Original file line number Diff line number Diff line change
Expand Up @@ -60,20 +60,15 @@
<table class="fileinfo">
<tbody>
<tr>
<td id="title" class="title" style="width: 70%">
Title
<td id="board-info">
<div id="title" class="title metadata-field">Title</div>
<div id="company" class="metadata-field">Company</div>
</td>
<td id="revision" class="title" style="width: 30%">
Revision
</td>
</tr>
<tr>
<td id="company">
Company
</td>
<td id="filedate">
Date
<td id="revision-info">
<div id="revision" class="title metadata-field">Revision</div>
<div id="filedate" class="metadata-field">Date</div>
</td>
<td id="variant" class="title metadata-field" hidden></td>
</tr>
</tbody>
</table>
Expand Down
16 changes: 16 additions & 0 deletions InteractiveHtmlBom/web/ibom.js
Original file line number Diff line number Diff line change
Expand Up @@ -896,6 +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" && variant.trim() !== "";
variantElement.textContent = hasVariant ? "Variant: " + variant : "";
variantElement.title = variantElement.textContent;
variantElement.hidden = !hasVariant;
if (pcbdata.metadata.title != "") {
document.title = pcbdata.metadata.title + " BOM";
}
Expand Down
Loading