noxious/client
3
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/forms/ChipsInput.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="chip-container">
<div v-for="(chip, i) in modelValue" :key="i" class="chip">
<div class="chip-container flex flex-wrap items-center border-0 border-b border-solid border-gray-50">
<div v-for="(chip, i) in modelValue" :key="i" class="chip flex gap-2.5 items-center bg-cyan rounded py-1.5 px-2.5 m-1">
<span>{{ chip }}</span>
<i class="delete-icon" @click="deleteChip(i)">X</i>
<i class="delete-icon cursor-pointer text-white font-light font-default not-italic hover:text-gray-50" @click="deleteChip(i)">X</i>
</div>
<input class="outline-none border-none max-w-[250px] p-1 m-1 text-white" v-model="currentInput" @keyup.enter="saveChip" @keydown.delete="backspaceDelete" />
</div>
@ -32,35 +32,3 @@ const backspaceDelete = (event) => {
}
}
</script>
<style scoped lang="scss">
@import '@/assets/scss/main.scss';
.chip-container {
display: flex;
flex-wrap: wrap;
align-items: center;
border-bottom: 1px solid #e0e0e0;
.chip {
display: flex;
gap: 10px;
align-items: center;
background-color: $cyan;
border-radius: 5px;
padding: 5px 10px;
margin: 4px;
.delete-icon {
cursor: pointer;
color: $white;
font-weight: 300;
font-family: $default;
font-style: normal;
&:hover {
color: $light-gray;
}
}
}
}
</style>

11
src/components/utilities/GmTools.vue
View File

@ -4,7 +4,7 @@
<h3 class="m-0 font-medium shrink-0">GM tools</h3>
</template>
<template #modalBody>
<div class="content">
<div class="content flex flex-col gap-2.5 m-[15px] h-[80px]">
<button class="btn-cyan py-1.5 px-[15px] w-full" type="button" @click="gmPanelStore.toggle()">Toggle GM panel</button>
<button class="btn-cyan py-1.5 px-[15px] w-full" type="button" @click="() => zoneEditorStore.toggleActive()">Zone manager</button>
</div>
@ -20,12 +20,3 @@ const zoneEditorStore = useZoneEditorStore()
const gmPanelStore = useGmPanelStore()
</script>
<style lang="scss">
.content {
display: flex;
flex-direction: column;
gap: 0.8rem;
margin: 15px;
height: calc(100% - 30px);
}
</style>

8
src/components/utilities/Notifications.vue
View File

@ -5,7 +5,7 @@
<h3 class="m-0 font-medium shrink-0">{{ notification.title }}</h3>
</template>
<template #modalBody v-if="notification.message">
<p class="modal-notif">{{ notification.message }}</p>
<p class="modal-notif m-[15px]">{{ notification.message }}</p>
</template>
</Modal>
</div>
@ -54,9 +54,3 @@ onBeforeUnmount(() => {
}
})
</script>
<style lang="scss">
.modal-notif {
margin: 15px;
}
</style>

13
src/components/utilities/assetManager/partials/ObjectDetails.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="object-manager">
<div class="object-manager h-full overflow-auto">
<div class="image-container relative p-2.5 flex items-center justify-center h-[300px]">
<img class="max-h-[280px]" :src="objectImageUrl" :alt="'Object ' + selectedObject" />
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
@ -67,14 +67,3 @@ onBeforeUnmount(() => {
assetManagerStore.setSelectedObject('')
})
</script>
<style lang="scss">
.asset-info {
.object-manager {
height: 100%;
overflow: auto;
}
}
</style>

53
src/components/utilities/assetManager/partials/ObjectList.vue
View File

