enhance(client): モバイルでUIにぼかし効果をオフにすると、トースト通知の背景が不透明に表示されるように
This commit is contained in:
parent
fedd12c168
commit
9aecfe5ed9
|
@ -29,6 +29,7 @@
|
|||
- 타임라인에 노트의 답글을 표시하는 옵션의 기본값을 켜짐으로 설정
|
||||
|
||||
### Client
|
||||
- 모바일에서 UI 흐림 효과를 끄면 토스트 알림의 배경이 불투명하게 표시되도록
|
||||
- Fix: (Friendly) 플로팅 메뉴를 길게 눌렀을 때 프로필 이미지를 드래그 할 수 있는 문제
|
||||
- Fix: 네트워크 트래픽이 10MB/s를 초과하면 네트워크 통계 위젯의 그래프가 잘못 출력되는 문제
|
||||
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
:leaveToClass="defaultStore.state.animation ? $style.transition_toast_leaveTo : ''"
|
||||
appear @afterLeave="emit('closed')"
|
||||
>
|
||||
<div v-if="showing" class="_acrylic" :class="$style.root" :style="{ zIndex }">
|
||||
<div v-if="showing" class="_acrylic" :class="[$style.root, { [$style.reduceBlurEffect]: !defaultStore.state.useBlurEffect }]" :style="{ zIndex }">
|
||||
<div style="padding: 16px 24px;">
|
||||
{{ message }}
|
||||
</div>
|
||||
|
@ -55,8 +55,7 @@ onMounted(() => {
|
|||
left: 0;
|
||||
right: 0;
|
||||
top: 50px;
|
||||
margin: 0 auto;
|
||||
margin-top: 16px;
|
||||
margin: 16px auto 0;
|
||||
min-width: 300px;
|
||||
max-width: calc(100% - 32px);
|
||||
width: min-content;
|
||||
|
@ -65,5 +64,11 @@ onMounted(() => {
|
|||
overflow: clip;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
&.reduceBlurEffect {
|
||||
background: var(--panel);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
:leaveToClass="defaultStore.state.animation ? $style.transition_toast_leaveTo : ''"
|
||||
appear @afterLeave="emit('closed')"
|
||||
>
|
||||
<div v-if="showing" class="_acrylic" :class="$style.root" :style="{ zIndex }">
|
||||
<div v-if="showing" class="_acrylic" :class="[$style.root, { [$style.reduceBlurEffect]: !defaultStore.state.useBlurEffect }]" :style="{ zIndex }">
|
||||
<CPAvatar :class="$style.avatar" :user="$i"/>
|
||||
<div style="padding: 16px 24px;">
|
||||
{{ message }}
|
||||
|
@ -58,8 +58,7 @@ onMounted(() => {
|
|||
left: 0;
|
||||
right: 0;
|
||||
top: 50px;
|
||||
margin: 0 auto;
|
||||
margin-top: 16px;
|
||||
margin: 16px auto 0;
|
||||
min-width: 300px;
|
||||
max-width: calc(100% - 32px);
|
||||
width: min-content;
|
||||
|
@ -68,11 +67,14 @@ onMounted(() => {
|
|||
overflow: clip;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.5s, transform 0.5s;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
width: 100%;
|
||||
top: 0px;
|
||||
top: 0;
|
||||
|
||||
&.reduceBlurEffect {
|
||||
background: var(--panel);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue