fix: card style for mobile in two columns

Zephyruso · Dec 17, 2024 · cef601b · cef601b
1 parent e041f7b
commit cef601b
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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)