fix: improve styling

antfu-collective · Apr 6, 2023 · a527b97 · a527b97
1 parent 0d7b67f
commit a527b97
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 7 deletions.
diff --git a/src/client/components/Badge.vue b/src/client/components/Badge.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="text-10px whitespace-nowrap px-2 py-0.5 mx-1 rounded">
+  <span class="text-11px whitespace-nowrap px-1 leading-1.6em rounded">
     <slot />
   </span>
 </template>
diff --git a/src/client/logic/utils.ts b/src/client/logic/utils.ts
@@ -1,6 +1,8 @@
 import { root } from './state'
 
 export function msToTime(ms: number) {
+  if (ms <= 0.5)
+    return ''
   if (ms < 2000)
     return `${ms}ms`
   const seconds = +(ms / 1000).toFixed(1)

diff --git a/src/client/pages/index/module.vue b/src/client/pages/index/module.vue
@@ -12,7 +12,7 @@ const id = useRouteQuery<string | undefined>('id')
 const data = ref(id.value ? await rpc.getIdInfo(id.value, inspectSSR.value) : undefined)
 const index = useRouteQuery('index') as Ref<string>
 const currentIndex = computed(() => +index.value ?? (data.value?.transforms.length || 1) - 1 ?? 0)
-const panelSize = useLocalStorage('vite-inspect-module-panel-size', '20')
+const panelSize = useLocalStorage('vite-inspect-module-panel-size', '10')
 
 async function refetch() {
   if (id.value)
@@ -71,34 +71,45 @@ getHot().then((hot) => {
     class="flex overflow-hidden"
   >
     <Splitpanes class="h-full of-hidden" @resize="panelSize = $event[0].size">
-      <Pane :size="panelSize" min-size="5" class="flex flex-col border-r border-main overflow-y-auto">
+      <Pane :size="panelSize" min-size="10" class="flex flex-col border-r border-main overflow-y-auto">
         <div
           class="border-b border-main px-3 py-2 text-center text-sm tracking-widest text-gray-400"
         >
           {{ inspectSSR ? 'SSR ' : '' }}TRANSFORM STACK
         </div>
         <template v-for="tr, idx of data.transforms" :key="tr.name">
           <button
-            class="block border-b border-main px-3 py-2 text-left font-mono text-sm !outline-none"
-            :class="currentIndex === idx ? 'bg-main bg-opacity-10' : ''"
+            class="border-b border-main px-2 py-2 text-left font-mono text-xs !outline-none"
+            flex="~ gap-1 wrap" items-center
+            :class="
+              currentIndex === idx
+                ? 'bg-main bg-opacity-10'
+                : tr.result === data.transforms[idx - 1]?.result
+                  ? 'op50'
+                  : ''
+            "
             @click="index = idx.toString()"
           >
             <span :class="currentIndex === idx ? 'font-bold' : ''">
               <PluginName :name="tr.name" />
             </span>
-            <span class="ml-2 text-xs opacity-50">{{ msToTime(tr.end - tr.start) }}</span>
             <Badge
               v-if="tr.result === data.transforms[idx - 1]?.result"
               class="bg-orange-400/10 text-orange-400"
               v-text="'no change'"
             />
-            <Badge v-if="idx === 0" class="bg-light-blue-400/10 text-light-blue-400" v-text="'load'" />
+            <Badge
+              v-if="idx === 0"
+              class="bg-light-blue-400/10 text-light-blue-400"
+              v-text="'load'"
+            />
             <Badge
               v-if="tr.order && tr.order !== 'normal'"
               class="bg-rose-400/10 text-rose-400"
               :title="tr.order.includes('-') ? `Using object hooks ${tr.order}` : tr.order"
               v-text="tr.order"
             />
+            <span text-xs opacity-50 flex-auto text-right>{{ msToTime(tr.end - tr.start) }}</span>
           </button>
         </template>
       </Pane>