Button alignments

This commit is contained in:
Natsumi
2026-01-12 09:25:21 +13:00
parent 1dc80617fa
commit 2a31a1f988
13 changed files with 91 additions and 83 deletions
+4 -3
View File
@@ -16,12 +16,13 @@
><br /><br /> ><br /><br />
</template> </template>
<span <span
><span style="color: var(--el-color-primary)">PC: </span ><span class="x-tag-platform-pc">PC: </span
>{{ props.instance.platforms.standalonewindows }}</span >{{ props.instance.platforms.standalonewindows }}</span
><br /> ><br />
<span <span
><span style="color: var(--el-color-success)">Android: </span ><span class="x-tag-platform-quest">Android: </span>{{ props.instance.platforms.android }}</span
>{{ props.instance.platforms.android }}</span ><br />
<span><span>iOS: </span>{{ props.instance.platforms.ios }}</span
><br /> ><br />
<span>{{ t('dialog.user.info.instance_game_version') }} {{ props.instance.gameServerVersion }}</span <span>{{ t('dialog.user.info.instance_game_version') }} {{ props.instance.gameServerVersion }}</span
><br /> ><br />
+7 -3
View File
@@ -210,10 +210,14 @@
} }
} }
function translateAccessType(accessTypeName) { function translateAccessType(accessTypeNameRaw) {
const key = accessTypeLocaleKeyMap[accessTypeName]; const key = accessTypeLocaleKeyMap[accessTypeNameRaw];
if (!key) { if (!key) {
return accessTypeName; return accessTypeNameRaw;
}
if (accessTypeNameRaw === 'groupPublic' || accessTypeNameRaw === 'groupPlus') {
const groupKey = accessTypeLocaleKeyMap['group'];
return t(groupKey) + ' ' + t(key);
} }
return t(key); return t(key);
} }
+4
View File
@@ -103,6 +103,10 @@
if (!key) { if (!key) {
return accessTypeNameRaw; return accessTypeNameRaw;
} }
if (accessTypeNameRaw === 'groupPublic' || accessTypeNameRaw === 'groupPlus') {
const groupKey = accessTypeLocaleKeyMap['group'];
return t(groupKey) + ' ' + t(key);
}
return t(key); return t(key);
} }
@@ -560,7 +560,6 @@
openExternalLink, openExternalLink,
openFolderGeneric, openFolderGeneric,
replaceVrcPackageUrl, replaceVrcPackageUrl,
textToHex,
timeToText timeToText
} from '../../../shared/utils'; } from '../../../shared/utils';
import { import {
@@ -358,7 +358,7 @@
<InviteYourself :location="room.tag" style="margin-left: 5px" /> <InviteYourself :location="room.tag" style="margin-left: 5px" />
<TooltipWrapper side="top" content="Refresh player count"> <TooltipWrapper side="top" content="Refresh player count">
<Button <Button
class="rounded-full w-6 h-6 text-xs text-muted-foreground hover:text-foreground" class="rounded-full ml-1 w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
size="icon" size="icon"
variant="outline" variant="outline"
@click="refreshInstancePlayerCount(room.tag)" @click="refreshInstancePlayerCount(room.tag)"
@@ -614,40 +614,40 @@
<div v-else class="extra">-</div> <div v-else class="extra">-</div>
</div> </div>
</div> </div>
<div class="x-friend-item" style="width: 350px; cursor: default"> <div class="inline-flex justify-between w-full">
<div class="x-friend-item" style="cursor: default; width: 50%">
<div class="detail"> <div class="detail">
<span class="name">{{ t('dialog.group.info.url') }}</span> <span class="name">{{ t('dialog.group.info.url') }}</span>
<span class="extra" <span class="extra"
>{{ groupDialog.ref.$url }} >{{ groupDialog.ref.$url }}
<TooltipWrapper side="top" :content="t('dialog.group.info.url_tooltip')"> <TooltipWrapper side="top" :content="t('dialog.group.info.url_tooltip')">
<Button <Button
class="rounded-full text-xs" class="rounded-full ml-1 text-xs"
size="icon-sm" size="icon-sm"
variant="outline" variant="outline"
style="margin-left: 5px"
@click="copyToClipboard(groupDialog.ref.$url)" @click="copyToClipboard(groupDialog.ref.$url)"
><i class="ri-file-copy-line"></i ><i class="ri-file-copy-line"></i
></Button> </TooltipWrapper ></Button> </TooltipWrapper
></span> ></span>
</div> </div>
</div> </div>
<div class="x-friend-item" style="width: 350px; cursor: default"> <div class="x-friend-item w-1/2" style="cursor: default; width: 50%">
<div class="detail"> <div class="detail">
<span class="name">{{ t('dialog.group.info.id') }}</span> <span class="name">{{ t('dialog.group.info.id') }}</span>
<span class="extra" <span class="extra"
>{{ groupDialog.id }} >{{ groupDialog.id }}
<TooltipWrapper side="top" :content="t('dialog.group.info.id_tooltip')"> <TooltipWrapper side="top" :content="t('dialog.group.info.id_tooltip')">
<Button <Button
class="rounded-full text-xs" class="rounded-full ml-1 text-xs"
size="icon-sm" size="icon-sm"
variant="outline" variant="outline"
style="margin-left: 5px"
@click="copyToClipboard(groupDialog.id)" @click="copyToClipboard(groupDialog.id)"
><i class="ri-file-copy-line"></i ><i class="ri-file-copy-line"></i
></Button> </TooltipWrapper ></Button> </TooltipWrapper
></span> ></span>
</div> </div>
</div> </div>
</div>
<div <div
v-if="groupDialog.ref.membershipStatus === 'member'" v-if="groupDialog.ref.membershipStatus === 'member'"
style="width: 100%; margin-top: 10px; border-top: 1px solid #e4e7ed14"> style="width: 100%; margin-top: 10px; border-top: 1px solid #e4e7ed14">
@@ -1171,7 +1171,6 @@
openExternalLink, openExternalLink,
refreshInstancePlayerCount, refreshInstancePlayerCount,
removeFromArray, removeFromArray,
textToHex,
userImage, userImage,
userStatusClass userStatusClass
} from '../../../shared/utils'; } from '../../../shared/utils';
@@ -1903,6 +1902,6 @@
gap: 16px; gap: 16px;
overflow-y: auto; overflow-y: auto;
max-height: 360px; max-height: 360px;
padding: 10px 0; padding: 9px 0;
} }
</style> </style>
@@ -38,7 +38,7 @@
side="top" side="top"
:content="t('dialog.user.info.refresh_instance_info')" :content="t('dialog.user.info.refresh_instance_info')"
><Button ><Button
class="rounded-full w-6 h-6 text-xs text-muted-foreground hover:text-foreground" class="rounded-full ml-1 w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
size="icon" size="icon"
variant="outline" variant="outline"
@click="refreshInstancePlayerCount(userDialog.$location.tag)" @click="refreshInstancePlayerCount(userDialog.$location.tag)"
@@ -503,10 +503,9 @@
<span class="extra"> <span class="extra">
<span v-text="userDialog.$homeLocationName"></span> <span v-text="userDialog.$homeLocationName"></span>
<Button <Button
class="rounded-full text-xs ml-1" class="rounded-full ml-1 text-xs"
size="icon-sm" size="icon-sm"
variant="outline" variant="outline"
style="margin-left: 5px"
@click.stop="resetHome()" @click.stop="resetHome()"
><i class="ri-delete-bin-line"></i> ><i class="ri-delete-bin-line"></i>
</Button> </Button>
@@ -522,7 +521,7 @@
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger as-child> <DropdownMenuTrigger as-child>
<Button <Button
class="rounded-full text-xs" class="rounded-full ml-1 text-xs"
size="icon-sm" size="icon-sm"
variant="outline" variant="outline"
@click.stop @click.stop
@@ -351,7 +351,7 @@
side="top" side="top"
:content="t('dialog.world.instances.refresh_instance_info')"> :content="t('dialog.world.instances.refresh_instance_info')">
<Button <Button
class="rounded-full w-6 h-6 text-xs text-muted-foreground hover:text-foreground" class="rounded-full ml-1 w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
size="icon" size="icon"
variant="outline" variant="outline"
@click="refreshInstancePlayerCount(room.tag)" @click="refreshInstancePlayerCount(room.tag)"
@@ -785,7 +785,6 @@
openFolderGeneric, openFolderGeneric,
refreshInstancePlayerCount, refreshInstancePlayerCount,
replaceVrcPackageUrl, replaceVrcPackageUrl,
textToHex,
timeToText, timeToText,
userImage, userImage,
userStatusClass userStatusClass
+4 -4
View File
@@ -566,11 +566,11 @@
"age_gated_instances": "Age Gated Instances", "age_gated_instances": "Age Gated Instances",
"nicknames": "Memo Nicknames", "nicknames": "Memo Nicknames",
"sort_favorite_by": "Sort Favorites by", "sort_favorite_by": "Sort Favorites by",
"sort_favorite_by_name": "name", "sort_favorite_by_name": "Name",
"sort_favorite_by_date": "date", "sort_favorite_by_date": "Date",
"sort_instance_users_by": "Sort Instance Users by", "sort_instance_users_by": "Sort Instance Users by",
"sort_instance_users_by_time": "time", "sort_instance_users_by_time": "Time",
"sort_instance_users_by_alphabet": "alphabetical", "sort_instance_users_by_alphabet": "Alphabetical",
"table_max_size": "Table Max Size", "table_max_size": "Table Max Size",
"table_page_sizes": "Table Page Sizes", "table_page_sizes": "Table Page Sizes",
"table_page_sizes_error": "Page size must be a number between 1 and 1000", "table_page_sizes_error": "Page size must be a number between 1 and 1000",
+3
View File
@@ -71,6 +71,7 @@
v-loading="isSearchWorldLoading" v-loading="isSearchWorldLoading"
:label="t('view.search.world.header')" :label="t('view.search.world.header')"
style="min-height: 60px"> style="min-height: 60px">
<div class="inline-flex justify-between mb-4 w-full">
<Select <Select
:model-value="searchWorldCategoryIndex" :model-value="searchWorldCategoryIndex"
@update:modelValue="handleSearchWorldCategorySelect" @update:modelValue="handleSearchWorldCategorySelect"
@@ -93,6 +94,7 @@
<Checkbox v-model="searchWorldLabs" /> <Checkbox v-model="searchWorldLabs" />
<span>{{ t('view.search.world.community_lab') }}</span> <span>{{ t('view.search.world.community_lab') }}</span>
</label> </label>
</div>
<div class="x-friend-list" style="min-height: 500px"> <div class="x-friend-list" style="min-height: 500px">
<div <div
v-for="world in searchWorldResults" v-for="world in searchWorldResults"
@@ -161,6 +163,7 @@
:loading="userDialog.isAvatarsLoading" :loading="userDialog.isAvatarsLoading"
size="small" size="small"
:icon="Refresh" :icon="Refresh"
class="ml-1"
circle circle
@click="refreshUserDialogAvatars"></el-button> @click="refreshUserDialogAvatars"></el-button>
</TooltipWrapper> </TooltipWrapper>
@@ -80,7 +80,7 @@
<span class="name">{{ t('view.settings.appearance.appearance.sort_favorite_by') }}</span> <span class="name">{{ t('view.settings.appearance.appearance.sort_favorite_by') }}</span>
<RadioGroup <RadioGroup
:model-value="sortFavorites ? 'true' : 'false'" :model-value="sortFavorites ? 'true' : 'false'"
class="gap-2" class="gap-2 flex"
style="margin-top: 8px" style="margin-top: 8px"
@update:modelValue="handleSortFavoritesRadio"> @update:modelValue="handleSortFavoritesRadio">
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
@@ -101,7 +101,7 @@
<span class="name">{{ t('view.settings.appearance.appearance.sort_instance_users_by') }}</span> <span class="name">{{ t('view.settings.appearance.appearance.sort_instance_users_by') }}</span>
<RadioGroup <RadioGroup
:model-value="instanceUsersSortAlphabetical ? 'true' : 'false'" :model-value="instanceUsersSortAlphabetical ? 'true' : 'false'"
class="gap-2" class="gap-2 flex"
style="margin-top: 8px" style="margin-top: 8px"
@update:modelValue="handleInstanceUsersSortAlphabeticalRadio"> @update:modelValue="handleInstanceUsersSortAlphabeticalRadio">
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
@@ -182,7 +182,7 @@
<span class="name">{{ t('view.settings.appearance.timedate.time_format') }}</span> <span class="name">{{ t('view.settings.appearance.timedate.time_format') }}</span>
<RadioGroup <RadioGroup
:model-value="dtHour12 ? 'true' : 'false'" :model-value="dtHour12 ? 'true' : 'false'"
class="gap-2" class="gap-2 flex"
style="margin-top: 8px" style="margin-top: 8px"
@update:modelValue="handleDtHour12Radio"> @update:modelValue="handleDtHour12Radio">
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
@@ -237,7 +237,7 @@
}}</SelectItem> }}</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
<el-icon style="padding: 5px"><ArrowRight /></el-icon> <el-icon style="margin: 5px"><ArrowRight /></el-icon>
<Select <Select
:model-value="sidebarSortMethod2" :model-value="sidebarSortMethod2"
:disabled="!sidebarSortMethod1" :disabled="!sidebarSortMethod1"
@@ -270,7 +270,7 @@
}}</SelectItem> }}</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
<el-icon style="padding: 5px"><ArrowRight /></el-icon> <el-icon style="margin: 5px"><ArrowRight /></el-icon>
<Select <Select
:model-value="sidebarSortMethod3" :model-value="sidebarSortMethod3"
:disabled="!sidebarSortMethod2" :disabled="!sidebarSortMethod2"
@@ -220,7 +220,7 @@
<RadioGroup <RadioGroup
:model-value="autoStateChangeNoFriends ? 'true' : 'false'" :model-value="autoStateChangeNoFriends ? 'true' : 'false'"
:disabled="!autoStateChangeEnabled" :disabled="!autoStateChangeEnabled"
class="gap-2" class="gap-2 flex"
style="margin-top: 8px" style="margin-top: 8px"
@update:modelValue="handleAutoStateChangeNoFriendsRadio"> @update:modelValue="handleAutoStateChangeNoFriendsRadio">
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
@@ -280,7 +280,7 @@
</div> </div>
<div class="options-container" style="margin-top: 45px; border-top: 1px solid #eee; padding-top: 30px"> <div class="options-container" style="margin-top: 45px; border-top: 1px solid #eee; padding-top: 30px">
<span class="header">{{ t('view.settings.general.legal_notice.header') }}</span> <span class="header">{{ t('view.settings.general.legal_notice.header') }}</span>
<div class="options-container-item"> <div class="options-container-item" style="display: block">
<p> <p>
&copy; 2019-2025 &copy; 2019-2025
<a class="x-link" @click="openExternalLink('https://github.com/pypy-vrc')">pypy</a> &amp; <a class="x-link" @click="openExternalLink('https://github.com/pypy-vrc')">pypy</a> &amp;
@@ -1,6 +1,6 @@
<template> <template>
<!--//- Pictures | Screenshot Helper--> <!--//- Pictures | Screenshot Helper-->
<div class="options-container"> <div class="options-container" style="margin-top: 0">
<span class="header">{{ t('view.settings.advanced.advanced.screenshot_helper.header') }}</span> <span class="header">{{ t('view.settings.advanced.advanced.screenshot_helper.header') }}</span>
<div class="options-container-item"> <div class="options-container-item">
<span class="name">{{ t('view.settings.advanced.advanced.screenshot_helper.description') }}</span> <span class="name">{{ t('view.settings.advanced.advanced.screenshot_helper.description') }}</span>
@@ -46,7 +46,7 @@
<RadioGroup <RadioGroup
:model-value="openVRAlways ? 'true' : 'false'" :model-value="openVRAlways ? 'true' : 'false'"
:disabled="!openVR" :disabled="!openVR"
class="gap-2" class="gap-2 flex"
style="margin-top: 8px" style="margin-top: 8px"
@update:modelValue="handleOpenVRAlwaysRadio"> @update:modelValue="handleOpenVRAlwaysRadio">
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
@@ -64,7 +64,7 @@
<RadioGroup <RadioGroup
:model-value="overlaybutton ? 'true' : 'false'" :model-value="overlaybutton ? 'true' : 'false'"
:disabled="!openVR || !overlayWrist" :disabled="!openVR || !overlayWrist"
class="gap-2" class="gap-2 flex"
style="margin-top: 8px" style="margin-top: 8px"
@update:modelValue="handleOverlayButtonRadio"> @update:modelValue="handleOverlayButtonRadio">
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">