@ -1,17 +1,18 @@
<template>
<div class="asset add-new relative p-2.5">
<label for="upload-asset" class="file-upload">
<input id="upload-asset" ref="objectUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
<div class="asset add-new relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap">
<label for="upload-asset" class="file-upload bg-cyan bg-opacity-50 border border-solid border-white rounded drop-shadow-20 py-1.5 px-[15px] inline-flex hover:bg-cyan hover:cursor-pointer">
<input class="hidden" id="upload-asset" ref="objectUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
Upload object(s)
</label>
<input class="input-cyan search-field" placeholder="Search..." />
<input class="input-cyan search-field w-full" placeholder="Search..." />
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</div>
<a class="asset relative p-2.5" :class="{ active: assetManagerStore.selectedObject === object.id }" v-for="(object, index) in assetManagerStore.objectList" :key="index" @click="assetManagerStore.setSelectedObject(object.id)">
<a class="asset relative p-2.5 cursor-pointer" :class="{ active: assetManagerStore.selectedObject === object.id }" v-for="(object, index) in assetManagerStore.objectList" :key="index" @click="assetManagerStore.setSelectedObject(object.id)">
<div class="asset-details flex items-center gap-2.5">
<!-- @TODO make all img have same width so text aligns nicely -->
<img class="h-[28px]" :src="`${config.server_endpoint}/assets/objects/${object.id}.png`" alt="Object" />
<span class="asset-name">{{ object.name }}</span>
<div class="h-[28px] w-[75px] max-w-[75px] flex justify-center">
<img class="h-[28px]" :src="`${config.server_endpoint}/assets/objects/${object.id}.png`" alt="Object" />
</div>
<span class="asset-name flex-shrink-0">{{ object.name }}</span>
</div>
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</a>
@ -54,39 +55,3 @@ onMounted(() => {
})
})
</script>
<style lang="scss" scoped>
@import '@/assets/scss/main';
.asset {
cursor: pointer;
&.add-new {
display: flex;
gap: 10px 20px;
flex-wrap: wrap;
.asset-name {
flex-shrink: 0;
}
}
.search-field {
width: calc(100% - 20px);
}
.file-upload {
background-color: rgba($cyan, 0.5);
border: 1px solid $white;
border-radius: 5px;
text-shadow: 0 3px 6px rgba($black, 0.2);
padding: 6px 15px;
display: inline-flex;
&:hover {
background-color: $cyan;
cursor: pointer;
}
input[type='file'] {
display: none;
}
}
}
</style>

11
src/components/utilities/assetManager/partials/TileDetails.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="tile-manager">
<div class="tile-manager h-full overflow-auto">
<div class="image-container relative p-2.5 flex items-center justify-center h-[300px]">
<img class="max-h-[280px]" :src="tileImageUrl" :alt="'Tile ' + selectedTile" />
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
@ -87,12 +87,3 @@ onBeforeUnmount(() => {
assetManagerStore.setSelectedTile('')
})
</script>
<style lang="scss">
.asset-info {
.tile-manager {
height: 100%;
overflow: auto;
}
}
</style>

50
src/components/utilities/assetManager/partials/TileList.vue
View File

@ -1,17 +1,17 @@
<template>
<div class="asset add-new relative p-2.5">
<label for="upload-asset" class="file-upload">
<input id="upload-asset" ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
<div class="asset add-new relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap">
<label for="upload-asset" class="file-upload bg-cyan bg-opacity-50 border border-solid border-white rounded drop-shadow-20 py-1.5 px-[15px] inline-flex hover:bg-cyan hover:cursor-pointer">
<input class="hidden" id="upload-asset" ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
Upload tile(s)
</label>
<input class="input-cyan search-field" placeholder="Search..." />
<input class="input-cyan search-field w-full" placeholder="Search..." />
<div class="absolute left-0 bottom-0 w-full height-[1px] bg-cyan-200"></div>
</div>
<a class="asset relative p-2.5" :class="{ active: assetManagerStore.selectedTile === tile }" v-for="(tile, index) in assetManagerStore.tileList" :key="index" @click="assetManagerStore.setSelectedTile(tile)">
<a class="asset relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap" :class="{ active: assetManagerStore.selectedTile === tile }" v-for="(tile, index) in assetManagerStore.tileList" :key="index" @click="assetManagerStore.setSelectedTile(tile)">
<div class="asset-details flex items-center gap-2.5">
<!-- @TODO make all img have same width so text aligns nicely -->
<!-- TODO make all img have same width so text aligns nicely -->
<img class="h-[28px]" :src="`${config.server_endpoint}/assets/tiles/${tile}.png`" alt="Tile" />
<span class="asset-name">{{ tile }}</span>
<span class="asset-name flex-shrink-0">{{ tile }}</span>
</div>
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</a>
@ -53,39 +53,3 @@ onMounted(() => {
})
})
</script>
<style lang="scss" scoped>
@import '@/assets/scss/main';
.asset {
cursor: pointer;
&.add-new {
display: flex;
gap: 10px 20px;
flex-wrap: wrap;
.asset-name {
flex-shrink: 0;
}
}
.search-field {
width: calc(100% - 20px);
}
.file-upload {
background-color: rgba($cyan, 0.5);
border: 1px solid $white;
border-radius: 5px;
text-shadow: 0 3px 6px rgba($black, 0.2);
padding: 6px 15px;
display: inline-flex;
&:hover {
background-color: $cyan;
cursor: pointer;
}
input[type='file'] {
display: none;
}
}
}
</style>

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>

3
tailwind.config.js
View File

@ -12,7 +12,8 @@ export default {
},
extend: {
dropShadow: {
'default': '0 3px 6px rgb(0, 0, 0)'
'default': '0 3px 6px rgb(0, 0, 0)',
'20': '0 3px 6px rgba(0, 0, 0, 0.2)'
},
colors: {
red: {