Demo move metadata above file layout

hyparam · May 13, 2024 · 76a0c99 · 76a0c99
1 parent e064efc
commit 76a0c99
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
diff --git a/demo.css b/demo.css
@@ -132,8 +132,11 @@ th, td {
   white-space: pre-wrap;
 }
 
-#layout {
+#filename {
+  font-size: 10pt;
   margin-top: 20px;
+}
+#layout {
   word-break: break-all;
 }
 .layout a {
@@ -143,9 +146,6 @@ th, td {
 .layout a:hover {
   text-decoration: underline;
 }
-.layout > strong {
-  font-size: 10pt;
-}
 .layout div {
   background-color: rgba(0, 0, 0, 0.05);
   border: 1px solid #ccc;

diff --git a/demo.js b/demo.js
@@ -4,6 +4,7 @@ const dropzone = document.getElementById('dropzone')
 const fileInput = document.getElementById('file-input')
 const content = document.getElementById('content')
 const welcome = document.getElementById('welcome')
+const label = document.getElementById('filename')
 
 const layout = document.getElementById('layout')
 const metadataDiv = document.getElementById('metadata')
@@ -124,7 +125,7 @@ async function render(asyncBuffer, metadata, name) {
 }
 
 function renderSidebar(asyncBuffer, metadata, name) {
-  layout.innerHTML = `<strong>${name}</strong>`
+  label.innerText = name
   // render file layout
   layout.appendChild(fileLayout(metadata, asyncBuffer.byteLength))
   // display metadata

diff --git a/index.html b/index.html
@@ -24,8 +24,9 @@ <h2>parquet file reader</h2>
           <li><a href="https://github.com/hyparam/hyparquet">github</a></li>
           <li><a href="https://www.npmjs.com/package/hyparquet">npm</a></li>
         </ul>
-        <div id="layout" class="layout"></div>
+        <div id="filename"></div>
         <div id="metadata" class="layout"></div>
+        <div id="layout" class="layout"></div>
       </nav>
       <div id="content">
         <div id="welcome">