mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2025-01-23 02:04:33 +09:00
Code

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

Browse Source
This commit is contained in:
NoriDev 2024-10-15 13:33:33 +09:00
parent a16c9a12bc
commit 2e02e1b754
2 changed files with 58 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG_CHERRYPICK.md
View File

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

95
packages/frontend/src/components/MkSuperMenu.vue
View File

@ -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;
> .text {
white-space: normal;
padding-right: 12px;
flex-shrink: 1;
> .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;
}
}
> .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;
}
}