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

Styled assetmanager modal

Browse Source
This commit is contained in:
Colin Kallemein 2024-06-17 23:42:49 +02:00
parent 0339df9a8d
commit de5b29fb1a
2 changed files with 158 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/placeholders/wall-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

159
src/components/utilities/AssetManager/AssetManager.vue
View File

@ -1,10 +1,72 @@
<template> <template>
<Modal :isModalOpen="true" :modal-width="800" :modal-height="560"> <Modal :isModalOpen="true" :modal-width="800" :modal-height="630">
<template #modalHeader> <template #modalHeader>
<h3 class="modal-title">Asset manager</h3> <h3 class="modal-title">Asset manager</h3>
</template> </template>
<template #modalBody> <template #modalBody>
<div class="assets-container">
<div class="asset-categories">
<!-- TODO: Asset categories, replace with loop -->
<a class="category">
<span class="category-name">Tiles</span>
</a>
<!-- Example selected category -->
<a class="category selected">
<span class="category-name">Walls</span>
</a>
<a class="category">
<span class="category-name">Weapons</span>
</a>
<a class="category">
<span class="category-name">NPC's</span>
</a>
</div>
<!-- TODO: Show content based on selected category, replace with loop -->
<div class="assets tiles">
</div>
<!-- Example selected category & asset -->
<div class="assets walls active">
<a class="asset selected">
<span class="asset-name">Wall #1</span>
</a>
</div>
<div class="assets weapons">
</div>
<div class="assets npcs">
</div>
<div class="asset-info">
<div class="image-container">
<img src="/assets/placeholders/wall-1.png"/>
</div>
<div class="modal-form asset-manager">
<form class="form-fields">
<div class="form-field name">
<label for="name">Name</label>
<input class="input-cyan" type="text" name="name" placeholder="Wall #1">
</div>
<div class="form-field">
<label for="originX">OriginX</label>
<input class="input-cyan" type="number" name="originX" placeholder="0">
</div>
<div class="form-field">
<label for="originY">OriginY</label>
<input class="input-cyan" type="number" name="originY" placeholder="0">
</div>
<div class="submit">
<button class="btn-cyan" type="submit">SAVE</button>
</div>
</form>
</div>
</div>
</div>
</template> </template>
</Modal> </Modal>
</template> </template>
@ -14,5 +76,100 @@ import Modal from '@/components/utilities/Modal.vue'
</script> </script>
<style lang="scss"> <style lang="scss">
@import '@/assets/scss/main';
.assets-container {
display: flex;
height: 100%;
width: 100%;
.asset-categories {
width: calc(15% - 15px);
padding-right: 15px;
display: flex;
}
.assets {
width: calc(25% - 30px);
padding: 0 15px;
display: none;
&.active {
display: flex;
}
}
.asset-info {
display: flex;
width: calc(60% - 15px);
padding-left: 15px;
&::after {
display: none;
}
.image-container {
text-align: center;
img {
height: 200px;
padding-right: 15px;
margin: 30px 0;
}
}
.modal-form {
&.asset-manager {
.form-fields {
display: flex;
gap: 15px;
flex-wrap: wrap;
.form-field {
width: calc(50% - 15px);
&.name {
width: calc(100% - 15px);
}
}
.submit {
width: 100%;
}
}
}
}
}
.asset-categories, .assets, .asset-info {
gap: 30px;
flex-direction: column;
position: relative;
&::after {
content: '';
position: absolute;
right: 0;
width: 1px;
height: calc(100% + 30px);
top: -15px;
background-color: $dark-cyan;
}
.category, .asset, .image-container {
position: relative;
&::after {
content: '';
position: absolute;
left: -15px;
bottom: -15px;
width: calc(100% + 30px);
height: 1px;
background-color: $dark-cyan;
}
&.selected {
&::before {
content: '';
position: absolute;
width: calc(100% + 30px);
height: calc(100% + 30px);
left: -15px;
top: -15px;
background-color: rgba($cyan, 0.8);
z-index: -1;
}
}
}
}
}
</style> </style>