mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-11-27 14:28:53 +09:00
Code

fix(frontend): 네비게이션 메뉴의 하단 프로필 영역이 잘못된 디자인으로 표시됨

Browse Source
This commit is contained in:
NoriDev 2023-10-27 17:47:50 +09:00
parent 2028181015
commit a485fa3e82
2 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG_CHERRYPICK.md
View File

@ -49,6 +49,7 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2023xx](CHANGE
- 특정 조건에서 헤더의 왼쪽에 여백이 발생할 수 있음 - 특정 조건에서 헤더의 왼쪽에 여백이 발생할 수 있음
- 일부 페이지에서 잘못된 디자인이 표시됨 - 일부 페이지에서 잘못된 디자인이 표시됨
- 일부 페이지에서 액션 항목이 존재해도 버튼이 표시되지 않을 수 있음 - 일부 페이지에서 액션 항목이 존재해도 버튼이 표시되지 않을 수 있음
- Fix: 네비게이션 메뉴의 하단 프로필 영역이 잘못된 디자인으로 표시됨
### Server ### Server
- Feat: 연합에서 노트 수정이 반영됨 (libnare/cp-castella#1) - Feat: 연합에서 노트 수정이 반영됨 (libnare/cp-castella#1)

13
packages/frontend/src/ui/_common_/navbar-for-mobile.vue
View File

@ -44,11 +44,13 @@ SPDX-License-Identifier: AGPL-3.0-only
<button v-vibrate="ColdDeviceStorage.get('vibrateSystem') ? 5 : ''" class="_button" :class="$style.post" data-cy-open-post-form @click="os.post"> <button v-vibrate="ColdDeviceStorage.get('vibrateSystem') ? 5 : ''" class="_button" :class="$style.post" data-cy-open-post-form @click="os.post">
<i :class="[$style.postIcon, defaultStore.state.renameTheButtonInPostFormToNya ? 'ti-paw-filled' : 'ti-pencil']" class="ti ti-fw"></i><span style="position: relative;">{{ defaultStore.state.renameTheButtonInPostFormToNya ? i18n.ts.nya : i18n.ts.note }}</span> <i :class="[$style.postIcon, defaultStore.state.renameTheButtonInPostFormToNya ? 'ti-paw-filled' : 'ti-pencil']" class="ti ti-fw"></i><span style="position: relative;">{{ defaultStore.state.renameTheButtonInPostFormToNya ? i18n.ts.nya : i18n.ts.note }}</span>
</button> </button>
<div :class="$style.profile">
<button v-vibrate="ColdDeviceStorage.get('vibrateSystem') ? 5 : ''" class="_button" :class="$style.account" @click="openAccountMenu"> <button v-vibrate="ColdDeviceStorage.get('vibrateSystem') ? 5 : ''" class="_button" :class="$style.account" @click="openAccountMenu">
<MkAvatar :user="$i" :class="$style.avatar"/><MkAcct :class="$style.acct" class="_nowrap" :user="$i"/> <MkAvatar :user="$i" :class="$style.avatar"/><MkAcct :class="$style.acct" class="_nowrap" :user="$i"/>
</button> </button>
</div> </div>
</div> </div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -108,6 +110,7 @@ function more() {
.root { .root {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%;
} }
.top { .top {
@ -159,7 +162,7 @@ function more() {
.bottom { .bottom {
position: sticky; position: sticky;
bottom: 0; bottom: 0;
padding: 20px 0; padding: 20px 0 calc(env(safe-area-inset-bottom) + 25px);
background: var(--X14); background: var(--X14);
-webkit-backdrop-filter: var(--blur, blur(8px)); -webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(8px)); backdrop-filter: var(--blur, blur(8px));
@ -204,6 +207,11 @@ function more() {
width: 32px; width: 32px;
} }
.profile {
display: flex;
margin-top: 16px;
}
.account { .account {
position: relative; position: relative;
display: flex; display: flex;
@ -213,7 +221,6 @@ function more() {
width: 100%; width: 100%;
text-align: left; text-align: left;
box-sizing: border-box; box-sizing: border-box;
margin-top: 16px;
} }
.avatar { .avatar {
@ -293,7 +300,7 @@ function more() {
top: 0; top: 0;
left: 20px; left: 20px;
color: var(--navIndicator); color: var(--navIndicator);
font-size: 8px; font-size: 6px;
animation: blink 1s infinite; animation: blink 1s infinite;
&:has(.itemIndicateValueIcon) { &:has(.itemIndicateValueIcon) {