worldcone/cherrypick
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

improve(friendly): Hide the header only in mobile environment

Browse source
This commit is contained in:
NoriDev 2023-02-07 16:38:12 +09:00
parent fa256519fb
commit 396cd5f55c
2 changed files with 3 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
packages/frontend/src/components/global/MkPageHeader.vue
View file

@ -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;

7
packages/frontend/src/pages/timeline.vue
View file

@ -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;