Tweak styling and layout

src/assets/main.css

@@ -13,7 +13,7 @@ body {
   color: var(--fg-color);
   font-size: 12pt;
   margin: auto;
-  padding: 0.5em;
+  padding: 0 1em;
 }
 
 button {

src/components/DiskInfo.vue

@@ -30,9 +30,9 @@ pre {
   padding: 0.5em 1em 10em;
   box-sizing: border-box;
   overflow: scroll;
-  min-height: 10rem;
+  min-height: 20rem;
-  height: 20rem;
+  height: 40rem;
-  max-height: 20rem;
+  max-height: 40rem;
   background: rgba(255, 255, 255, 0.15);
   color: #c0c0c0;
   border: 1px solid rgba(255, 255, 255, 0.3);

src/components/DiskReader.vue

@@ -6,16 +6,21 @@ const emit = defineEmits<{
   progress: [read: number, total: number]
   success: [data: ArrayBuffer]
   error: [message: string]
+  unload: []
 }>()
 
 const MAX_FILE_SIZE = 1440 * 1024
 
 const fileInput = useTemplateRef('file-input')
 
-async function onOpenClick() {
+async function onLoadClick() {
   fileInput.value?.click()
 }
 
+function onEjectClick() {
+  emit('unload')
+}
+
 async function onFileChange(event: Event) {
   const files = (event.target as HTMLInputElement).files
   if (!files?.length) {
@@ -75,7 +80,8 @@ function readFile(file: File): Promise<ArrayBuffer> {
 <template>
   <div>
     <input id="disk-file" ref="file-input" type="file" @change="onFileChange" />
-    <button type="button" @click="onOpenClick">Open a disk image...</button>
+    <button class="eject" type="button" @click="onEjectClick">Eject</button>
+    <button class="load" type="button" @click="onLoadClick">Load</button>
   </div>
 </template>
 
@@ -83,4 +89,27 @@ function readFile(file: File): Promise<ArrayBuffer> {
 input[type='file'] {
   display: none;
 }
+
+button {
+  min-width: 100px;
+  width: 100px;
+  cursor: pointer;
+}
+
+button.eject {
+  background-color: tomato;
+}
+
+button.load {
+  background-color: chartreuse;
+}
+
+div {
+  display: flex;
+  flex-direction: row;
+  background: #404040;
+  padding: 1em;
+  border: 3px solid gray;
+  gap: 1em;
+}
 </style>

src/components/HexDump.vue

@@ -91,13 +91,12 @@ const hexDump = computed(() => {
 
 <style scoped>
 pre {
-  width: fit-content;
   padding: 0.5em 1em 10em;
   box-sizing: border-box;
   overflow-y: scroll;
-  min-height: 10rem;
+  min-height: 20rem;
-  height: 20rem;
+  height: 40rem;
-  max-height: 20rem;
+  max-height: 40rem;
   background: rgba(255, 255, 255, 0.15);
   color: #c0c0c0;
   border: 1px solid rgba(255, 255, 255, 0.3);

src/components/PlaygroundView.vue

@@ -41,6 +41,14 @@ function onReadProgress(read: number, total: number) {
   diskReadBytes.value = read
   diskTotalBytes.value = total
 }
+
+function onUnload() {
+  diskData.value = new ArrayBuffer(0)
+  diskReadError.value = ''
+  diskReadyState.value = 'empty'
+  diskReadBytes.value = -1
+  diskTotalBytes.value = -1
+}
 </script>
 
 <template>
@@ -60,6 +68,7 @@ function onReadProgress(read: number, total: number) {
         @progress="onReadProgress"
         @start="onReadStart"
         @success="onReadSuccess"
+        @unload="onUnload"
       />
       <div v-if="diskReadyState === 'read-started'">
         {{ diskName }} reading
@@ -75,14 +84,14 @@ function onReadProgress(read: number, total: number) {
       <div v-else>No disk loaded</div>
     </div>
   </section>
-  <section v-if="diskReadyState === 'read-success'">
-    <h2>Disk Hex Dump</h2>
-    <HexDump :buffer="diskData" />
-  </section>
   <section v-if="diskReadyState === 'read-success'">
     <h2>Disk Info</h2>
     <DiskInfo :data="diskData" />
   </section>
+  <section v-if="diskReadyState === 'read-success'">
+    <h2>Disk Hex Dump</h2>
+    <HexDump :buffer="diskData" />
+  </section>
 </template>
 
 <style scoped>