Adjust sizes for smaller screens

rajesh-rahul · Dec 13, 2024 · ab7392d · ab7392d
1 parent ea56610
commit ab7392d
Show file tree

Hide file tree

Showing 11 changed files with 148 additions and 150 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -36,7 +36,7 @@
 
 <main>
     <TopNav {onFileChange} />
-    <div class="flex h-full w-full justify-around pt-4">
+    <div class="flex h-full w-full justify-around pt-2">
         <LeftBar />
         <div class="flex flex-col">
             <PacketTable />

diff --git a/src/lib/components/AnalyzeSelection.svelte b/src/lib/components/AnalyzeSelection.svelte
@@ -1,10 +1,5 @@
 <script lang="ts">
-    import {
-        app_state,
-        SegmentType,
-        selection_state,
-        type SelectionStateType
-    } from '$lib/AppState.svelte';
+    import { app_state, selection_state, type SelectionStateType } from '$lib/AppState.svelte';
     import { replay } from '$lib/ReplayState.svelte';
     import Button from './ui/button/button.svelte';
     import Label from './ui/label/label.svelte';
@@ -88,53 +83,61 @@
     }
 </script>
 
-<div class="flex flex-col px-4">
-    <div class="flex flex-col justify-around gap-3">
-        <div class="flex items-center">
-            <span class="mb-[2px] pr-2 text-[0.9rem]">Selection Size:</span>
-            {#if selection_state.state.kind !== 'NoSelection'}
-                <span class="font-mono text-[0.94rem]"
-                    >{selection_state.state.endOffset + 1 - selection_state.state.startOffset}</span
-                >
-            {/if}
-        </div>
-        <div class="flex flex-col gap-1.5">
-            <Label class="font-extrabold" for="replay_time">Find Selection</Label>
-            <div class="flex flex-wrap items-center gap-1.5">
+<div class="flex h-[calc(100vh-510px)] flex-col px-4 pt-1">
+    <div class="flex h-full flex-col justify-around gap-2">
+        <div class="flex items-center justify-between">
+            <div class="w-[75px] pr-1">
+                <span class="mb-[2px] text-[0.9rem]">Size:</span>
+                {#if selection_state.state.kind !== 'NoSelection'}
+                    <span class="font-mono text-[0.9rem]"
+                        >{selection_state.state.endOffset +
+                            1 -
+                            selection_state.state.startOffset}</span
+                    >
+                {:else}
+                    <span>{'   '}</span>
+                {/if}
+            </div>
+
+            <div>
                 <Button
                     size="sm"
+                    class="px-1"
                     onclick={() => searchSelection('before')}
-                    disabled={selection_state.state.kind === 'NoSelection'}>Before</Button
+                    disabled={selection_state.state.kind === 'NoSelection'}>Find Before</Button
                 >
                 <Button
                     size="sm"
+                    class="px-1"
                     onclick={() => searchSelection('after')}
-                    disabled={selection_state.state.kind === 'NoSelection'}>After</Button
+                    disabled={selection_state.state.kind === 'NoSelection'}>Find After</Button
                 >
             </div>
         </div>
         <div class="flex flex-col gap-1.5">
             <Label class="font-extrabold" for="replay_time">Actions</Label>
-            <div class="flex flex-wrap items-center gap-1.5">
+            <div class="flex flex-wrap items-center justify-between gap-1.5">
                 <Button
                     size="sm"
+                    class="px-1"
                     onclick={() => decompressStream(selection_state.state)}
-                    disabled={selection_state.state.kind === 'NoSelection'}>Decompress</Button
+                    disabled={selection_state.state.kind === 'NoSelection'}>Unzip</Button
                 >
                 <Button
                     size="sm"
+                    class="px-1"
                     onclick={() => parsePickleStream(selection_state.state)}
                     disabled={selection_state.state.kind === 'NoSelection'}>Unpickle</Button
                 >
                 <Button
                     size="sm"
+                    class="px-1"
                     onclick={() => decompressAndParsePickleStream(selection_state.state)}
-                    disabled={selection_state.state.kind === 'NoSelection'}
-                    >Decompress & Unpickle</Button
+                    disabled={selection_state.state.kind === 'NoSelection'}>Unzip & Unpickle</Button
                 >
             </div>
         </div>
-        <div class="flex flex-col gap-1.5">
+        <div class="flex h-full flex-col gap-1">
             <div>
                 <Label class="font-extrabold" for="replay_time">Analysis Result</Label>
                 <Button
@@ -148,7 +151,7 @@
             </div>
             <Textarea
                 bind:value={app_state.analysisResult}
-                class="h-[calc(100vh-980px)] font-mono"
+                class="h-full font-mono"
                 placeholder="Make a selection and perform one of the actions above. Result will show up here"
             />
         </div>

diff --git a/src/lib/components/DataView.svelte b/src/lib/components/DataView.svelte
@@ -30,38 +30,44 @@
 </script>
 
 <div class="overflow-hidden">
-    <div class="flex items-center">
-        <span class="left-side">UInt8:</span>
-        <div class="mr-2 h-[25px] w-full border-b border-gray-500">
-            <span class="right-side">{errToNull(() => view.getUint8(0))}</span>
+    <div class="flex justify-between gap-1">
+        <div class="flex items-center">
+            <span class="left-side">U8:</span>
+            <div class="h-[25px] w-[65px] border-b border-gray-500">
+                <span class="right-side">{errToNull(() => view.getUint8(0))}</span>
+            </div>
         </div>
-    </div>
-    <div class="flex items-center">
-        <span class="left-side">Int8:</span>
-        <div class="mr-2 h-[25px] w-full border-b border-gray-500">
-            <span class="right-side">{errToNull(() => view.getInt8(0))}</span>
+        <div class="mr-2 flex items-center">
+            <span class="px-2 text-right font-mono text-[0.8rem] font-semibold">I8:</span>
+            <div class="h-[25px] w-[65px] border-b border-gray-500">
+                <span class="right-side">{errToNull(() => view.getInt8(0))}</span>
+            </div>
         </div>
     </div>
-    <div class="flex items-center">
-        <span class="left-side">UInt16:</span>
-        <div class="mr-2 h-[25px] w-full border-b border-gray-500">
-            <span class="right-side">{errToNull(() => view.getUint16(0, true))}</span>
+
+    <div class="flex items-center justify-between">
+        <div class="flex items-center">
+            <span class="left-side">U16:</span>
+            <div class="mr-2 h-[25px] w-[65px] border-b border-gray-500">
+                <span class="right-side">{errToNull(() => view.getUint16(0, true))}</span>
+            </div>
         </div>
-    </div>
-    <div class="flex items-center">
-        <span class="left-side">Int16:</span>
-        <div class="mr-2 h-[25px] w-full border-b border-gray-500">
-            <span class="right-side">{errToNull(() => view.getInt16(0, true))}</span>
+        <div class="flex items-center">
+            <span class="px-2 text-right font-mono text-[0.8rem] font-semibold">I16:</span>
+            <div class="mr-2 h-[25px] w-[65px] border-b border-gray-500">
+                <span class="right-side">{errToNull(() => view.getInt16(0, true))}</span>
+            </div>
         </div>
     </div>
+
     <div class="flex items-center">
-        <span class="left-side">UInt32:</span>
+        <span class="left-side">U32:</span>
         <div class="mr-2 h-[25px] w-full border-b border-gray-500">
             <span class="right-side">{errToNull(() => view.getUint32(0, true))}</span>
         </div>
     </div>
     <div class="flex items-center">
-        <span class="left-side">Int32:</span>
+        <span class="left-side">I32:</span>
         <div class="mr-2 h-[25px] w-full border-b border-gray-500">
             <span class="right-side">{errToNull(() => view.getInt32(0, true))}</span>
         </div>
@@ -75,13 +81,13 @@
         </div>
     </div>
     <div class="flex items-center">
-        <span class="left-side">UInt64:</span>
+        <span class="left-side">U64:</span>
         <div class="mr-2 h-[25px] w-full border-b border-gray-500">
             <span class="right-side">{errToNull(() => view.getBigUint64(0, true))}</span>
         </div>
     </div>
     <div class="flex items-center">
-        <span class="left-side">Int64:</span>
+        <span class="left-side">I64:</span>
         <div class="mr-2 h-[25px] w-full border-b border-gray-500">
             <span class="right-side">{errToNull(() => view.getBigInt64(0, true))}</span>
         </div>
@@ -98,10 +104,10 @@
 
 <style lang="postcss">
     .left-side {
-        @apply block min-w-[70px] px-2 text-right text-[0.9rem] font-semibold;
+        @apply block min-w-[55px] px-2 text-right text-[0.8rem] font-semibold;
     }
 
     .right-side {
-        @apply font-mono text-[0.94rem] text-sm;
+        @apply font-mono text-[0.8rem] text-sm;
     }
 </style>
diff --git a/src/lib/components/FindTool.svelte b/src/lib/components/FindTool.svelte
@@ -111,24 +111,38 @@
     }}
 />
 
