From cef601b212b226ddaa31b288302bf679531e552b Mon Sep 17 00:00:00 2001
From: Zephyruso <176294927+Zephyruso@users.noreply.github.com>
Date: Tue, 17 Dec 2024 17:04:09 +0800
Subject: [PATCH] fix: card style for mobile in two columns

---
 src/components/proxies/ProxyNodeCard.vue | 20 +++++++++++++-------
 src/components/rules/RuleCard.vue        | 12 ++++++++----
 src/store/settings.ts                    |  2 +-
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/components/proxies/ProxyNodeCard.vue b/src/components/proxies/ProxyNodeCard.vue
index 16d1ca1f..a1e0490a 100644
--- a/src/components/proxies/ProxyNodeCard.vue
+++ b/src/components/proxies/ProxyNodeCard.vue
@@ -3,7 +3,7 @@
     ref="cardRef"
     :class="
       twMerge(
-        'flex min-h-9 cursor-pointer flex-wrap items-center justify-end gap-1 rounded-md bg-base-200 p-2 text-xs sm:gap-2',
+        'relative flex min-h-9 cursor-pointer flex-wrap items-center justify-end gap-1 rounded-md bg-base-200 p-2',
         active ? 'bg-primary text-primary-content' : 'sm:hover:bg-base-300',
         isTruncated && 'tooltip tooltip-bottom',
       )
@@ -18,15 +18,23 @@
     />
     <div
       :class="
-        twMerge('flex-1 whitespace-nowrap text-xs md:text-sm', truncateProxyName && 'truncate')
+        twMerge(
+          'flex-1 whitespace-nowrap text-xs md:text-sm',
+          truncateProxyName && 'truncate',
+          tightMode && 'pr-6',
+        )
       "
       ref="nameRef"
     >
       {{ node.name }}
     </div>
-    <span>{{ typeDescription }}</span>
+    <span
+      :class="`text-xs tracking-tight ${tightMode ? 'absolute bottom-0 right-0 scale-75' : ''}`"
+    >
+      {{ typeDescription }}
+    </span>
     <LatencyTag
-      :class="isLatencyTesting ? 'animate-pulse' : ''"
+      :class="[isLatencyTesting ? 'animate-pulse' : '', tightMode ? 'absolute right-2 top-1' : '']"
       :name="node.name"
       @click.stop="handlerLatencyTest"
     />
@@ -71,14 +79,12 @@ const typeDescription = computed(() => {
   const type = typeFormatter(node.value.type)
 
   if (node.value.udp) {
-    if (isSmallScreen.value && twoColumnNodeForMobile.value) {
-      return `${type}:udp`
-    }
     return `${type} | udp`
   }
 
   return type
 })
+const tightMode = computed(() => isSmallScreen.value && twoColumnNodeForMobile.value)
 const handlerLatencyTest = async () => {
   if (isLatencyTesting.value) return
 
diff --git a/src/components/rules/RuleCard.vue b/src/components/rules/RuleCard.vue
index 1235ab37..33876f76 100644
--- a/src/components/rules/RuleCard.vue
+++ b/src/components/rules/RuleCard.vue
@@ -1,8 +1,12 @@
 <template>
-  <div class="card mb-1 flex-row gap-1 p-2 text-sm">
-    <span>{{ rule.type }}</span>
-    <span v-if="rule.payload"> : {{ rule.payload }} </span>
-    <span>-></span>
+  <div class="card mb-1 block p-2 text-sm">
+    <span class="mr-1">{{ rule.type }}</span>
+    <span
+      class="mr-1"
+      v-if="rule.payload"
+      >: {{ rule.payload }}</span
+    >
+    <span class="mr-1">-></span>
     <span class="text-primary">{{ rule.proxy }}</span>
   </div>
 </template>
diff --git a/src/store/settings.ts b/src/store/settings.ts
index 1e1cf88a..97b6be12 100644
--- a/src/store/settings.ts
+++ b/src/store/settings.ts
@@ -33,7 +33,7 @@ export const proxySortType = useStorage<PROXY_SORT_TYPE>(
   PROXY_SORT_TYPE.DEFAULT,
 )
 export const automaticDisconnection = useStorage('config/automatic-disconnection', true)
-export const twoColumnNodeForMobile = useStorage('config/two-column-node-for-mobile', true)
+export const twoColumnNodeForMobile = useStorage('config/two-column-for-mobile', true)
 export const truncateProxyName = useStorage('config/truncate-proxy-name', true)
 export const proxyPreviewType = useStorage('config/proxy-preview-type', PROXY_PREVIEW_TYPE.AUTO)
 export const hideUnavailableProxies = useStorage('config/hide-unavailable-proxies', false)