fix(frontend): 모바일 환경에서 제어판의 인디케이터가 잘못된 위치에 표시될 수 있음

kokonect-link · Oct 15, 2024 · 2e02e1b · 2e02e1b
1 parent a16c9a1
commit 2e02e1b
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 38 deletions.
diff --git a/CHANGELOG_CHERRYPICK.md b/CHANGELOG_CHERRYPICK.md
@@ -58,6 +58,7 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2024xx](CHANGE
 - Fix: 노트 상세 페이지의 InstanceTicker에 커서를 올릴 때 마우스 포인터가 올바르게 표시되지 않음
 - Fix: `UI에 흐림 효과 사용` 옵션이 토스트 알림에서 제대로 적용되지 않음
   - 모바일 환경에서만 적용되던 문제를 해결했습니다.
+- Fix: 모바일 환경에서 제어판의 인디케이터가 잘못된 위치에 표시될 수 있음
 
 ---
 

diff --git a/packages/frontend/src/components/MkSuperMenu.vue b/packages/frontend/src/components/MkSuperMenu.vue
@@ -11,18 +11,24 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div class="items">
 			<template v-for="(item, i) in group.items">
 				<a v-if="item.type === 'a'" :href="item.href" :target="item.target" class="_button item" :class="{ danger: item.danger, active: item.active }">
-					<span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span>
-					<span class="text">{{ item.text }}</span>
+					<span>
+						<span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span>
+						<span class="text">{{ item.text }}</span>
+					</span>
 					<span v-if="item.indicated" class="itemIndicator"><i class="_indicatorCircle"></i></span>
 				</a>
 				<button v-else-if="item.type === 'button'" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active" @click="ev => item.action(ev)">
-					<span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span>
-					<span class="text">{{ item.text }}</span>
+					<span>
+						<span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span>
+						<span class="text">{{ item.text }}</span>
+					</span>
 					<span v-if="item.indicated" class="itemIndicator"><i class="_indicatorCircle"></i></span>
 				</button>
 				<MkA v-else :to="item.to" class="_button item" :class="{ danger: item.danger, active: item.active }">
-					<span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span>
-					<span class="text">{{ item.text }}</span>
+					<span>
+						<span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span>
+						<span class="text">{{ item.text }}</span>
+					</span>
 					<span v-if="item.indicated" class="itemIndicator"><i class="_indicatorCircle"></i></span>
 				</MkA>
 			</template>
@@ -84,23 +90,28 @@ defineProps<{
 					color: var(--error);
 				}
 
-				> .icon {
-					width: 32px;
-					margin-right: 2px;
-					flex-shrink: 0;
-					text-align: center;
-					opacity: 0.8;
-				}
+				> span {
+					display: inherit;
+
+					> .icon {
+						width: 32px;
+						margin-right: 2px;
+						flex-shrink: 0;
+						text-align: center;
+						opacity: 0.8;
+					}
 
-				> .text {
-					white-space: normal;
-					padding-right: 12px;
-					flex-shrink: 1;
+					> .text {
+						white-space: normal;
+						padding-right: 12px;
+						flex-shrink: 1;
+					}
 				}
 
         > .itemIndicator {
-          position: absolute;
-          left: 1px;
+          position: relative;
+					top: -10px;
+          left: -72.5px;
           color: var(--navIndicator);
           font-size: 8px;
           animation: blink 1s infinite;
@@ -141,32 +152,40 @@ defineProps<{
 						background: none;
 						color: var(--accent);
 
-						> .icon {
-							background: var(--accentedBg);
+						> span {
+							> .icon {
+								background: var(--accentedBg);
+							}
 						}
 					}
 
-					> .icon {
-						display: grid;
-						place-content: center;
-						margin-right: 0;
-						margin-bottom: 6px;
-						font-size: 1.5em;
-						width: 60px;
-						height: 60px;
-						aspect-ratio: 1;
-						background: var(--panel);
-						border-radius: 100%;
-					}
+					> span {
+						display: initial;
 
-					> .text {
-						padding-right: 0;
-						width: 100%;
-						font-size: 0.8em;
+						> .icon {
+							display: grid;
+							place-content: center;
+							margin-right: 0;
+							margin-bottom: 6px;
+							font-size: 1.5em;
+							width: 60px;
+							height: 60px;
+							aspect-ratio: 1;
+							background: var(--panel);
+							border-radius: 100%;
+						}
+
+						> .text {
+							padding-right: 0;
+							width: 100%;
+							font-size: 0.8em;
+						}
 					}
 
           > .itemIndicator {
-            left: 15px;
+						display: flex;
+						top: -80px;
+            left: -22.5px;
             font-size: 0.8em;
           }
 				}