improve(friendly): Hide the header only in mobile environment
This commit is contained in:
parent
fa256519fb
commit
396cd5f55c
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div v-if="show" ref="el" :class="[$style.root, {[$style.slim]: narrow, [$style.thin]: thin_, [$style.showEl]: showEl && isFriendly && !isDesktop && !isFixedHeader }]" :style="{ background: bg }" @click="onClick">
|
||||
<div v-if="show" ref="el" :class="[$style.root, {[$style.slim]: narrow, [$style.thin]: thin_, [$style.showEl]: showEl && isFriendly && isMobile && !isFixedHeader }]" :style="{ background: bg }" @click="onClick">
|
||||
<div v-if="narrow" :class="$style.buttonsLeft">
|
||||
<MkAvatar v-if="props.displayMyAvatar && $i && !isFriendly" :class="$style.avatar" :user="$i"/>
|
||||
</div>
|
||||
|
@ -51,11 +51,8 @@ import { mainRouter } from '@/router';
|
|||
const isFriendly = ref(miLocalStorage.getItem('ui') === 'friendly');
|
||||
const isFixedHeader = ref(mainRouter.currentRoute.value.name === 'messaging-room' || mainRouter.currentRoute.value.name === 'messaging-room-group');
|
||||
|
||||
const DESKTOP_THRESHOLD = 1100;
|
||||
const MOBILE_THRESHOLD = 500;
|
||||
|
||||
// デスクトップでウィンドウを狭くしたときモバイルUIが表示されて欲しいことはあるので deviceKind === 'desktop' の判定は行わない
|
||||
const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD);
|
||||
const isMobile = ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);
|
||||
window.addEventListener('resize', () => {
|
||||
isMobile.value = deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD;
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
:enter-from-class="$store.state.animation ? $style.transition_new_enterFrom : ''"
|
||||
:leave-to-class="$store.state.animation ? $style.transition_new_leaveTo : ''"
|
||||
>
|
||||
<div v-if="queue > 0 && $store.state.newNoteRecivedNotificationBehavior === 'default'" :class="[$style.new, {[$style.showEl]: showEl && isFriendly && !isDesktop }]"><button class="_buttonPrimary" @click="top()"><i class="ti ti-arrow-up"></i>{{ i18n.ts.newNoteRecived }}</button></div>
|
||||
<div v-if="queue > 0 && $store.state.newNoteRecivedNotificationBehavior === 'default'" :class="[$style.new, {[$style.showEl]: showEl && isFriendly && isMobile }]"><button class="_buttonPrimary" @click="top()"><i class="ti ti-arrow-up"></i>{{ i18n.ts.newNoteRecived }}</button></div>
|
||||
</transition>
|
||||
<transition
|
||||
:enter-active-class="$store.state.animation ? $style.transition_new_enterActive : ''"
|
||||
|
@ -16,7 +16,7 @@
|
|||
:enter-from-class="$store.state.animation ? $style.transition_new_enterFrom : ''"
|
||||
:leave-to-class="$store.state.animation ? $style.transition_new_leaveTo : ''"
|
||||
>
|
||||
<div v-if="queue > 0 && $store.state.newNoteRecivedNotificationBehavior === 'count'" :class="[$style.new, {[$style.showEl]: showEl && isFriendly && !isDesktop }]"><button class="_buttonPrimary" @click="top()"><i class="ti ti-arrow-up"></i><I18n :src="i18n.ts.newNoteRecivedCount" text-tag="span"><template #n>{{ queue }}</template></I18n></button></div>
|
||||
<div v-if="queue > 0 && $store.state.newNoteRecivedNotificationBehavior === 'count'" :class="[$style.new, {[$style.showEl]: showEl && isFriendly && isMobile }]"><button class="_buttonPrimary" @click="top()"><i class="ti ti-arrow-up"></i><I18n :src="i18n.ts.newNoteRecivedCount" text-tag="span"><template #n>{{ queue }}</template></I18n></button></div>
|
||||
</transition>
|
||||
</template>
|
||||
<MkSpacer :content-max="800">
|
||||
|
@ -54,11 +54,8 @@ import { deviceKind } from '@/scripts/device-kind';
|
|||
|
||||
const isFriendly = ref(miLocalStorage.getItem('ui') === 'friendly');
|
||||
|
||||
const DESKTOP_THRESHOLD = 1100;
|
||||
const MOBILE_THRESHOLD = 500;
|
||||
|
||||
// デスクトップでウィンドウを狭くしたときモバイルUIが表示されて欲しいことはあるので deviceKind === 'desktop' の判定は行わない
|
||||
const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD);
|
||||
const isMobile = ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);
|
||||
window.addEventListener('resize', () => {
|
||||
isMobile.value = deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD;
|
||||
|
|
Loading…
Reference in a new issue