don't show buttons if mobile
This commit is contained in:
parent
a1efc980d4
commit
765c61bf52
1 changed files with 9 additions and 3 deletions
|
@ -13,7 +13,7 @@
|
||||||
>
|
>
|
||||||
<swiper-slide>
|
<swiper-slide>
|
||||||
<div class="_content yweeujhr dms">
|
<div class="_content yweeujhr dms">
|
||||||
<MkButton primary class="start" @click="startUser"><i class="ph-plus ph-bold ph-lg"></i> {{ i18n.ts.startMessaging }}</MkButton>
|
<MkButton primary class="start" v-if="!isMobile" @click="startUser"><i class="ph-plus ph-bold ph-lg"></i> {{ i18n.ts.startMessaging }}</MkButton>
|
||||||
<MkPagination v-slot="{items}" :pagination="dmsPagination">
|
<MkPagination v-slot="{items}" :pagination="dmsPagination">
|
||||||
<MkChatPreview v-for="message in items" :key="message.id" class="yweeujhr message _block" :message="message"/>
|
<MkChatPreview v-for="message in items" :key="message.id" class="yweeujhr message _block" :message="message"/>
|
||||||
</MkPagination>
|
</MkPagination>
|
||||||
|
@ -21,7 +21,7 @@
|
||||||
</swiper-slide>
|
</swiper-slide>
|
||||||
<swiper-slide>
|
<swiper-slide>
|
||||||
<div class="_content yweeujhr groups">
|
<div class="_content yweeujhr groups">
|
||||||
<div class="groupsbuttons">
|
<div v-if="!isMobile" class="groupsbuttons">
|
||||||
<MkButton primary class="start" :link="true" to="/my/groups"><i class="ph-user-circle-gear ph-bold ph-lg"></i> {{ i18n.ts.manageGroups }}</MkButton>
|
<MkButton primary class="start" :link="true" to="/my/groups"><i class="ph-user-circle-gear ph-bold ph-lg"></i> {{ i18n.ts.manageGroups }}</MkButton>
|
||||||
<MkButton primary class="start" @click="startGroup"><i class="ph-plus ph-bold ph-lg"></i> {{ i18n.ts.startMessaging }}</MkButton>
|
<MkButton primary class="start" @click="startGroup"><i class="ph-plus ph-bold ph-lg"></i> {{ i18n.ts.startMessaging }}</MkButton>
|
||||||
</div>
|
</div>
|
||||||
|
@ -37,7 +37,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { markRaw, onMounted, onUnmounted, watch } from 'vue';
|
import { ref, markRaw, onMounted, onUnmounted, watch } from 'vue';
|
||||||
import * as Acct from 'calckey-js/built/acct';
|
import * as Acct from 'calckey-js/built/acct';
|
||||||
import { Virtual } from 'swiper';
|
import { Virtual } from 'swiper';
|
||||||
import { Swiper, SwiperSlide } from 'swiper/vue';
|
import { Swiper, SwiperSlide } from 'swiper/vue';
|
||||||
|
@ -64,6 +64,12 @@ const tabs = ['dms', 'groups'];
|
||||||
let tab = $ref(tabs[0]);
|
let tab = $ref(tabs[0]);
|
||||||
watch($$(tab), () => (syncSlide(tabs.indexOf(tab))));
|
watch($$(tab), () => (syncSlide(tabs.indexOf(tab))));
|
||||||
|
|
||||||
|
const MOBILE_THRESHOLD = 500;
|
||||||
|
const isMobile = ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
isMobile.value = deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD;
|
||||||
|
});
|
||||||
|
|
||||||
const headerActions = $computed(() => [{
|
const headerActions = $computed(() => [{
|
||||||
asFullButton: true,
|
asFullButton: true,
|
||||||
icon: 'ph-plus ph-bold ph-lg',
|
icon: 'ph-plus ph-bold ph-lg',
|
||||||
|
|
Loading…
Reference in a new issue