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

More Tailwind conversion

Browse Source
This commit is contained in:
Colin Kallemein
2024-07-06 18:47:07 +02:00
parent c544e0a12a
commit f40297485f
9 changed files with 35 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/utilities/zoneEditor/Tiles.vue
View File

@ -5,10 +5,10 @@
<h3 class="m-0 font-medium shrink-0">Tiles</h3>
</template>
<template #modalBody>
<div class="m-[15px] tiles">
<div class="tiles">
<img src="/assets/zone/blank_tile.png" alt="Blank tile" @click="zoneEditorStore.setSelectedTile('blank_tile')" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === 'blank_tile' }" />
<img v-for="(tile, index) in tiles" :key="index" :src="`${config.server_endpoint}/assets/tiles/${tile}.png`" alt="Tile" @click="zoneEditorStore.setSelectedTile(tile)" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === tile }" />
<div class="m-[15px]">
<div class="flex flex-wrap gap-2.5">
<img class="w-[64px] h-[32px] cursor-pointer border-2 border-solid border-transparent transition ease duration-300" src="/assets/zone/blank_tile.png" alt="Blank tile" @click="zoneEditorStore.setSelectedTile('blank_tile')" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === 'blank_tile' }" />
<img class="w-[64px] h-[32px] cursor-pointer border-2 border-solid border-transparent transition ease duration-300" v-for="(tile, index) in tiles" :key="index" :src="`${config.server_endpoint}/assets/tiles/${tile}.png`" alt="Tile" @click="zoneEditorStore.setSelectedTile(tile)" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === tile }" />
</div>
</div>
</template>
@ -37,23 +37,7 @@ onMounted(async () => {
</script>
<style lang="scss">
@import '@/assets/scss/main.scss';
.tiles {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.tiles img {
width: 64px;
height: 32px;
cursor: pointer;
border: 2px solid transparent;
transition: border 0.3s ease;
}
.tiles img.selected {
border: 2px solid $red;
img.selected {
@apply border-2 border-solid border-red;
}
</style>