adjust decoration

yuriha-chan · Dec 23, 2023 · 381e926 · 381e926
1 parent 867f296
commit 381e926
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/packages/frontend/src/pages/settings/avatar-decoration.decoration.vue b/packages/frontend/src/pages/settings/avatar-decoration.decoration.vue
@@ -9,6 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	@click="emit('click')"
 >
 	<div :class="$style.name"><MkCondensedLine :minScale="0.5">{{ decoration.name }}</MkCondensedLine></div>
+	<div :class="$style.description"><Mfm :text="decoration.description"/></div>
 	<MkAvatar style="width: 60px; height: 60px;" :user="$i" :decorations="[{ url: decoration.url, angle, flipH, offsetX, offsetY }]" forceShowDecoration/>
 	<i v-if="decoration.roleIdsThatCanBeUsedThisDecoration.length > 0 && !$i.roles.some(r => decoration.roleIdsThatCanBeUsedThisDecoration.includes(r.id))" :class="$style.lock" class="ti ti-lock"></i>
 </div>
@@ -66,4 +67,10 @@ const emit = defineEmits<{
 	bottom: 12px;
 	right: 12px;
 }
+
+.description {
+	position: relative;
+	z-index: 10;
+	margin-bottom: 20px;
+}
 </style>
diff --git a/packages/frontend/src/pages/settings/avatar-decoration.dialog.vue b/packages/frontend/src/pages/settings/avatar-decoration.dialog.vue
@@ -23,10 +23,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkRange v-model="angle" continuousUpdate :min="-0.5" :max="0.5" :step="0.025" :textConverter="(v) => `${Math.floor(v * 360)}°`">
 					<template #label>{{ i18n.ts.angle }}</template>
 				</MkRange>
-				<MkRange v-model="offsetX" continuousUpdate :min="-0.25" :max="0.25" :step="0.025" :textConverter="(v) => `${Math.floor(v * 100)}%`">
+				<MkRange v-model="offsetX" continuousUpdate :min="-0.04" :max="0.04" :step="0.001" :textConverter="(v) => `${Math.round(v * 1000)/10}%`">
 					<template #label>X {{ i18n.ts.position }}</template>
 				</MkRange>
-				<MkRange v-model="offsetY" continuousUpdate :min="-0.25" :max="0.25" :step="0.025" :textConverter="(v) => `${Math.floor(v * 100)}%`">
+				<MkRange v-model="offsetY" continuousUpdate :min="-0.04" :max="0.04" :step="0.001" :textConverter="(v) => `${Math.round(v * 1000)/10}%`">
 					<template #label>Y {{ i18n.ts.position }}</template>
 				</MkRange>
 				<MkSwitch v-model="flipH">

diff --git a/packages/frontend/src/pages/settings/avatar-decoration.vue b/packages/frontend/src/pages/settings/avatar-decoration.vue
@@ -146,7 +146,7 @@ definePageMetadata({
 
 .decorations {
 	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
 	grid-gap: 12px;
 }
 </style>