-<div class="flex flex-col gap-3 px-4 py-2">
-    <div class="flex flex-col gap-1.5">
-        <Label for="replay_time">Go to Replay Time</Label>
-        <div class="flex items-center gap-1.5">
-            <Input id="replay_time" placeholder="5:25" bind:value={replayTimeValue} />
-            <Button
-                size="sm"
-                class="basis-2/12"
-                disabled={replay.shownPackets.length === 0 || replayTimeValue.length === 0}
-                onclick={() => {
-                    feedbackMsg = findPacketWithReplayTime(replayTimeValue);
-                }}>Go</Button
-            >
+<div class="flex flex-col gap-3 px-3 py-1">
+    <div class="flex gap-2">
+        <div class="flex flex-col gap-1">
+            <Label class="text-[0.8rem]" for="packet_id">Go to Packet ID</Label>
+            <div class="flex items-center gap-1">
+                <Input id="packet_id" placeholder="116037" bind:value={goToPacketIdValue} />
+                <Button
+                    size="sm"
+                    disabled={replay.shownPackets.length === 0 || goToPacketIdValue.length === 0}
+                    onclick={() => (feedbackMsg = findPacketWithId(goToPacketIdValue))}>Go</Button
+                >
+            </div>
+        </div>
+        <div class="flex flex-col gap-1">
+            <Label class="text-[0.8rem]" for="replay_time">Go to Replay Time</Label>
+            <div class="flex items-center gap-1">
+                <Input id="replay_time" placeholder="5:25" bind:value={replayTimeValue} />
+                <Button
+                    size="sm"
+                    class="basis-2/12"
+                    disabled={replay.shownPackets.length === 0 || replayTimeValue.length === 0}
+                    onclick={() => {
+                        feedbackMsg = findPacketWithReplayTime(replayTimeValue);
+                    }}>Go</Button
+                >
+            </div>
         </div>
     </div>
