Merge pull request #2 from LibertyDSNP/ui_changes

minor ui changes
LibertyDSNP · Aug 15, 2024 · 9e75b9a · 9e75b9a
2 parents ccfe448 + f4e6152
commit 9e75b9a
Showing 1 changed file with 61 additions and 22 deletions.
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -118,29 +118,56 @@
 	<h1>Multiformat Multibase Inspector (Multihash and More)</h1>
 
 	<label for="input-hash">Enter a Multibase string or a 0x prefixed hex Multiformat value:</label>
-	<input type="text" id="input-multiformat" bind:value={inputMultiformat} />
-	<button on:click={decodeInput}>Decode</button>
+	<input type="text" id="input-multiformat" bind:value={inputMultiformat} on:input={decodeInput} />
 
 	{#if hasResult}
 		<div>
 			<h2>Decoded Multiformat</h2>
 			{#if decodedMultiformat}
-				<p>Multibase Encoding: {decodedMultiformat.multibase}</p>
-				<p>
-					Multicodec Name: {decodedMultiformat.multicodecName} ({decodedMultiformat.multicodecCode})
-				</p>
-				<p>Multicodec Tag: {decodedMultiformat.multicodecTag}</p>
-				{#if decodedMultiformat.ipldCode}
-					<p>IPLD Codec: {decodedMultiformat.ipldName} ({decodedMultiformat.ipldCode})</p>
-					<p>CID Hash Algorithm: {decodedMultiformat.hashName} ({decodedMultiformat.hashCode})</p>
-				{/if}
-				{#if decodedMultiformat.digest}
-					<p>Digest: {decodedMultiformat ? '0x' + toHex(decodedMultiformat.digest) : 'Unknown'}</p>
-					<p>Length: {decodedMultiformat.length}</p>
-				{:else if decodedMultiformat.bytes}
-					<p>Bytes: {'0x' + toHex(decodedMultiformat.bytes)}</p>
-					<p>Length: {decodedMultiformat.bytes.length}</p>
-				{/if}
+				<table>
+					<tr>
+						<td>Multibase Encoding</td>
+						<td>{decodedMultiformat.multibase}</td>
+					</tr>
+					<tr>
+						<td>Multicodec Name</td>
+						<td>{decodedMultiformat.multicodecName} ({decodedMultiformat.multicodecCode})</td>
+					</tr>
+					<tr>
+						<td>Multicodec Tag</td>
+						<td>{decodedMultiformat.multicodecTag}</td>
+					</tr>
+
+					{#if decodedMultiformat.ipldCode}
+						<tr>
+							<td>IPLD Codec</td>
+							<td>{decodedMultiformat.ipldName} ({decodedMultiformat.ipldCode})</td>
+						</tr>
+						<tr>
+							<td>CID Hash Algorithm</td>
+							<td>{decodedMultiformat.hashName} ({decodedMultiformat.hashCode})</td>
+						</tr>
+					{/if}
+					{#if decodedMultiformat.digest}
+						<tr>
+							<td>Digest</td>
+							<td>{decodedMultiformat ? '0x' + toHex(decodedMultiformat.digest) : 'Unknown'}</td>
+						</tr>
+						<tr>
+							<td>Length</td>
+							<td>{decodedMultiformat.length}</td>
+						</tr>
+					{:else if decodedMultiformat.bytes}
+						<tr>
+							<td>Bytes</td>
+							<td>{'0x' + toHex(decodedMultiformat.bytes)}</td>
+						</tr>
+						<tr>
+							<td>Length</td>
+							<td>{decodedMultiformat.bytes.length}</td>
+						</tr>
+					{/if}
+				</table>
 			{:else if error}
 				<p>Error: {error}</p>
 			{/if}
@@ -162,13 +189,25 @@
 
 	input {
 		width: 100%;
-	}
-
-	input,
-	button {
 		font-size: 1rem;
 		padding: 0.5rem 1rem;
 		margin-bottom: 1rem;
 		box-sizing: border-box;
 	}
+
+	table {
+		width: 100%;
+	}
+
+	table,
+	th,
+	td {
+		border: 1px solid black;
+		border-collapse: collapse;
+		padding: 5px;
+	}
+
+	td:nth-child(1) {
+		text-align: center;
+	}
 </style>