don't show buttons if mobile

This commit is contained in:
ThatOneCalculator 2023-03-24 00:42:36 -07:00
parent a1efc980d4
commit 765c61bf52
No known key found for this signature in database
GPG key ID: 8703CACD01000000

View file

@ -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',