-    <div class="flex flex-col gap-1.5">
-        <Label for="packet_type">Find by Packet Type</Label>
-        <div class="flex items-center gap-1.5">
+
+    <div class="flex flex-col gap-1">
+        <Label class="text-[0.8rem]" for="packet_type">Find by Packet Type</Label>
+        <div class="flex items-center gap-1">
             <Input id="packet_type" placeholder="0x0A or 10" bind:value={packetTypeValue} />
             <Button
                 size="sm"
@@ -144,17 +158,6 @@
             >
         </div>
     </div>
-    <div class="flex flex-col gap-1.5">
-        <Label for="packet_id">Go to Packet ID</Label>
-        <div class="flex items-center gap-1.5">
-            <Input id="packet_id" placeholder="116037" bind:value={goToPacketIdValue} />
-            <Button
-                size="sm"
-                disabled={replay.shownPackets.length === 0 || goToPacketIdValue.length === 0}
-                onclick={() => (feedbackMsg = findPacketWithId(goToPacketIdValue))}>Go</Button
-            >
-        </div>
-    </div>
     <div class="flex h-[1rem] justify-center">
         <p
             class="font-mono text-xs font-bold"

diff --git a/src/lib/components/LeftBar.svelte b/src/lib/components/LeftBar.svelte
@@ -1,43 +1,29 @@
 <script lang="ts">
