imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

Removed global overflow on modals, added it back to objects modal

Browse Source
This commit is contained in:
Colin Kallemein 2024-07-21 20:48:06 +02:00
parent 31ed582a5b
commit 5140e205ad
2 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/utilities/Modal.vue
View File

@ -9,7 +9,7 @@
</button> </button>
</div> </div>
</div> </div>
<div class="overflow-auto grow"> <div class="overflow-hidden grow">
<slot name="modalBody" /> <slot name="modalBody" />
<img v-if="isResizable" src="/assets/icons/resize-icon.svg" alt="resize" class="absolute bottom-0 right-0 w-5 h-5 cursor-nwse-resize invert-[60%]" @mousedown="startResize" /> <img v-if="isResizable" src="/assets/icons/resize-icon.svg" alt="resize" class="absolute bottom-0 right-0 w-5 h-5 cursor-nwse-resize invert-[60%]" @mousedown="startResize" />
</div> </div>

30
src/components/utilities/zoneEditor/partials/Objects.vue
View File

@ -17,25 +17,27 @@
</div> </div>
</template> </template>
<template #modalBody> <template #modalBody>
<div class="m-4"> <div class="flex flex-col h-full p-4">
<div class="mb-4 flex flex-wrap gap-2"> <div class="mb-4 flex flex-wrap gap-2">
<button v-for="tag in uniqueTags" :key="tag" @click="toggleTag(tag)" class="btn-cyan" :class="{ 'opacity-50': !selectedTags.includes(tag) }"> <button v-for="tag in uniqueTags" :key="tag" @click="toggleTag(tag)" class="btn-cyan" :class="{ 'opacity-50': !selectedTags.includes(tag) }">
{{ tag }} {{ tag }}
</button> </button>
</div> </div>
<div class="flex justify-between flex-wrap gap-2.5 items-center"> <div class=" h-full overflow-auto">
<div v-for="(object, index) in filteredObjects" :key="index" class="max-w-1/4 inline-block"> <div class="flex justify-between flex-wrap gap-2.5 items-center">
<img <div v-for="(object, index) in filteredObjects" :key="index" class="max-w-1/4 inline-block">
class="border-2 border-solid max-w-full" <img
:src="`${config.server_endpoint}/assets/objects/${object.id}.png`" class="border-2 border-solid max-w-full"
alt="Object" :src="`${config.server_endpoint}/assets/objects/${object.id}.png`"
@click="zoneEditorStore.setSelectedObject(object)" alt="Object"
:class="{ @click="zoneEditorStore.setSelectedObject(object)"
'cursor-pointer transition-all duration-300': true, :class="{
'border-cyan shadow-lg scale-105': zoneEditorStore.selectedObject?.id === object.id, 'cursor-pointer transition-all duration-300': true,
'border-transparent hover:border-gray-300': zoneEditorStore.selectedObject?.id !== object.id 'border-cyan shadow-lg scale-105': zoneEditorStore.selectedObject?.id === object.id,
}" 'border-transparent hover:border-gray-300': zoneEditorStore.selectedObject?.id !== object.id
/> }"
/>
</div>
</div> </div>
</div> </div>
</div> </div>