noxious/client
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Made chat + menu btns responsive

Browse Source
This commit is contained in:
Colin Kallemein 2024-08-21 22:18:20 +02:00
parent 2f80f31a33
commit 4d326f24ac
4 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/gui/Chat.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="w-full min-w-[750px] flex flex-col"> <div class="w-full md:min-w-[350px] max-w-[750px] flex flex-col">
<div ref="chatWindow" class="w-full overflow-auto h-32 mb-5 bg-gray-300/80 rounded-lg border-2 border-solid border-cyan-200" v-show="gameStore.isChatOpen"> <div ref="chatWindow" class="w-full overflow-auto h-32 mb-5 bg-gray-300/80 rounded-lg border-2 border-solid border-cyan-200" v-show="gameStore.isChatOpen">
<div v-for="message in chats" class="flex-col py-2 items-center p-3"> <div v-for="message in chats" class="flex-col py-2 items-center p-3">
<span class="text-ellipsis overflow-hidden whitespace-nowrap text-sdm">{{ message.character.name }}</span> <span class="text-ellipsis overflow-hidden whitespace-nowrap text-sdm">{{ message.character.name }}</span>

2
src/components/gui/Menu.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<ul class="list-none flex gap-2.5 items-center m-0"> <ul class="list-none flex gap-2.5 items-center m-0 max-md:pl-0">
<li class="menu-item group relative" @click="gameStore.toggleChat"> <li class="menu-item group relative" @click="gameStore.toggleChat">
<div class="group-hover:block absolute bottom-16 left-1/2 -translate-x-1/2 w-20 h-6 text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden"> <div class="group-hover:block absolute bottom-16 left-1/2 -translate-x-1/2 w-20 h-6 text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden">
<p class="absolute w-full bottom-0 m-0 text-xs leading-6">Chat</p> <p class="absolute w-full bottom-0 m-0 text-xs leading-6">Chat</p>

6
src/screens/Game.vue
View File

@ -13,11 +13,11 @@
</div> </div>
</div> </div>
<World v-if="isLoaded" :key="gameStore.character?.zoneId" /> <World v-if="isLoaded" :key="gameStore.character?.zoneId" />
<div class="fixed inset-x-0 bottom-0 flex justify-between items-end p-10 pointer-events-none"> <div class="fixed inset-x-0 bottom-0 flex justify-between gap-5 items-end py-10 px-5 xxs:p-10 pointer-events-none max-md:flex-wrap max-md:flex-col-reverse">
<div class="pointer-events-auto"> <div class="pointer-events-auto w-full">
<Chat /> <Chat />
</div> </div>
<div class="pointer-events-auto"> <div class="pointer-events-auto max-xs:m-auto mr-auto">
<Menubar /> <Menubar />
</div> </div>
</div> </div>

6
tailwind.config.js
View File

@ -10,6 +10,12 @@ export default {
'30px': '30px' '30px': '30px'
}, },
screens: { screens: {
'xxs': '350px',
// => @media (min-width: 350px) { ... }
'xs': '480px',
// => @media (min-width: 480px) { ... }
'sm': '640px', 'sm': '640px',
// => @media (min-width: 640px) { ... } // => @media (min-width: 640px) { ... }