-    import { Button } from '$lib/components/ui/button';
-    import { replay } from '$lib/ReplayState.svelte';
-    import * as wasm from '$wasm/src_wasm';
     import DataView from './DataView.svelte';
+    import FindTool from './FindTool.svelte';
     import PacketOverview from './PacketOverview.svelte';
-    import ReplayOverview from './ReplayOverview.svelte';
 </script>
 
 <div class="h-full">
-    <div class="flex h-full min-w-[290px] max-w-[300px] flex-col gap-2 px-6">
-        <div class="overflow-hidden rounded border border-gray-600">
-            <div class="flex items-center gap-2 rounded-t bg-primary py-2 text-background">
-                <span class="pl-5 text-lg font-extrabold">Replay Overview</span>
-
-                {#if replay.packets.length > 0}
-                    <Button
-                        size="sm"
-                        variant="link"
-                        class="h-6 py-0 text-primary-foreground"
-                        onclick={() => {
-                            navigator.clipboard.writeText(replay.full_json!);
-                        }}>Copy</Button
-                    >
-                {/if}
+    <div class="flex h-full min-w-[310px] max-w-[300px] flex-col gap-2 px-6">
+        <div class="rounded border border-gray-600">
+            <div class="rounded-t bg-primary py-1 text-background">
+                <span class="pl-5 text-lg font-extrabold">Data View</span>
             </div>
             <div class="py-2">
-                <ReplayOverview />
+                <DataView />
             </div>
         </div>
-        <div class="rounded border border-gray-600">
-            <div class="rounded-t bg-primary py-2 text-background">
-                <span class="pl-5 text-lg font-extrabold">Data View</span>
+        <div class="overflow-hidden rounded border border-gray-600">
+            <div class="rounded-t bg-primary py-1 text-background">
+                <span class="pl-5 text-lg font-extrabold">Find Tool</span>
             </div>
             <div class="py-2">
-                <DataView />
+                <FindTool />
             </div>
         </div>
         <div class="rounded border border-gray-600">
-            <div class="rounded-t bg-primary py-2 text-background">
+            <div class="rounded-t bg-primary py-1 text-background">
                 <span class="pl-5 text-lg font-extrabold">Packet View</span>
             </div>
             <PacketOverview />

diff --git a/src/lib/components/PacketOverview.svelte b/src/lib/components/PacketOverview.svelte
@@ -62,7 +62,7 @@
                 <Table.Head class="w-[7rem] px-4 text-right">Count</Table.Head>
             </Table.Row>
         </Table.Header>
-        <Table.Body class="block h-[calc(100vh-712px)] overflow-y-auto overflow-x-hidden">
+        <Table.Body class="block h-[calc(100vh-660px)] overflow-y-auto overflow-x-hidden">
             {#each replay.packetSummary as pkt}
                 <Table.Row class="">
                     <Table.Cell class="w-[2.7rem] font-medium"

diff --git a/src/lib/components/PacketViewLegend.svelte b/src/lib/components/PacketViewLegend.svelte
@@ -1,5 +1,5 @@
 <div class="flex gap-3 py-2">
-    <span class="font-mono text-lg font-bold">Segments: </span>
+    <span class="font-mono font-bold">Segments: </span>
     <div class="flex items-center gap-2">
         <div class="block h-4 w-4 rounded bg-teal-600"></div>
         <span class="font-mono text-sm">Payload Size</span>

diff --git a/src/lib/components/ReplayOverview.svelte b/src/lib/components/ReplayOverview.svelte
@@ -16,7 +16,7 @@
     });
 </script>
 
-<div class="flex h-[130px] flex-col justify-around">
+<div class="flex h-[100px] flex-col justify-around">
     <div class="flex items-center">
         <span class="left-side">Tank:</span>
         <span class="right-side">{replay.json?.playerVehicle}</span>
@@ -43,10 +43,10 @@
 
 <style lang="postcss">
     .left-side {
-        @apply block min-w-[75px] px-2 text-right text-[0.9rem] font-semibold;
+        @apply block min-w-[75px] px-2 text-right text-[0.7rem] font-semibold;
     }
 
     .right-side {
-        @apply font-mono text-[0.94rem];
+        @apply font-mono text-[0.8rem];
     }
 </style>