fix: feed widget layout issues and add truncation to location names

This commit is contained in:
pa
2026-03-25 23:13:00 +09:00
parent a51b0fd703
commit a7b578e4cf
+63 -36
View File
@@ -45,42 +45,57 @@
</TableCell> </TableCell>
<TableCell class="max-w-0 truncate"> <TableCell class="max-w-0 truncate">
<template v-if="item.type === 'GPS'"> <template v-if="item.type === 'GPS'">
<MapPin class="mr-1 inline-block h-3.5 w-3.5 shrink-0 text-muted-foreground" /> <div class="flex items-center min-w-0">
<UserContextMenu :user-id="item.userId" :state="getFriendState(item.userId)" :location="getFriendLocation(item.userId)"> <MapPin class="mr-1 h-3.5 w-3.5 shrink-0 text-muted-foreground" />
<span class="cursor-pointer" @click="openUser(item.userId)">{{ <UserContextMenu
item.displayName :user-id="item.userId"
}}</span> :state="getFriendState(item.userId)"
</UserContextMenu> :location="getFriendLocation(item.userId)">
<span class="text-muted-foreground"> </span> <span class="shrink-0 cursor-pointer" @click="openUser(item.userId)">{{
<Location item.displayName
class="inline [&>div]:inline-flex" }}</span>
:location="item.location" </UserContextMenu>
:hint="item.worldName" <span class="shrink-0 text-muted-foreground mx-1"> </span>
:grouphint="item.groupName" <div class="min-w-0 flex-1 truncate">
enable-context-menu <Location
disable-tooltip /> :location="item.location"
:hint="item.worldName"
:grouphint="item.groupName"
enable-context-menu
disable-tooltip />
</div>
</div>
</template> </template>
<template v-else-if="item.type === 'Online'"> <template v-else-if="item.type === 'Online'">
<i class="x-user-status online mr-1"></i> <div class="flex items-center min-w-0">
<UserContextMenu :user-id="item.userId" :state="getFriendState(item.userId)" :location="getFriendLocation(item.userId)"> <i class="x-user-status online mr-1 shrink-0"></i>
<span class="cursor-pointer" @click="openUser(item.userId)">{{ <UserContextMenu
item.displayName :user-id="item.userId"
}}</span> :state="getFriendState(item.userId)"
</UserContextMenu> :location="getFriendLocation(item.userId)">
<template v-if="item.location"> <span class="shrink-0 cursor-pointer" @click="openUser(item.userId)">{{
<span class="text-muted-foreground"> </span> item.displayName
<Location }}</span>
class="inline [&>div]:inline-flex" </UserContextMenu>
:location="item.location" <template v-if="item.location">
:hint="item.worldName" <span class="shrink-0 text-muted-foreground"> </span>
:grouphint="item.groupName" <div class="min-w-0 flex-1 truncate">
enable-context-menu <Location
disable-tooltip /> :location="item.location"
</template> :hint="item.worldName"
:grouphint="item.groupName"
enable-context-menu
disable-tooltip />
</div>
</template>
</div>
</template> </template>
<template v-else-if="item.type === 'Offline'"> <template v-else-if="item.type === 'Offline'">
<i class="x-user-status mr-1"></i> <i class="x-user-status mr-1"></i>
<UserContextMenu :user-id="item.userId" :state="getFriendState(item.userId)" :location="getFriendLocation(item.userId)"> <UserContextMenu
:user-id="item.userId"
:state="getFriendState(item.userId)"
:location="getFriendLocation(item.userId)">
<span class="cursor-pointer" @click="openUser(item.userId)">{{ <span class="cursor-pointer" @click="openUser(item.userId)">{{
item.displayName item.displayName
}}</span> }}</span>
@@ -88,16 +103,22 @@
</template> </template>
<template v-else-if="item.type === 'Status'"> <template v-else-if="item.type === 'Status'">
<i class="x-user-status mr-1" :class="statusClass(item.status)"></i> <i class="x-user-status mr-1" :class="statusClass(item.status)"></i>
<UserContextMenu :user-id="item.userId" :state="getFriendState(item.userId)" :location="getFriendLocation(item.userId)"> <UserContextMenu
:user-id="item.userId"
:state="getFriendState(item.userId)"
:location="getFriendLocation(item.userId)">
<span class="cursor-pointer" @click="openUser(item.userId)">{{ <span class="cursor-pointer" @click="openUser(item.userId)">{{
item.displayName item.displayName
}}</span> }}</span>
</UserContextMenu> </UserContextMenu>
<span class="text-muted-foreground"> {{ item.statusDescription }}</span> <span class="text-muted-foreground ml-1"> {{ item.statusDescription }}</span>
</template> </template>
<template v-else-if="item.type === 'Avatar'"> <template v-else-if="item.type === 'Avatar'">
<Box class="mr-1 inline-block h-3.5 w-3.5 shrink-0 text-muted-foreground" /> <Box class="mr-1 inline-block h-3.5 w-3.5 shrink-0 text-muted-foreground" />
<UserContextMenu :user-id="item.userId" :state="getFriendState(item.userId)" :location="getFriendLocation(item.userId)"> <UserContextMenu
:user-id="item.userId"
:state="getFriendState(item.userId)"
:location="getFriendLocation(item.userId)">
<span class="cursor-pointer" @click="openUser(item.userId)">{{ <span class="cursor-pointer" @click="openUser(item.userId)">{{
item.displayName item.displayName
}}</span> }}</span>
@@ -106,7 +127,10 @@
</template> </template>
<template v-else-if="item.type === 'Bio'"> <template v-else-if="item.type === 'Bio'">
<Pencil class="mr-1 inline-block h-3.5 w-3.5 shrink-0 text-muted-foreground" /> <Pencil class="mr-1 inline-block h-3.5 w-3.5 shrink-0 text-muted-foreground" />
<UserContextMenu :user-id="item.userId" :state="getFriendState(item.userId)" :location="getFriendLocation(item.userId)"> <UserContextMenu
:user-id="item.userId"
:state="getFriendState(item.userId)"
:location="getFriendLocation(item.userId)">
<span class="cursor-pointer" @click="openUser(item.userId)">{{ <span class="cursor-pointer" @click="openUser(item.userId)">{{
item.displayName item.displayName
}}</span> }}</span>
@@ -114,7 +138,10 @@
<span class="ml-1 text-muted-foreground">{{ t('dashboard.widget.feed_bio') }}</span> <span class="ml-1 text-muted-foreground">{{ t('dashboard.widget.feed_bio') }}</span>
</template> </template>
<template v-else> <template v-else>
<UserContextMenu :user-id="item.userId" :state="getFriendState(item.userId)" :location="getFriendLocation(item.userId)"> <UserContextMenu
:user-id="item.userId"
:state="getFriendState(item.userId)"
:location="getFriendLocation(item.userId)">
<span class="cursor-pointer" @click="openUser(item.userId)">{{ <span class="cursor-pointer" @click="openUser(item.userId)">{{
item.displayName item.displayName
}}</span> }}</span>