fix: rule card & ctrls style

Zephyruso · Dec 20, 2024 · 529fe0e · 529fe0e
1 parent 613315f
commit 529fe0e
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 9 deletions.
diff --git a/src/components/rules/RuleCard.vue b/src/components/rules/RuleCard.vue
@@ -1,7 +1,7 @@
 <template>
   <div :class="twMerge('card mb-1 gap-1 p-2 text-sm', !rule.payload && 'flex-row gap-0')">
     <div>
-      <span class="mr-2">{{ index }}.</span>
+      <span class="mr-2 inline-block min-w-4 text-center">{{ index }}.</span>
       <span v-if="rule.payload">
         {{ rule.payload }}
       </span>

diff --git a/src/components/rules/RuleProvider.vue b/src/components/rules/RuleProvider.vue
@@ -1,11 +1,9 @@
 <template>
   <div class="card w-full flex-row items-center gap-2 p-1 px-2 text-sm">
     <div class="flex flex-1 flex-col sm:flex-row">
-      <div class="mr-2">{{ index }}.</div>
-      <div class="w-48 flex-1 text-primary">
-        {{ ruleProvider.name }} ({{ ruleProvider.ruleCount }})
-      </div>
-      <div class="flex gap-3">
+      <span class="mr-2 inline-block min-w-4 text-center">{{ index }}.</span>
+      <span class="w-48 flex-1"> {{ ruleProvider.name }} ({{ ruleProvider.ruleCount }}) </span>
+      <div class="flex gap-3 text-slate-500">
         <span>{{ ruleProvider.behavior }}</span>
         <span>{{ ruleProvider.vehicleType }}</span>
         <span>{{ $t('updated') }} {{ fromNow(ruleProvider.updatedAt) }}</span>

diff --git a/src/components/sidebar/ProxiesCtrl.vue b/src/components/sidebar/ProxiesCtrl.vue
@@ -5,7 +5,10 @@
     "
     v-if="configs"
   >
-    <template v-if="proxyProviederList.length">
+    <div
+      :class="twMerge('flex flex-col-reverse gap-2', horizontal && 'flex-row')"
+      v-if="proxyProviederList.length"
+    >
       <div
         role="tablist"
         class="tabs-boxed tabs tabs-sm"
@@ -33,7 +36,7 @@
           {{ $t('updateAllProviders') }}
         </button>
       </div>
-    </template>
+    </div>
     <div class="w-full sm:hidden"></div>
     <div :class="twMerge('flex w-full items-center gap-2', horizontal && 'w-24')">
       <select

diff --git a/src/components/sidebar/RulesCtrl.vue b/src/components/sidebar/RulesCtrl.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="twMerge('flex flex-col gap-2 p-2', horizontal && 'flex-row pb-0')"
+    :class="twMerge('flex flex-col-reverse gap-2 p-2', horizontal && 'flex-row pb-0')"
     v-if="ruleProviderList.length"
   >
     <div