More Tailwind conversion
This commit is contained in:
@ -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>
|
||||
@ -66,15 +66,4 @@ onMounted(() => {
|
||||
onBeforeUnmount(() => {
|
||||
assetManagerStore.setSelectedObject('')
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.asset-info {
|
||||
.object-manager {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
</script>
|
||||
@ -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>
|
||||
@ -53,40 +54,4 @@ onMounted(() => {
|
||||
assetManagerStore.setObjectList(response)
|
||||
})
|
||||
})
|
||||
</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>
|
||||
</script>
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
@ -52,40 +52,4 @@ onMounted(() => {
|
||||
assetManagerStore.setTileList(response)
|
||||
})
|
||||
})
|
||||
</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>
|
||||
</script>
|
||||
Reference in New Issue
Block a user