Global margin for modals, cleaned up gm-panel styling
This commit is contained in:
parent
79f804d5f5
commit
98e9ae1a80
@ -70,20 +70,24 @@
|
||||
<style lang="scss">
|
||||
@import '@/assets/scss/main';
|
||||
|
||||
.container {
|
||||
&.gm-panel {
|
||||
height: calc(100% - 20px);
|
||||
margin: 0!important;
|
||||
}
|
||||
}
|
||||
.assets-container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.asset-categories {
|
||||
width: calc(15% - 15px);
|
||||
padding-right: 15px;
|
||||
width: 15%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.assets {
|
||||
width: calc(25% - 30px);
|
||||
padding: 0 15px;
|
||||
width: 25%;
|
||||
display: none;
|
||||
&.active {
|
||||
display: flex;
|
||||
@ -91,8 +95,7 @@
|
||||
}
|
||||
.asset-info {
|
||||
display: flex;
|
||||
width: calc(60% - 15px);
|
||||
padding-left: 15px;
|
||||
width: 60%;
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
@ -100,21 +103,24 @@
|
||||
text-align: center;
|
||||
img {
|
||||
height: 200px;
|
||||
padding-right: 15px;
|
||||
margin: 30px 0;
|
||||
padding-right: 10px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
.modal-form {
|
||||
&.asset-manager {
|
||||
margin: 10px;
|
||||
width: calc(100% - 20px);
|
||||
height: 100%;
|
||||
.form-fields {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.form-field {
|
||||
width: calc(50% - 15px);
|
||||
width: calc(50% - 5px);
|
||||
&.name {
|
||||
width: calc(100% - 15px);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.submit {
|
||||
@ -126,7 +132,6 @@
|
||||
}
|
||||
|
||||
.asset-categories, .assets, .asset-info {
|
||||
gap: 30px;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
&::after {
|
||||
@ -134,34 +139,27 @@
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 1px;
|
||||
height: calc(100% + 30px);
|
||||
top: -15px;
|
||||
height: calc(100% + 20px);
|
||||
top: 0;
|
||||
background-color: $dark-cyan;
|
||||
}
|
||||
.category, .asset, .image-container {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -15px;
|
||||
bottom: -15px;
|
||||
width: calc(100% + 30px);
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
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;
|
||||
}
|
||||
background-color: rgba($cyan, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -9,9 +9,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<template #modalBody>
|
||||
|
||||
|
||||
<div class="panel-body">
|
||||
<div class="container gm-panel">
|
||||
<AssetManager v-if="toggle == 'asset-manager'" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -25,5 +25,7 @@ const zoneEditorStore = useZoneEditorStore()
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.8rem;
|
||||
margin: 15px;
|
||||
height: calc(100% - 30px);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -246,9 +246,12 @@ function handleResize() {
|
||||
.modal-body {
|
||||
max-height: 80vh;
|
||||
overflow: auto;
|
||||
padding: 15px;
|
||||
flex-grow: 1;
|
||||
|
||||
.container {
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.resize {
|
||||
filter: invert(60%);
|
||||
position: absolute;
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<h3 class="modal-title">{{ notification.title }}</h3>
|
||||
</template>
|
||||
<template #modalBody v-if="notification.message">
|
||||
<p>{{ notification.message }}</p>
|
||||
<p class="modal-notif">{{ notification.message }}</p>
|
||||
</template>
|
||||
</Modal>
|
||||
</div>
|
||||
@ -54,3 +54,9 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.modal-notif {
|
||||
margin: 15px;
|
||||
}
|
||||
</style>
|
||||
@ -5,15 +5,17 @@
|
||||
<h3 class="modal-title">Decorations</h3>
|
||||
</template>
|
||||
<template #modalBody>
|
||||
<div class="buttons">
|
||||
<button class="btn-cyan" @click="zoneEditorStore.setDrawMode('tile')">Walls</button>
|
||||
<button class="btn-cyan" @click="zoneEditorStore.setDrawMode('tile')">Decorations</button>
|
||||
<button class="btn-cyan" @click="zoneEditorStore.setDrawMode('tile')">NPC</button>
|
||||
</div>
|
||||
<hr>
|
||||
<canvas ref="canvas" :width="decorationWidth" :height="decorationHeight" style="display: none"></canvas>
|
||||
<div class="decorations">
|
||||
<img v-for="(decoration, index) in decorations" :key="index" :src="decoration" alt="Decoration" @click="zoneEditorStore.setSelectedDecoration(index)" :class="{ selected: zoneEditorStore.selectedDecoration && zoneEditorStore.selectedDecoration === index }" />
|
||||
<div class="container decorations">
|
||||
<div class="buttons">
|
||||
<button class="btn-cyan" @click="zoneEditorStore.setDrawMode('tile')">Walls</button>
|
||||
<button class="btn-cyan" @click="zoneEditorStore.setDrawMode('tile')">Decorations</button>
|
||||
<button class="btn-cyan" @click="zoneEditorStore.setDrawMode('tile')">NPC</button>
|
||||
</div>
|
||||
<hr>
|
||||
<canvas ref="canvas" :width="decorationWidth" :height="decorationHeight" style="display: none"></canvas>
|
||||
<div class="decorations">
|
||||
<img v-for="(decoration, index) in decorations" :key="index" :src="decoration" alt="Decoration" @click="zoneEditorStore.setSelectedDecoration(index)" :class="{ selected: zoneEditorStore.selectedDecoration && zoneEditorStore.selectedDecoration === index }" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
@ -91,6 +93,8 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '@/assets/scss/main';
|
||||
|
||||
.decorations {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@ -111,6 +115,6 @@ onMounted(async () => {
|
||||
}
|
||||
|
||||
.decorations img.selected {
|
||||
border: 2px solid #ff0000;
|
||||
border: 2px solid $red;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -5,9 +5,11 @@
|
||||
<h3 class="modal-title">Tiles</h3>
|
||||
</template>
|
||||
<template #modalBody>
|
||||
<canvas ref="canvas" :width="tileWidth" :height="tileHeight" style="display: none"></canvas>
|
||||
<div class="tiles">
|
||||
<img v-for="(tile, index) in tiles" :key="index" :src="tile" alt="Tile" @click="zoneEditorStore.setSelectedTile(index)" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === index }" />
|
||||
<div class="container tiles">
|
||||
<canvas ref="canvas" :width="tileWidth" :height="tileHeight" style="display: none"></canvas>
|
||||
<div class="tiles">
|
||||
<img v-for="(tile, index) in tiles" :key="index" :src="tile" alt="Tile" @click="zoneEditorStore.setSelectedTile(index)" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === index }" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
@ -85,6 +87,8 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '@/assets/scss/main.scss';
|
||||
|
||||
.tiles {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@ -100,6 +104,7 @@ onMounted(async () => {
|
||||
}
|
||||
|
||||
.tiles img.selected {
|
||||
border: 2px solid #ff0000;
|
||||
border: 2px solid $red;
|
||||
}
|
||||
</style>
|
||||
|
||||
</style>
|
||||
@ -5,28 +5,30 @@
|
||||
</template>
|
||||
|
||||
<template #modalBody>
|
||||
<form method="post" @submit.prevent="" class="modal-form">
|
||||
<div class="form-fields">
|
||||
<div class="form-field">
|
||||
<label for="name">Name</label>
|
||||
<input class="input-cyan" v-model="name" name="name" id="name" />
|
||||
</div>
|
||||
<div class="form-field two-col">
|
||||
<div class="field">
|
||||
<label for="name">Width</label>
|
||||
<input class="input-cyan" v-model="width" name="name" id="name" type="number" />
|
||||
<div class="container settings">
|
||||
<form method="post" @submit.prevent="" class="modal-form">
|
||||
<div class="form-fields">
|
||||
<div class="form-field">
|
||||
<label for="name">Name</label>
|
||||
<input class="input-cyan" v-model="name" name="name" id="name" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="name">Height</label>
|
||||
<input class="input-cyan" v-model="height" name="name" id="name" type="number" />
|
||||
<div class="form-field two-col">
|
||||
<div class="field">
|
||||
<label for="name">Width</label>
|
||||
<input class="input-cyan" v-model="width" name="name" id="name" type="number" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="name">Height</label>
|
||||
<input class="input-cyan" v-model="height" name="name" id="name" type="number" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label for="name">PVP enabled</label>
|
||||
<input class="input-cyan" name="name" id="name" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label for="name">PVP enabled</label>
|
||||
<input class="input-cyan" name="name" id="name" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
@ -44,18 +44,20 @@
|
||||
</template>
|
||||
|
||||
<template #modalBody>
|
||||
<form method="post" @submit.prevent="create" class="modal-form">
|
||||
<div class="form-fields">
|
||||
<div class="form-field">
|
||||
<label for="name">Name</label>
|
||||
<input class="input-cyan" v-model="name" name="name" id="name" />
|
||||
<div class="container character-form">
|
||||
<form method="post" @submit.prevent="create" class="modal-form">
|
||||
<div class="form-fields">
|
||||
<div class="form-field">
|
||||
<label for="name">Name</label>
|
||||
<input class="input-cyan" v-model="name" name="name" id="name" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="submit">
|
||||
<button class="btn-cyan" type="submit">CREATE</button>
|
||||
</div>
|
||||
</form>
|
||||
<button class="btn-cyan" @click="isModalOpen = false">CANCEL</button>
|
||||
<div class="submit">
|
||||
<button class="btn-cyan" type="submit">CREATE</button>
|
||||
</div>
|
||||
</form>
|
||||
<button class="btn-cyan" @click="isModalOpen = false">CANCEL</button>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user