diff --git a/src/assets/main.css b/src/assets/main.css index 2732c2f..b611b2e 100644 --- a/src/assets/main.css +++ b/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 { diff --git a/src/components/DiskInfo.vue b/src/components/DiskInfo.vue index f1aa175..acd5cbc 100644 --- a/src/components/DiskInfo.vue +++ b/src/components/DiskInfo.vue @@ -30,9 +30,9 @@ pre { padding: 0.5em 1em 10em; box-sizing: border-box; overflow: scroll; - min-height: 10rem; - height: 20rem; - max-height: 20rem; + min-height: 20rem; + height: 40rem; + max-height: 40rem; background: rgba(255, 255, 255, 0.15); color: #c0c0c0; border: 1px solid rgba(255, 255, 255, 0.3); diff --git a/src/components/DiskReader.vue b/src/components/DiskReader.vue index 523b455..0b60456 100644 --- a/src/components/DiskReader.vue +++ b/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 { @@ -83,4 +89,27 @@ function readFile(file: File): Promise { 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; +} diff --git a/src/components/HexDump.vue b/src/components/HexDump.vue index 62aa4ef..fab831e 100644 --- a/src/components/HexDump.vue +++ b/src/components/HexDump.vue @@ -91,13 +91,12 @@ const hexDump = computed(() => {