mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-18 22:33:50 +02:00
refactor css
This commit is contained in:
@@ -1,9 +1,11 @@
|
||||
<template>
|
||||
<Dialog
|
||||
:open="setAvatarStylesDialog.visible"
|
||||
@update:open="(open) => {
|
||||
if (!open) closeSetAvatarStylesDialog();
|
||||
}">
|
||||
@update:open="
|
||||
(open) => {
|
||||
if (!open) closeSetAvatarStylesDialog();
|
||||
}
|
||||
">
|
||||
<DialogContent class="x-dialog sm:max-w-100">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{{ t('dialog.set_avatar_styles.header') }}</DialogTitle>
|
||||
@@ -11,61 +13,61 @@
|
||||
|
||||
<template v-if="setAvatarStylesDialog.visible">
|
||||
<div>
|
||||
<span>{{ t('dialog.set_avatar_styles.primary_style') }}</span>
|
||||
<span>{{ t('dialog.set_avatar_styles.primary_style') }}</span>
|
||||
<br />
|
||||
<Select
|
||||
:model-value="setAvatarStylesDialog.primaryStyle"
|
||||
@update:modelValue="(v) => updateDialog({ primaryStyle: v === SELECT_CLEAR_VALUE ? '' : v })">
|
||||
<SelectTrigger size="sm" style="display: inline-flex">
|
||||
<SelectValue :placeholder="t('dialog.set_avatar_styles.select_style')" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem :value="SELECT_CLEAR_VALUE">{{ t('dialog.gallery_select.none') }}</SelectItem>
|
||||
<SelectItem
|
||||
v-for="(style, index) in setAvatarStylesDialog.availableAvatarStyles"
|
||||
:key="index"
|
||||
:value="style">
|
||||
{{ style }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<Select
|
||||
:model-value="setAvatarStylesDialog.primaryStyle"
|
||||
@update:modelValue="(v) => updateDialog({ primaryStyle: v === SELECT_CLEAR_VALUE ? '' : v })">
|
||||
<SelectTrigger size="sm" style="display: inline-flex">
|
||||
<SelectValue :placeholder="t('dialog.set_avatar_styles.select_style')" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem :value="SELECT_CLEAR_VALUE">{{ t('dialog.gallery_select.none') }}</SelectItem>
|
||||
<SelectItem
|
||||
v-for="(style, index) in setAvatarStylesDialog.availableAvatarStyles"
|
||||
:key="index"
|
||||
:value="style">
|
||||
{{ style }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<div>
|
||||
<span>{{ t('dialog.set_avatar_styles.secondary_style') }}</span>
|
||||
<br />
|
||||
<Select
|
||||
:model-value="setAvatarStylesDialog.secondaryStyle"
|
||||
@update:modelValue="(v) => updateDialog({ secondaryStyle: v === SELECT_CLEAR_VALUE ? '' : v })">
|
||||
<SelectTrigger size="sm" style="display: inline-flex">
|
||||
<SelectValue :placeholder="t('dialog.set_avatar_styles.select_style')" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem :value="SELECT_CLEAR_VALUE">{{ t('dialog.gallery_select.none') }}</SelectItem>
|
||||
<SelectItem
|
||||
v-for="(style, index) in setAvatarStylesDialog.availableAvatarStyles"
|
||||
:key="index"
|
||||
:value="style">
|
||||
{{ style }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span>{{ t('dialog.set_avatar_styles.secondary_style') }}</span>
|
||||
<br />
|
||||
<Select
|
||||
:model-value="setAvatarStylesDialog.secondaryStyle"
|
||||
@update:modelValue="(v) => updateDialog({ secondaryStyle: v === SELECT_CLEAR_VALUE ? '' : v })">
|
||||
<SelectTrigger size="sm" style="display: inline-flex">
|
||||
<SelectValue :placeholder="t('dialog.set_avatar_styles.select_style')" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem :value="SELECT_CLEAR_VALUE">{{ t('dialog.gallery_select.none') }}</SelectItem>
|
||||
<SelectItem
|
||||
v-for="(style, index) in setAvatarStylesDialog.availableAvatarStyles"
|
||||
:key="index"
|
||||
:value="style">
|
||||
{{ style }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<div style="font-size: 12px">{{ t('dialog.set_world_tags.author_tags') }}</div>
|
||||
|
||||
<div style="font-size: 12px">{{ t('dialog.set_world_tags.author_tags') }}</div>
|
||||
|
||||
<InputGroupTextareaField
|
||||
:model-value="setAvatarStylesDialog.authorTags"
|
||||
:autosize="{ minRows: 2, maxRows: 5 }"
|
||||
:rows="2"
|
||||
placeholder=""
|
||||
style="margin-top: 10px"
|
||||
input-class="resize-none"
|
||||
@update:modelValue="(v) => updateDialog({ authorTags: v })" />
|
||||
<InputGroupTextareaField
|
||||
:model-value="setAvatarStylesDialog.authorTags"
|
||||
:autosize="{ minRows: 2, maxRows: 5 }"
|
||||
:rows="2"
|
||||
placeholder=""
|
||||
style="margin-top: 10px"
|
||||
input-class="resize-none"
|
||||
@update:modelValue="(v) => updateDialog({ authorTags: v })" />
|
||||
</template>
|
||||
|
||||
<DialogFooter>
|
||||
@@ -199,5 +201,3 @@
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@@ -72,7 +72,7 @@
|
||||
v-for="avatar in setAvatarTagsDialog.ownAvatars"
|
||||
:key="avatar.id"
|
||||
:class="[
|
||||
'item-width',
|
||||
'w-[335px]',
|
||||
'box-border flex items-center p-1.5 text-[13px] cursor-pointer hover:rounded-[25px_5px_5px_25px]'
|
||||
]"
|
||||
@click="showAvatarDialog(avatar.id)">
|
||||
@@ -343,9 +343,3 @@
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.item-width {
|
||||
width: 335px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -536,7 +536,7 @@
|
||||
}}</span>
|
||||
<template v-if="upcomingCalenderEvents.length > 0">
|
||||
<br />
|
||||
<div class="grid-view events-row">
|
||||
<div class="grid-view flex flex-wrap gap-4 overflow-y-auto max-h-[360px] py-2.5">
|
||||
<GroupCalendarEventCard
|
||||
v-for="value in upcomingCalenderEvents"
|
||||
:key="value.id"
|
||||
@@ -557,7 +557,7 @@
|
||||
}}</span>
|
||||
<template v-if="pastCalenderEvents.length > 0">
|
||||
<br />
|
||||
<div class="grid-view events-row">
|
||||
<div class="grid-view flex flex-wrap gap-4 overflow-y-auto max-h-[360px] py-2.5">
|
||||
<GroupCalendarEventCard
|
||||
v-for="value in pastCalenderEvents"
|
||||
:key="value.id"
|
||||
@@ -2035,19 +2035,3 @@
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.time-group-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
overflow: visible;
|
||||
}
|
||||
.events-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
overflow-y: auto;
|
||||
max-height: 360px;
|
||||
padding: 9px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user